style: refactor sidebar menu

Author: lannodev

src/app/core/constants/menu.ts

@@ -10,10 +10,7 @@ export class Menu {
           icon: 'assets/icons/heroicons/outline/chart-pie.svg',
           label: 'Dashboard',
           route: '/dashboard',
-          children: [
-            { label: 'Nfts', route: '/dashboard/nfts' },
-            // { label: 'Podcast', route: '/dashboard/podcast' },
-          ],
+          children: [{ label: 'Nfts', route: '/dashboard/nfts' }],
         },
         {
           icon: 'assets/icons/heroicons/outline/lock-closed.svg',

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

@@ -4,7 +4,7 @@
       {{ 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 -->
@@ -26,7 +26,7 @@
         <ng-template #parentMenu let-item="item">
           <div
             routerLink="{{ item.route }}"
-            class="text-muted-foreground hover:bg-card hover:text-foreground flex h-9 cursor-pointer items-center justify-start rounded-sm">
+            class="text-muted-foreground hover:text-primary flex h-9 cursor-pointer items-center justify-start rounded-sm">
             <a
               routerLinkActive="text-primary"
               class="ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
@@ -37,9 +37,9 @@
 
         <!-- 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">
+          <div class="flex h-9 cursor-pointer items-center justify-start rounded-sm">
             <a
-              class="text-muted-foreground group-hover:text-foreground ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
+              class="text-muted-foreground group-hover:text-primary ms-10 truncate text-xs font-semibold tracking-wide focus:outline-hidden">
               {{ item.label }}
             </a>
           </div>
@@ -48,10 +48,13 @@
         <!-- Arrow Icon -->
         <button
           *ngIf="item.children"
-          [ngClass]="{ hidden: !menuService.showSideBar, 'ltr:rotate-90 rtl:rotate-[-90deg]': 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 rtl:rotate-180'">
-          </svg-icon>
+          [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">
+          @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>
 
         <!-- Tooltip -->

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

@@ -1,9 +1,13 @@
 <div
-  class="max-h-0 overflow-hidden pt-1 ps-4 transition-all duration-500"
+  class="ps-4 max-h-0 overflow-hidden pt-1 transition-all duration-500"
   [ngClass]="{ hidden: !menuService.showSideBar, 'max-h-screen': submenu.expanded }">
-  <ul class="border-border text-muted-foreground flex flex-col ltr:border-l rtl:border-r border-dashed ps-2">
+  <ul class="border-border text-muted-foreground ps-2 relative flex flex-col border-dashed ltr:border-l rtl:border-r">
     <li *ngFor="let sub of submenu.children">
-      <div class="text-muted-foreground hover:bg-card hover:text-foreground flex rounded-sm" (click)="toggleMenu(sub)">
+      <!-- <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)">
         <!-- Condition -->
         <ng-container
           [ngTemplateOutlet]="sub.children ? childMenu : parentMenu"
@@ -16,20 +20,29 @@
             [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-[6px] bg-primary absolute flex w-[6px] translate-y-[13px] items-center rounded-full ltr:-translate-x-[11px] rtl:translate-x-[11px]">
+          </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]="{ hidden: !menuService.showSideBar, '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>
+            [ngClass]="{ hidden: !menuService.showSideBar }"
+            class="text-foreground/50 mx- mx-1 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 {
+            <svg-icon src="assets/icons/heroicons/outline/minus.svg" svgClass="h-4 w-4"> </svg-icon>
+            }
           </button>
         </ng-template>
       </div>

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

@@ -1,34 +1,33 @@
 <nav
-  [ngClass]="menuService.showSideBar ? 'w-52 xl:w-64' : 'w-[70px]'"
-  class="scrollbar-thumb--sm scrollbar-track-rounded bg-background scrollbar-thin scrollbar-track-transparent scrollbar-thumb-card hidden h-full flex-col justify-between overflow-auto pt-3 transition-all duration-300 lg:flex">
-  <div class="px-4">
+  [ngClass]="menuService.showSideBar ? 'w-[210px] xl:w-[280px]' : 'w-[70px]'"
+  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 h-10">
+    <div class="relative mx-4 h-9">
       <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 ml-1 ps-2 text-sm font-bold">
+        <b class="text-foreground ps-2 ml-1 text-sm font-bold">
           {{ appJson.displayName }}
         </b>
       </div>
       <button
         (click)="toggleSidebar()"
-        class="text-muted-foreground/50 hover:text-muted-foreground absolute top-2 rtl:left-2 ltr:right-2 flex h-5 w-5 items-center justify-center rounded-sm transition-all duration-200 focus:outline-hidden"
+        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"
         [ngClass]="{ 'rotate-180': !menuService.showSideBar }">
         <svg-icon src="assets/icons/heroicons/solid/chevron-double-left.svg"> </svg-icon>
       </button>
     </div>
 
-    <!-- Separator -->
-    <div class="pt-3">
-      <hr class="border-muted border-dashed" />
-    </div>
-
     <!-- Menu Items -->
-    <app-sidebar-menu></app-sidebar-menu>
+    <!-- <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>
+    </div>
   </div>
 
   <div class="mx-4 my-4 space-y-1">
@@ -43,12 +42,12 @@
       </svg-icon>
 
       <div class="ml-3 truncate text-[10px] font-semibold tracking-wide focus:outline-hidden">
-        <span class="-sm-lg bg-primary/10 text-primary px-2 font-semibold">v{{ appJson.version }}</span>
+        <span class="bg-primary/10 text-primary px-2 font-semibold">v{{ appJson.version }}</span>
       </div>
 
       <div class="fixed w-full" *ngIf="!menuService.showSideBar">
         <span
-          class="z-1 -sm-md bg-foreground text-background absolute left-12 -top-4 w-auto min-w-max origin-left scale-0 p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100">
+          class="z-1 bg-foreground text-background absolute left-12 -top-4 w-auto min-w-max origin-left scale-0 p-2 text-xs font-bold shadow-md transition-all duration-200 group-hover:scale-100">
           v{{ appJson.version }}
         </span>
       </div>

src/app/modules/layout/services/menu.service.ts

@@ -75,7 +75,7 @@ export class MenuService implements OnDestroy {
     });
   }
 
-  private isActive(instruction: any): boolean {
+  public isActive(instruction: any): boolean {
     return this.router.isActive(this.router.createUrlTree([instruction]), {
       paths: 'subset',
       queryParams: 'subset',