ui

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);
 }

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

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;
     }

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 %}<a class="px-6 block" href="{{ item.uri }}"{{ knp_menu.attributes(item.linkAttributes) }}>{{ block('label') }}</a>{% endblock %}
+
+{% block spanElement %}{% import _self as knp_menu %}<span class="px-6 block bg-white" {{ knp_menu.attributes(item.labelAttributes) }}>{{ block('label') }}</span>{% endblock %}
+

templates/base.html.twig

@@ -12,17 +12,23 @@
             {% block importmap %}{{ importmap('app') }}{% endblock %}
         {% endblock %}
     </head>
-    <body class="bg-slate-300">
+    <body class="bg-slate-300 leading-7">
         <header>
             Header
         </header>
-        <nav>
-            {{ knp_menu_render('main', {'depth': 2, 'currentAsLink': false}) }}
-        </nav>
-        {% block body %}
-            <main>
-                {% block main %}{% endblock %}
-            </main>
-        {% endblock %}
+        <div class="flex mx-auto max-w-7xl">
+            <nav>
+                {{ knp_menu_render('main', {
+                    'template': '_menu.html.twig',
+                    'currentAsLink': false,
+                }) }}
+            </nav>
+            {% block body %}
+                <main class="flex-1 bg-white">
+                    <h1 class="text-2xl">{% block headline %}{% endblock %}</h1>
+                    {% block main %}{% endblock %}
+                </main>
+            {% endblock %}
+        </div>
     </body>
 </html>

templates/customer/list.html.twig

@@ -1,8 +1,8 @@
 {% extends 'base.html.twig' %}
 
-{% block main %}
-    <h1>Customers</h1>
+{% block headline %}Customers{% endblock %}
 
+{% block main %}
     <table>
         <thead>
                 <tr>