Backup Commit

Author: sid-devspot

.vscode/extensions.json

@@ -1,42 +1,62 @@
 export class Menubar {
   private root: HTMLElement;
-  private trigger: HTMLElement | null;
+  private triggerBtn: HTMLButtonElement | null;
+  private triggerIcon: HTMLElement | null;
   private menu: HTMLElement | null;
+  private links: NodeListOf<HTMLElement>;
   private isOpen = false;
 
   constructor(root: HTMLElement) {
     this.root = root;
-    this.trigger = this.root.querySelector(".menubar-trigger");
-    this.menu = this.root.querySelector(".menubar-set-02");
+    this.triggerBtn = this.root.querySelector('.menubar-trigger-btn');
+    this.triggerIcon = this.root.querySelector('.menubar-trigger');
+    this.menu = this.root.querySelector('.menubar-set-02');
+    this.links = this.root.querySelectorAll('.menubar-link');
 
     this.init();
   }
 
   private init() {
-    if (!this.trigger || !this.menu) return;
+    if (!this.triggerBtn || !this.triggerIcon || !this.menu) return;
 
     // ✅ start closed
     this.close();
 
-    // ✅ toggle on click
-    this.trigger.addEventListener("click", () => {
+    // ✅ toggle on click (button)
+    this.triggerBtn.addEventListener('click', () => {
       this.isOpen ? this.close() : this.open();
     });
+
+    // ✅ close when clicking any link
+    this.links.forEach((link) => {
+      link.addEventListener('click', () => {
+        this.close();
+      });
+    });
   }
 
   private open() {
     this.isOpen = true;
-    this.root.classList.add("menubar-open");
+    this.root.classList.add('menubar-open');
 
     // ✅ change icon
-    this.trigger!.textContent = "close";
+    this.triggerIcon!.textContent = 'close';
   }
 
   private close() {
+    if (!this.menu) return;
+
+    // ✅ add closing animation class
+    this.root.classList.add('menubar-closing');
+
+    // ✅ change icon instantly
     this.isOpen = false;
-    this.root.classList.remove("menubar-open");
+    this.triggerIcon!.textContent = 'menu';
 
-    // ✅ change icon
-    this.trigger!.textContent = "menu";
+    // ✅ wait for animation to finish then hide
+    setTimeout(() => {
+      this.root.classList.remove('menubar-open');
+      this.root.classList.remove('menubar-closing');
+    }, 180); // must match animation time
   }
-}
+}

.vscode/launch.json

@@ -26,6 +26,7 @@
   transition: all 0.1s;
 
   .btn-icon {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -83,6 +84,7 @@
   transition: all 0.1s;
 
   .btn-icon {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;

.vscode/tasks.json

@@ -156,7 +156,7 @@
   justify-content: center;
 }
 
-.menubar-trigger {
+.menubar-trigger-btn {
   display: none !important;
 }
 
@@ -165,8 +165,23 @@
 }
 
 @media only screen and (max-width: 800px) {
-  .menubar-trigger {
-    display: block !important;
+  .menubar-trigger-btn {
+    display: flex !important;
+    border: 1px solid #e2e2e2;
+    border-radius: 8px;
+    background-color: #fafafa;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 6px 10px;
+
+    .menubar-trigger {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   .menubar-box {
@@ -190,6 +205,7 @@
       left: 0;
       padding: 20px;
       margin: unset;
+      animation: menubarDropIn 220ms ease;
 
       .menubar-link-center {
         height: fit-content;
@@ -217,4 +233,34 @@
       }
     }
   }
+
+  // ✅ CLOSE animation state
+  .menubar-closing {
+    .menubar-set-02 {
+      display: block !important;
+      animation: menubarDropOut 180ms ease forwards;
+    }
+  }
+}
+
+@keyframes menubarDropIn {
+  from {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes menubarDropOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-12px);
+  }
 }

projects/css-fusion-g/src/lib/js/menubar.ts

@@ -271,4 +271,4 @@
 .d-none {
   display: none !important;
   visibility: hidden;
-}
+}

projects/css-fusion-g/src/lib/scss/_button.scss

@@ -30,6 +30,47 @@
       overflow-y: auto;
     }
   }
+
+  @media only screen and (max-width: 800px) {
+    .app-body {
+      height: calc(var(--app-layout-height) - var(--menubar-height) - var(--navbar-mobile-height));
+      grid-template-columns: 1fr !important;
+    }
+
+    .navbar-box {
+      width: 100% !important;
+      height: var(--navbar-mobile-height) !important;
+      grid
+
+      .navbar-set01, .navbar-set03 {
+        display: none !important;
+      }
+
+      .navbar-set02 {
+        flex-direction: row !important;
+        justify-content: flex-start;
+        padding: 10px !important;
+        overflow-y: hidden;
+        overflow-x: auto !important;
+
+        .nav-menu {
+          display: none;
+        }
+
+        .navbar-link {
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+
+          .nav-txt {
+            font-size: 12px;
+            padding: 0 !important;
+          }
+        }
+      }
+    }
+  }
 }
 
 .neon-flow {

projects/css-fusion-g/src/lib/scss/_menubar.scss

@@ -81,6 +81,7 @@
   --navbar-size: 260px;
   --navbar-set01-height: 68px;
   --navbar-resized: 80px;
+  --navbar-mobile-height: 68px;
   --navbar-trigger-bg: #ffffff;
   --navbar-trigger-font: #000;
   --navbar-bg: #ffffff;

projects/css-fusion-g/src/lib/scss/_nav.scss

@@ -1,18 +1,16 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
-import { HomeComponent } from './home/home.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'Home', pathMatch: 'full' },
-  { path: 'Home', component: HomeComponent },
+  { path: '', redirectTo: 'components', pathMatch: 'full' },
   {
-    path: 'ComponentsModule',
+    path: 'components',
     loadChildren: () =>
       import('./components/components.module').then((m) => m.ComponentsModule),
   },
   {
-    path: 'TemplatesModule',
+    path: 'templates',
     loadChildren: () =>
       import('./templates/templates.module').then((m) => m.TemplatesModule),
   },