Merge pull request #37 from lannodev/refactor/sidebar-menu

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/navbar/profile-menu/profile-menu.component.html

@@ -5,14 +5,14 @@
     <img
       clickOutside
       (clickOutside)="isOpen = false"
-      class="h-9 w-9 rounded-md"
+      class="size-9 shrink-0 rounded-full border-2 border-green-500"
       src="https://avatars.githubusercontent.com/u/12519008?v=4"
       alt="" />
   </button>
   <!-- Dropdown -->
   <div
     [@openClose]="isOpen ? 'open' : 'closed'"
-    class="bg-background shadow-custom absolute z-20 mt-2 w-60 origin-top-right transform rounded-md py-4 ring-1 ring-transparent ring-opacity-5 transition focus:outline-hidden ltr:right-0 rtl:left-0">
+    class="bg-background shadow-custom border-muted absolute z-20 mt-2 w-60 origin-top-right transform rounded-md border border-dashed py-4 ring-1 ring-transparent ring-opacity-5 transition focus:outline-hidden ltr:right-0 rtl:left-0">
     <div class="flext-row flex items-center px-4 pb-4">
       <div class="w-10 shrink-0">
         <img class="rounded-md" src="https://avatars.githubusercontent.com/u/12519008?v=4" alt="" />
@@ -25,12 +25,12 @@
 
     <div class="border-border border-b border-dashed"></div>
 
-    <ul class="my-2 mx-4 flex flex-col">
+    <ul class="my-2 mx-2 flex flex-col">
       @for (item of profileMenu; track $index) {
       <li
         routerLink="{{ item.link }}"
         :key="$index"
-        class="text-muted-foreground hover:bg-card hover:text-primary inline-flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-xs font-semibold">
+        class="text-muted-foreground hover:bg-card hover:text-primary inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-xs font-semibold">
         <svg-icon src="{{ item.icon }}" [svgClass]="'h-5 w-5 text-muted-foreground/50'"> </svg-icon>
         {{ item.title }}
       </li>
@@ -44,11 +44,11 @@
         <div
           :key="$index"
           (click)="toggleThemeColor(item.name)"
-          [ngClass]="{ 'border-muted-foreground bg-card': item.name == themeService.theme().color }"
-          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
+          [ngClass]="{ 'border-muted-foreground/30 bg-card': item.name == themeService.theme().color }"
+          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border border-dashed px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
           <span
             [style.backgroundColor]="item.code"
-            class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-rose-500"></span>
+            class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full"></span>
           <p class="capitalize">{{ item.name }}</p>
         </div>
         }
@@ -61,8 +61,8 @@
         <div
           :key="$index"
           (click)="toggleThemeMode()"
-          [ngClass]="{ 'border-muted-foreground bg-card': item == themeService.theme().mode }"
-          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
+          [ngClass]="{ 'border-muted-foreground/30 bg-card': item == themeService.theme().mode }"
+          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border border-dashed px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
           <svg-icon
             [src]="
               item == 'light' ? 'assets/icons/heroicons/outline/sun.svg' : 'assets/icons/heroicons/outline/moon.svg'
@@ -81,8 +81,8 @@
         <div
           :key="$index"
           (click)="setDirection(item)"
-          [ngClass]="{ 'border-muted-foreground bg-card': item == themeService.theme().direction }"
-          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
+          [ngClass]="{ 'border-muted-foreground/30 bg-card': item == themeService.theme().direction }"
+          class="focus-visible:ring-ring border-border bg-background text-muted-foreground hover:bg-card hover:text-foreground shadow-xs inline-flex h-8 cursor-pointer items-center justify-start space-x-2 whitespace-nowrap rounded-md border border-dashed px-3 text-xs font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50">
           <svg-icon
             [src]="
               item == 'ltr'

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-[36px] 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-[36px] 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 relative flex flex-col border-dashed px-2 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,25 +20,36 @@
             [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>
       <!-- Submenu items -->
+      @if(sub.children?.length){
       <app-sidebar-submenu [submenu]="sub"></app-sidebar-submenu>
+      }
     </li>
   </ul>
 </div>

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

@@ -16,7 +16,9 @@ export class SidebarSubmenuComponent implements OnInit {
 
   constructor(public menuService: MenuService) {}
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+    console.log(this.submenu);
+  }
 
   public toggleMenu(menu: any) {
     this.menuService.toggleSubMenu(menu);

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',

src/assets/icons/heroicons/outline/minus.svg

@@ -20,5 +20,5 @@ test('check toggle sidebar', async ({ page }) => {
   await page.getByRole('navigation').getByRole('button').click();
   await page.waitForTimeout(500);
   const normalSidebarSizes = await sidebar.boundingBox();
-  expect(normalSidebarSizes?.width).toBe(256);
+  expect(normalSidebarSizes?.width).toBe(280);
 });