diff --git a/assets/styles/app.tailwind.css b/assets/styles/app.tailwind.css
index 753de65..257fe2e 100644
--- a/assets/styles/app.tailwind.css
+++ b/assets/styles/app.tailwind.css
@@ -544,6 +544,40 @@ video {
--tw-backdrop-sepia: ;
}
+.container {
+ width: 100%;
+}
+
+@media (min-width: 640px) {
+ .container {
+ max-width: 640px;
+ }
+}
+
+@media (min-width: 768px) {
+ .container {
+ max-width: 768px;
+ }
+}
+
+@media (min-width: 1024px) {
+ .container {
+ max-width: 1024px;
+ }
+}
+
+@media (min-width: 1280px) {
+ .container {
+ max-width: 1280px;
+ }
+}
+
+@media (min-width: 1536px) {
+ .container {
+ max-width: 1536px;
+ }
+}
+
.visible {
visibility: visible;
}
@@ -556,10 +590,19 @@ video {
position: fixed;
}
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+
.block {
display: block;
}
+.flex {
+ display: flex;
+}
+
.table {
display: table;
}
@@ -568,6 +611,26 @@ video {
display: none;
}
+.max-w-3xl {
+ max-width: 48rem;
+}
+
+.max-w-5xl {
+ max-width: 64rem;
+}
+
+.max-w-6xl {
+ max-width: 72rem;
+}
+
+.max-w-7xl {
+ max-width: 80rem;
+}
+
+.flex-1 {
+ flex: 1 1 0%;
+}
+
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@@ -577,6 +640,47 @@ video {
background-color: rgb(203 213 225 / var(--tw-bg-opacity));
}
+.bg-slate-800 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+}
+
+.text-2xl {
+ font-size: 1.5rem;
+ line-height: 2rem;
+}
+
+.leading-4 {
+ line-height: 1rem;
+}
+
+.leading-6 {
+ line-height: 1.5rem;
+}
+
+.leading-8 {
+ line-height: 2rem;
+}
+
+.leading-7 {
+ line-height: 1.75rem;
+}
+
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
diff --git a/src/ControlPanel/CustomerListAction.php b/src/ControlPanel/CustomerListAction.php
index e5005ef..94cde71 100644
--- a/src/ControlPanel/CustomerListAction.php
+++ b/src/ControlPanel/CustomerListAction.php
@@ -7,7 +7,7 @@
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Attribute\Route;
-#[Route('/customers')]
+#[Route('/customers', name: 'customer_list')]
final class CustomerListAction extends AbstractController
{
public function __invoke(MysqlCustomerRepository $customers): Response
diff --git a/src/ControlPanel/Menu.php b/src/ControlPanel/Menu.php
index 52f8e2b..a95b2d8 100644
--- a/src/ControlPanel/Menu.php
+++ b/src/ControlPanel/Menu.php
@@ -21,8 +21,10 @@ public function main(array $options): ItemInterface
$menu = $this->factory->createItem('root', $options);
$menu->addChild('menu.dashboard', ['route' => DashboardAction::class]);
- $menu->addChild('menu.customers', ['route' => CustomerListAction::class]);
- $menu->addChild('menu.products', ['route' => ProductListAction::class]);
+
+ $management = $menu->addChild('menu.management', ['route' => DashboardAction::class]);
+ $management->addChild('menu.customers', ['route' => 'customer_list', 'routes' => ['customer_list']]);
+ $management->addChild('menu.products', ['route' => ProductListAction::class]);
return $menu;
}
diff --git a/templates/_menu.html.twig b/templates/_menu.html.twig
new file mode 100644
index 0000000..2aa8289
--- /dev/null
+++ b/templates/_menu.html.twig
@@ -0,0 +1,15 @@
+{% extends 'knp_menu.html.twig' %}
+
+{% block label %}
+ {%- set translation_domain = item.extra('translation_domain', 'messages') -%}
+ {%- set label = item.label -%}
+ {%- if translation_domain is not same as(false) -%}
+ {%- set label = label|trans(item.extra('translation_params', {}), translation_domain) -%}
+ {%- endif -%}
+ {%- if options.allow_safe_labels and item.extra('safe_label', false) %}{{ label|raw }}{% else %}{{ label }}{% endif -%}
+{% endblock %}
+
+{% block linkElement %}{% import _self as knp_menu %}{{ block('label') }}{% endblock %}
+
+{% block spanElement %}{% import _self as knp_menu %}{{ block('label') }}{% endblock %}
+
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 3a44812..c340dd2 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -12,17 +12,23 @@
{% block importmap %}{{ importmap('app') }}{% endblock %}
{% endblock %}
-
+
-
- {% block body %}
-
- {% block main %}{% endblock %}
-
- {% endblock %}
+
+
+ {% block body %}
+
+ {% block headline %}{% endblock %}
+ {% block main %}{% endblock %}
+
+ {% endblock %}
+
diff --git a/templates/customer/list.html.twig b/templates/customer/list.html.twig
index 78d02d5..e322df8 100644
--- a/templates/customer/list.html.twig
+++ b/templates/customer/list.html.twig
@@ -1,8 +1,8 @@
{% extends 'base.html.twig' %}
-{% block main %}
- Customers
+{% block headline %}Customers{% endblock %}
+{% block main %}