Merge pull request #38 from lannodev/refactor/navbar-mobile

Refactor/navbar mobile

Author: lannodev

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

@@ -1,18 +1,18 @@
 <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">
+        <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>
 
@@ -26,20 +26,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 +48,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/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 mx- mx-1 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>