Refacto menu

src/app/app.css

@@ -4,4 +4,34 @@
   color: #212529;
 }
 
+.app-layout {
+  display: flex;
+  min-height: 100vh;
+  background: #f9fafb;
+}
 
+.app-sidebar {
+  width: 220px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 0;
+  height: 100vh;
+}
+
+.app-content {
+  flex: 1;
+  padding: 2rem;
+  min-width: 0;
+}
+
+@media (max-width: 768px) {
+  .app-layout {
+    flex-direction: column;
+  }
+
+  .app-sidebar {
+    width: 100%;
+    height: auto;
+    position: static;
+  }
+}

src/app/app.html

@@ -1,12 +1,8 @@
-<main class="container-fluid min-vh-100">
-  <div class="row min-vh-100">
-    <aside class="col-12 col-md-3 col-lg-2 p-0">
+<div class="app-layout">
+  <div class="app-sidebar">
     <app-menu />
-    </aside>
-
-    <section class="col-12 col-md-9 col-lg-10 p-4" aria-live="polite">
-      <router-outlet />
-    </section>
   </div>
+  <main class="app-content" aria-live="polite">
+    <router-outlet />
   </main>
-
+</div>

src/app/menu/menu.css

@@ -3,4 +3,53 @@
   height: 100%;
 }
 
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #ffffff;
+  border-right: 1px solid #e5e7eb;
+  padding: 1.25rem 0.75rem;
+  gap: 1.5rem;
+}
 
+.sidebar-logo {
+  padding: 0 0.5rem;
+}
+
+.sidebar-logo-text {
+  font-size: 1.15rem;
+  font-weight: 800;
+  color: #111827;
+  letter-spacing: -0.02em;
+}
+
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+}
+
+.sidebar-link {
+  display: block;
+  padding: 0.55rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #4b5563;
+  text-decoration: none;
+  border-left: 3px solid transparent;
+  transition: background 0.1s, color 0.1s;
+}
+
+.sidebar-link:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.sidebar-link--active {
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-left-color: #2563eb;
+  font-weight: 600;
+}

src/app/menu/menu.html

@@ -1,24 +1,18 @@
-<aside class="bg-dark text-white min-vh-100 p-3" aria-label="Menu principal">
-  <div class="d-flex flex-column gap-3">
-    <div>
-      <h2 class="h5 mb-0">Bonsai</h2>
+<aside class="sidebar" aria-label="Menu principal">
+  <div class="sidebar-logo">
+    <span class="sidebar-logo-text">Bonsai</span>
   </div>
 
-    <nav>
-      <ul class="nav nav-pills flex-column gap-2">
+  <nav class="sidebar-nav">
     @for (item of menuItems; track item.path) {
-          <li class="nav-item">
       <a
-              class="nav-link text-white"
+        class="sidebar-link"
         [routerLink]="item.path"
-              routerLinkActive="active bg-primary"
+        routerLinkActive="sidebar-link--active"
         [routerLinkActiveOptions]="{ exact: true }"
       >
         {{ item.label }}
       </a>
-          </li>
     }
-      </ul>
   </nav>
-  </div>
 </aside>