style: change sidebar menu layout

Author: lannodev

src/app/modules/layout/components/navbar/navbar-mobile/navbar-mobile-menu/navbar-mobile-menu.component.html

@@ -12,9 +12,7 @@
         (click)="toggleMenu(item)"
         class="text-muted-foreground hover:text-foreground group flex grow items-center gap-4">
         <!-- Icon -->
-        <div
-          [ngClass]="item.active && !menuService.showSideBar ? 'text-primary' : 'text-muted-foreground/50'"
-          class="pointer-events-none">
+        <div [ngClass]="item.active && !menuService.showSideBar ? 'text-primary' : 'text-muted-foreground/50'">
           <svg-icon src="{{ item.icon }}" [svgClass]="'h-5 w-5'"> </svg-icon>
         </div>
 

src/app/modules/layout/components/navbar/profile-menu/profile-menu.component.html

@@ -5,7 +5,7 @@
     <img
       clickOutside
       (clickOutside)="isOpen = false"
-      class="size-9 shrink-0 rounded-full border-2 border-green-500"
+      class="size-9 shrink-0 rounded-md"
       src="https://avatars.githubusercontent.com/u/12519008?v=4"
       alt="" />
   </button>

src/app/modules/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html

@@ -1,5 +1,5 @@
-<div class="pt-4" *ngFor="let menu of menuService.pagesMenu">
-  <div class="mx-1 mb-2 flex items-center justify-between">
+<div *ngFor="let menu of menuService.pagesMenu">
+  <div *ngIf="menuService.showSideBar" class="mx-1 flex items-center justify-between py-3">
     <small [ngClass]="{ hidden: !menuService.showSideBar }" class="text-muted-foreground/50 text-xs font-semibold">
       {{ menu.group }}
     </small>
@@ -8,11 +8,15 @@
     <!-- List items -->
     <li *ngFor="let item of menu.items">
       <!-- Menu List -->
-      <div (click)="toggleMenu(item)" class="text-muted-foreground group relative">
+      <div
+        (click)="toggleMenu(item)"
+        [ngClass]="{
+          'hover:bg-primary/10': !menuService.showSideBar && item.active,
+          'hover:bg-card/50': !menuService.showSideBar
+        }"
+        class="text-muted-foreground hover:text-foreground group relative flex grow items-center gap-4 rounded-lg px-2">
         <!-- Icon -->
-        <div
-          [ngClass]="item.active && !menuService.showSideBar ? 'text-primary' : 'text-muted-foreground/50'"
-          class="pointer-events-none absolute m-2">
+        <div [ngClass]="item.active && !menuService.showSideBar ? 'text-primary' : 'text-muted-foreground/50'">
           <svg-icon src="{{ item.icon }}" [svgClass]="'h-5 w-5'"> </svg-icon>
         </div>
 
@@ -28,18 +32,20 @@
             routerLink="{{ item.route }}"
             class="text-muted-foreground hover:text-primary flex h-[36px] cursor-pointer items-center justify-start rounded-sm">
             <a
+              [ngClass]="{ hidden: !menuService.showSideBar }"
               routerLinkActive="text-primary"
-              class="ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
+              class="truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
         </ng-template>
 
         <!-- Workaround:: Disable routerLink -->
         <ng-template #childMenu let-item="item">
-          <div class="flex h-[36px] cursor-pointer items-center justify-start rounded-sm">
+          <div class="flex h-9 grow cursor-pointer items-center justify-start rounded-sm">
             <a
-              class="text-muted-foreground group-hover:text-primary ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
+              [ngClass]="{ hidden: !menuService.showSideBar }"
+              class="text-muted-foreground group-hover:text-primary truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
@@ -49,7 +55,7 @@
         <button
           *ngIf="item.children"
           [ngClass]="{ hidden: !menuService.showSideBar }"
-          class="text-foreground/50 pointer-events-none absolute top-1 mx-1 flex items-center p-1 transition-all duration-500 ltr:right-0 rtl:left-0">
+          class="text-foreground/50 flex cursor-pointer items-center justify-end p-0 transition-all duration-500 ltr:right-0 rtl:left-0">
           @if(!item.expanded){
           <svg-icon src="assets/icons/heroicons/outline/plus.svg" svgClass="h-4 w-4"> </svg-icon>
           }@else {
@@ -58,9 +64,9 @@
         </button>
 
         <!-- Tooltip -->
-        <div class="fixed w-full" *ngIf="!menuService.showSideBar">
+        <div class="z-1 fixed h-[36px]" *ngIf="!menuService.showSideBar">
           <span
-            class="z-1 bg-foreground text-background absolute -top-[34px] w-auto min-w-max scale-0 rounded-md p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100 ltr:left-14 ltr:origin-left rtl:right-14 rtl:origin-right">
+            class="z-1 bg-foreground text-background absolute w-auto min-w-max translate-y-[2px] scale-0 rounded-md p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100 ltr:origin-left ltr:translate-x-10 rtl:origin-right rtl:-translate-x-10">
             {{ item.label }}
           </span>
         </div>
@@ -71,7 +77,7 @@
     </li>
   </ul>
 
-  <div class="pt-3" *ngIf="menu.separator">
+  <div class="py-3" *ngIf="menu.separator">
     <hr class="border-border border-dashed" />
   </div>
 </div>

src/app/modules/layout/components/sidebar/sidebar-submenu/sidebar-submenu.component.html

@@ -1,13 +1,10 @@
 <div
-  class="ps-4 max-h-0 overflow-hidden pt-1 transition-all duration-500"
+  class="max-h-0 overflow-hidden pt-1 transition-all duration-500 ltr:pl-4 rtl:pr-4"
   [ngClass]="{ hidden: !menuService.showSideBar, 'max-h-screen': submenu.expanded }">
-  <ul class="border-border text-muted-foreground relative flex flex-col border-dashed px-2 ltr:border-l rtl:border-r">
+  <ul
+    class="border-border text-muted-foreground flex flex-col border-dashed ltr:border-l ltr:pl-2 rtl:border-r rtl:pr-2">
     <li *ngFor="let sub of submenu.children">
-      <!-- <span
-        class="-start-[3px] rtl:start-0 before:size-[6px] bg-primary absolute flex w-[6px] shrink-0 items-center before:absolute before:top-0 before:-translate-y-1/2 before:rounded-full rtl:before:translate-x-1/2">
-      </span> -->
-
-      <div class="text-muted-foreground hover:text-primary flex rounded-sm" (click)="toggleMenu(sub)">
+      <div class="text-muted-foreground hover:text-primary relative flex" (click)="toggleMenu(sub)">
         <!-- Condition -->
         <ng-container
           [ngTemplateOutlet]="sub.children ? childMenu : parentMenu"
@@ -20,12 +17,12 @@
             [routerLink]="sub.route"
             routerLinkActive="text-primary"
             [routerLinkActiveOptions]="{ exact: true }"
-            class="hover:bg-card inline-block w-full px-4 py-2 text-xs">
+            class="hover:bg-card inline-block w-full rounded-lg px-4 py-2 text-xs">
             {{ sub.label }}
           </a>
           @if(menuService.isActive(sub.route)){
           <span
-            class="size-[6px] bg-primary absolute flex w-[6px] translate-y-[13px] items-center rounded-full ltr:-translate-x-[11px] rtl:translate-x-[11px]">
+            class="size-1.5 bg-primary absolute flex translate-y-3.5 items-center rounded-full ltr:-translate-x-[11.5px] rtl:translate-x-[11.5px]">
           </span>
           }
         </ng-template>
@@ -37,7 +34,7 @@
           </a>
           <button
             [ngClass]="{ hidden: !menuService.showSideBar }"
-            class="text-foreground/50 flex cursor-pointer items-center p-1 transition-all duration-500">
+            class="text-foreground/50 flex cursor-pointer items-center justify-end px-2 transition-all duration-500">
             @if(!sub.expanded){
             <svg-icon src="assets/icons/heroicons/outline/plus.svg" svgClass="h-4 w-4"> </svg-icon>
             }@else {

src/app/modules/layout/components/sidebar/sidebar.component.html

@@ -3,27 +3,28 @@
   class="bg-background hidden h-full flex-col justify-between pt-3 transition-all duration-300 lg:flex">
   <div class="overflow-hidden">
     <!-- Logo -->
-    <div class="relative mx-4 h-9">
+    <div
+      [ngClass]="menuService.showSideBar ? 'justify-between' : 'justify-center'"
+      class="mx-4 mb-2 flex h-9 items-center">
       <div class="flex items-center" *ngIf="menuService.showSideBar">
         <a
           (click)="toggleSidebar()"
           class="bg-primary flex cursor-pointer items-center justify-center rounded-sm p-2 focus:outline-hidden focus:ring-1">
           <svg-icon src="assets/icons/logo.svg"> </svg-icon>
         </a>
-        <b class="text-foreground ps-2 ml-1 text-sm font-bold">
+        <b class="text-foreground ps-2 ml-1 grow text-sm font-bold">
           {{ appJson.displayName }}
         </b>
       </div>
       <button
         (click)="toggleSidebar()"
-        class="text-muted-foreground/50 hover:text-muted-foreground absolute top-2 flex h-5 w-5 items-center justify-center rounded-sm transition-all duration-200 focus:outline-hidden ltr:right-2 rtl:left-2"
+        class="text-muted-foreground/50 hover:text-muted-foreground flex items-center justify-center rounded-md p-2 transition-all duration-200 focus:outline-hidden"
         [ngClass]="{ 'rotate-180': !menuService.showSideBar }">
         <svg-icon src="assets/icons/heroicons/solid/chevron-double-left.svg"> </svg-icon>
       </button>
     </div>
 
     <!-- Menu Items -->
-    <!-- <app-sidebar-menu></app-sidebar-menu> -->
     <div
       class="scrollbar-thumb--sm scrollbar-track-rounded scrollbar-thin scrollbar-track-transparent scrollbar-thumb-card h-full overflow-auto px-4">
       <app-sidebar-menu></app-sidebar-menu>