style: update navbar mobile menu style

Author: lannodev

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

@@ -1,18 +1,20 @@
 <div class="pt-4" *ngFor="let menu of menuService.pagesMenu">
   <div class="mx-1 mb-2 flex items-center justify-between">
-    <small class="text-muted-foreground text-xs font-semibold">
+    <small class="text-muted-foreground/50 text-xs font-semibold">
       {{ menu.group }}
     </small>
   </div>
-  <ul class="flex flex-col space-y-1">
+  <ul class="flex flex-col">
     <!-- List items -->
     <li *ngFor="let item of menu.items">
       <!-- Menu List -->
-      <div (click)="toggleMenu(item)" class="text-muted-foreground hover:text-foreground group relative">
+      <div
+        (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 absolute m-2">
+          class="pointer-events-none">
           <svg-icon src="{{ item.icon }}" [svgClass]="'h-5 w-5'"> </svg-icon>
         </div>
 
@@ -26,20 +28,20 @@
         <ng-template #parentMenu let-item="item">
           <div
             routerLink="{{ item.route }}"
-            class="hover:bg-card flex h-9 cursor-pointer items-center justify-start rounded-sm">
+            class="text-muted-foreground hover:text-primary flex h-[36px] cursor-pointer items-center justify-start rounded-sm">
             <a
               routerLinkActive="text-primary"
-              (click)="closeMenu()"
-              class="truncate text-xs font-semibold tracking-wide focus:outline-hidden ltr:ml-10 rtl:mr-10">
+              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="hover:bg-card flex h-9 cursor-pointer items-center justify-start rounded-sm">
-            <a class="truncate text-xs font-semibold tracking-wide focus:outline-hidden ltr:ml-10 rtl:mr-10">
+          <div class="flex h-9 grow cursor-pointer items-center justify-start rounded-sm">
+            <a
+              class="text-muted-foreground group-hover:text-primary truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
@@ -48,9 +50,13 @@
         <!-- Arrow Icon -->
         <button
           *ngIf="item.children"
-          [ngClass]="{ hidden: !menuService.showSideBar, 'rotate-90': item.expanded }"
-          class="text-muted-foreground/50 pointer-events-none absolute top-1 flex items-center p-1 transition-all duration-500 ltr:right-0 rtl:left-0">
-          <svg-icon src="assets/icons/heroicons/solid/chevron-right.svg" [svgClass]="'h-5 w-5'"> </svg-icon>
+          [ngClass]="{ hidden: !menuService.showSideBar }"
+          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 {
+          <svg-icon src="assets/icons/heroicons/outline/minus.svg" svgClass="h-4 w-4"> </svg-icon>
+          }
         </button>
       </div>
 

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

@@ -1,10 +1,10 @@
 <div
-  class="max-h-0 overflow-hidden pt-1 transition-all duration-500 ltr:pl-4 rtl:pr-4"
+  class="max-h-0 overflow-hidden pt-1 transition-all duration-500 ltr:pl-2.5 rtl:pr-2.5"
   [ngClass]="{ 'max-h-screen': submenu.expanded }">
   <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">
-      <div class="hover:bg-card hover:text-foreground flex rounded-sm" (click)="toggleMenu(sub)">
+      <div class="text-muted-foreground hover:text-primary relative flex rounded-sm" (click)="toggleMenu(sub)">
         <!-- Condition -->
         <ng-container
           [ngTemplateOutlet]="sub.children ? childMenu : parentMenu"
@@ -18,25 +18,34 @@
             [routerLink]="sub.route"
             routerLinkActive="text-primary"
             [routerLinkActiveOptions]="{ exact: true }"
-            class="inline-block w-full px-4 py-2 text-xs font-semibold">
+            class="hover:bg-card inline-block w-full px-4 py-2 text-xs">
             {{ sub.label }}
           </a>
+          @if(menuService.isActive(sub.route)){
+          <span
+            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>
 
         <!-- Child Menu -->
         <ng-template #childMenu let-sub="sub">
-          <a class="inline-block w-full cursor-pointer px-4 py-2 text-xs font-semibold">
+          <a class="inline-block w-full cursor-pointer px-4 py-2 text-xs">
             {{ sub.label }}
           </a>
-          <button
-            [ngClass]="{ 'rotate-90': sub.expanded }"
-            class="text-muted-foreground flex items-center p-1 transition-all duration-500">
-            <svg-icon src="assets/icons/heroicons/solid/chevron-right.svg" [svgClass]="'h-5 w-5'"> </svg-icon>
+          <button class="text-foreground/50 flex cursor-pointer items-center justify-end transition-all duration-500">
+            @if(!sub.expanded){
+            <svg-icon src="assets/icons/heroicons/outline/plus.svg" svgClass="h-4 w-4"> </svg-icon>
+            }@else {
+            <svg-icon src="assets/icons/heroicons/outline/minus.svg" svgClass="h-4 w-4"> </svg-icon>
+            }
           </button>
         </ng-template>
       </div>
       <!-- Submenu items -->
+      @if(sub.children?.length){
       <app-navbar-mobile-submenu [submenu]="sub"></app-navbar-mobile-submenu>
+      }
     </li>
   </ul>
 </div>

src/app/modules/layout/components/navbar/navbar-mobile/navbar-mobile-submenu/navbar-mobile-submenu.component.ts

@@ -14,7 +14,7 @@ import { MenuService } from 'src/app/modules/layout/services/menu.service';
 export class NavbarMobileSubmenuComponent implements OnInit {
   @Input() public submenu = <SubMenuItem>{};
 
-  constructor(private menuService: MenuService) {}
+  constructor(public menuService: MenuService) {}
 
   ngOnInit(): void {}
 

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

@@ -1,12 +1,3 @@
-<!--
-	Mobile menu, show/hide based on mobile menu state.
-	Entering: "duration-200 ease-out"
-		From: "opacity-0 scale-95"
-		To: "opacity-100 scale-100"
-	Leaving: "duration-100 ease-in"
-		From: "opacity-100 scale-100"
-		To: "opacity-0 scale-95"
--->
 <div
   [ngClass]="
     menuService.showMobileMenu
@@ -32,7 +23,6 @@
             type="button"
             class="text-muted-foreground focus:ring-primary hover:bg-card hover:text-foreground inline-flex items-center justify-center rounded-md p-2 transition-transform hover:rotate-90 focus:outline-hidden focus:ring-2 focus:ring-inset">
             <span class="sr-only">Close menu</span>
-            <!-- Heroicon name: outline/x -->
             <svg-icon src="assets/icons/heroicons/outline/x.svg"> </svg-icon>
           </button>
         </div>

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

@@ -37,7 +37,7 @@
           </a>
           <button
             [ngClass]="{ hidden: !menuService.showSideBar }"
-            class="text-foreground/50 mx- mx-1 flex cursor-pointer items-center p-1 transition-all duration-500">
+            class="text-foreground/50 flex cursor-pointer items-center p-1 transition-all duration-500">
             @if(!sub.expanded){
             <svg-icon src="assets/icons/heroicons/outline/plus.svg" svgClass="h-4 w-4"> </svg-icon>
             }@else {