@duyanhdev/mvp-ifs-ui-kit 21.0.0

package/src/app/layout/component/menuitem/app.menuitem.html

@@ -0,0 +1,56 @@
+<!-- Root section header -->
+@if (root() && isVisible()) {
+<div class="layout-menuitem-root-text" (click)="toggleRootSection()">
+    <span class="root-label">{{ item().label }}</span>
+    <i class="pi root-chevron" [class.pi-angle-down]="!rootCollapsed()" [class.pi-angle-right]="rootCollapsed()"> </i>
+</div>
+}
+
+<!-- Non-router link item -->
+@if ((!hasRouterLink() || hasChildren()) && isVisible() && showContent()) {
+<a [attr.href]="item().url" (click)="itemClick($event)" [ngClass]="item().class" [attr.target]="item().target" tabindex="0" pRipple class="menu-link">
+    <span class="menu-icon-wrap">
+        <i [ngClass]="item().icon" class="layout-menuitem-icon text-center m-auto"></i>
+    </span>
+    <span class="layout-menuitem-text">{{ item().label }}</span>
+    @if (hasChildren()) {
+    <i class="pi pi-angle-down submenu-arrow"></i>
+    }
+</a>
+}
+
+<!-- Router link item -->
+@if (hasRouterLink() && !hasChildren() && isVisible() && showContent()) {
+<a
+    (click)="itemClick($event)"
+    [ngClass]="item().class"
+    [routerLink]="item().routerLink"
+    routerLinkActive="active-route"
+    [routerLinkActiveOptions]="item().routerLinkActiveOptions || { paths: 'exact', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored' }"
+    [fragment]="item().fragment"
+    [queryParamsHandling]="item().queryParamsHandling"
+    [preserveFragment]="item().preserveFragment"
+    [skipLocationChange]="item().skipLocationChange"
+    [replaceUrl]="item().replaceUrl"
+    [state]="item().state"
+    [queryParams]="item().queryParams"
+    [attr.target]="item().target"
+    tabindex="0"
+    pRipple
+    class="menu-link"
+>
+    <span class="menu-icon-wrap">
+        <i [ngClass]="item().icon" class="layout-menuitem-icon text-center m-auto"></i>
+    </span>
+    <span class="layout-menuitem-text">{{ item().label }}</span>
+</a>
+}
+
+<!-- Children submenu -->
+@if (hasChildren() && isVisible() && (root() || isActive()) && showContent()) {
+<ul [animate.enter]="initialized() ? 'p-submenu-enter' : null" [animate.leave]="'p-submenu-leave'" [class.layout-root-submenulist]="root()" class="submenu-list">
+    @for (child of item().items; track child?.label) {
+    <li app-menuitem [item]="child" [parentPath]="fullPath()" [root]="false" [class]="child['badgeClass']"></li>
+    }
+</ul>
+}

package/src/app/layout/component/menuitem/app.menuitem.scss

@@ -0,0 +1,218 @@
+// ─── Design Tokens ───────────────────────────────────────────────
+$menu-accent: #6366f1; // indigo-500
+$menu-accent-light: #818cf8; // indigo-400
+$menu-accent-glow: rgba(99, 102, 241, 0.18);
+$menu-active-bg: rgba(99, 102, 241, 0.12);
+$menu-hover-bg: rgba(255, 255, 255, 0.055);
+$menu-icon-size: 1.05rem;
+$menu-radius: 10px;
+$transition-smooth: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+
+// ─── Menu Link (shared for both router & non-router) ─────────────
+.menu-link {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1rem 0.6rem 0.85rem;
+    margin: 2px 0.5rem;
+    border-radius: $menu-radius;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative;
+    transition: $transition-smooth;
+    color: var(--text-color-secondary, #94a3b8);
+    outline: none;
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 20%;
+        height: 60%;
+        width: 3px;
+        border-radius: 0 3px 3px 0;
+        background: $menu-accent;
+        opacity: 0;
+        transform: scaleY(0.4);
+        transition: $transition-smooth;
+    }
+
+    &:hover {
+        background: $menu-hover-bg;
+        color: var(--text-color, #e2e8f0);
+
+        .menu-icon-wrap {
+            background: $menu-accent-glow;
+
+            .layout-menuitem-icon {
+                color: $menu-accent-light;
+                transform: scale(1.1);
+            }
+        }
+    }
+
+    &:focus-visible {
+        box-shadow: 0 0 0 2px $menu-accent;
+    }
+
+    // ── Active state ──
+    &.active-route {
+        background: $menu-active-bg;
+        color: var(--text-color, #e2e8f0);
+
+        &::before {
+            opacity: 1;
+            transform: scaleY(1);
+        }
+
+        .menu-icon-wrap {
+            background: $menu-accent-glow;
+
+            .layout-menuitem-icon {
+                color: $menu-accent;
+            }
+        }
+
+        .layout-menuitem-text {
+            color: $menu-accent-light;
+            font-weight: 600;
+        }
+    }
+}
+
+
+.menu-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.04);
+    transition: $transition-smooth;
+
+    .layout-menuitem-icon {
+        font-size: $menu-icon-size;
+        color: var(--text-color-secondary, #64748b);
+        transition: $transition-smooth;
+        margin: auto;
+    }
+}
+
+// ─── Menu Label ───────────────────────────────────────────────────
+.layout-menuitem-text {
+    font-size: 0.855rem;
+    font-weight: 500;
+    letter-spacing: 0.01em;
+    transition: color 0.2s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+// ─── Submenu Arrow ────────────────────────────────────────────────
+.submenu-arrow {
+    margin-left: auto;
+    font-size: 0.7rem;
+    opacity: 0.5;
+    transition: transform 0.25s ease, opacity 0.2s;
+
+    .menu-link:hover & {
+        opacity: 0.8;
+    }
+}
+
+// ─── Submenu List ─────────────────────────────────────────────────
+.submenu-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 0 1.25rem;
+    position: relative;
+
+    // Vertical guide line
+    &::before {
+        content: '';
+        position: absolute;
+        left: 1.85rem;
+        top: 0.25rem;
+        bottom: 0.25rem;
+        width: 1px;
+        background: linear-gradient(to bottom,
+                transparent,
+                rgba(99, 102, 241, 0.25) 20%,
+                rgba(99, 102, 241, 0.25) 80%,
+                transparent);
+    }
+
+    li {
+        position: relative;
+
+        // Dot connector
+        &::before {
+            content: '';
+            position: absolute;
+            left: -0.55rem;
+            top: 50%;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background: rgba(99, 102, 241, 0.35);
+            transform: translateY(-50%);
+            transition: background 0.2s;
+        }
+
+        &:has(.active-route)::before {
+            background: $menu-accent;
+            box-shadow: 0 0 6px $menu-accent-glow;
+        }
+    }
+
+    &.layout-root-submenulist {
+        padding-left: 0;
+
+        &::before {
+            display: none;
+        }
+
+        li::before {
+            display: none;
+        }
+    }
+}
+
+// ─── Submenu Animations ───────────────────────────────────────────
+.p-submenu-enter {
+    animation: submenuSlideIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.p-submenu-leave {
+    animation: submenuSlideOut 0.18s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes submenuSlideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-6px) scaleY(0.96);
+        transform-origin: top;
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+    }
+}
+
+@keyframes submenuSlideOut {
+    from {
+        opacity: 1;
+        transform: translateY(0) scaleY(1);
+        transform-origin: top;
+    }
+
+    to {
+        opacity: 0;
+        transform: translateY(-4px) scaleY(0.97);
+    }
+}

package/src/app/layout/component/menuitem/app.menuitem.ts

@@ -0,0 +1,126 @@
+import { Component, computed, inject, input, signal } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { RippleModule } from 'primeng/ripple';
+import { LayoutService } from '@/app/layout/service/layout.service';
+import { filter } from 'rxjs/operators';
+
+@Component({
+    selector: '[app-menuitem]',
+    imports: [CommonModule, RouterModule, RippleModule],
+
+    templateUrl: 'app.menuitem.html',
+    styleUrl: 'app.menuitem.scss',
+    host: {
+        '[class.active-menuitem]': 'isActive()',
+        '[class.layout-root-menuitem]': 'root()'
+    }
+})
+export class AppMenuitem {
+    layoutService = inject(LayoutService);
+    router = inject(Router);
+
+    item = input<any>(null);
+    root = input<boolean>(false);
+    parentPath = input<string | null>(null);
+
+    // ── Collapse state cho root section ──────────────────
+    rootCollapsed = signal<boolean>(false);
+
+    // Chỉ ẩn content khi là root VÀ đang collapsed
+    showContent = computed(() => {
+        if (this.root()) return !this.rootCollapsed();
+        return true;
+    });
+
+    toggleRootSection() {
+        this.rootCollapsed.update((v) => !v);
+    }
+
+    // ── Computed ──────────────────────────────────────────
+    isVisible = computed(() => this.item()?.visible !== false);
+    hasChildren = computed(() => this.item()?.items && this.item()?.items.length > 0);
+    hasRouterLink = computed(() => !!this.item()?.routerLink);
+
+    fullPath = computed(() => {
+        const itemPath = this.item()?.path;
+        if (!itemPath) return this.parentPath();
+        const parent = this.parentPath();
+        if (parent && !itemPath.startsWith(parent)) return parent + itemPath;
+        return itemPath;
+    });
+
+    isActive = computed(() => {
+        const activePath = this.layoutService.layoutState().activePath;
+        if (this.item()?.path) {
+            return activePath?.startsWith(this.fullPath() ?? '') ?? false;
+        }
+        return false;
+    });
+
+    initialized = signal<boolean>(false);
+
+    constructor() {
+        this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
+            if (this.item()?.routerLink) this.updateActiveStateFromRoute();
+        });
+    }
+
+    ngOnInit() {
+        if (this.item()?.routerLink) this.updateActiveStateFromRoute();
+    }
+
+    ngAfterViewInit() {
+        setTimeout(() => this.initialized.set(true));
+    }
+
+    updateActiveStateFromRoute() {
+        const item = this.item();
+        if (!item?.routerLink) return;
+
+        const isRouteActive = this.router.isActive(item.routerLink[0], {
+            paths: 'exact',
+            queryParams: 'ignored',
+            matrixParams: 'ignored',
+            fragment: 'ignored'
+        });
+
+        if (isRouteActive) {
+            const parentPath = this.parentPath();
+            if (parentPath) {
+                this.layoutService.layoutState.update((val) => ({ ...val, activePath: parentPath }));
+            }
+        }
+    }
+
+    itemClick(event: Event) {
+        const item = this.item();
+        if (item?.disabled) {
+            event.preventDefault();
+            return;
+        }
+        if (item?.command) {
+            item.command({ originalEvent: event, item });
+        }
+
+        if (this.hasChildren()) {
+            if (this.isActive()) {
+                this.layoutService.layoutState.update((val) => ({ ...val, activePath: this.parentPath() }));
+            } else {
+                this.layoutService.layoutState.update((val) => ({
+                    ...val,
+                    activePath: this.fullPath(),
+                    menuHoverActive: true
+                }));
+            }
+        } else {
+            this.layoutService.layoutState.update((val) => ({
+                ...val,
+                overlayMenuActive: false,
+                staticMenuMobileActive: false,
+                mobileMenuActive: false,
+                menuHoverActive: false
+            }));
+        }
+    }
+}

package/src/app/layout/component/sidebar/app.sidebar.html

@@ -0,0 +1,3 @@
+<div class="layout-sidebar">
+    <app-menu></app-menu>
+</div>

package/src/app/layout/component/sidebar/app.sidebar.ts

@@ -0,0 +1,106 @@
+import { Component, computed, effect, ElementRef, inject, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { filter, Subject, takeUntil } from 'rxjs';
+import { AppMenu } from './../menu/app.menu';
+import { LayoutService } from '@/app/layout/service/layout.service';
+
+@Component({
+    selector: 'app-sidebar',
+    standalone: true,
+    imports: [AppMenu, RouterModule],
+    templateUrl: 'app.sidebar.html'
+})
+export class AppSidebar implements OnInit, OnDestroy {
+    layoutService = inject(LayoutService);
+
+    router = inject(Router);
+
+    el = inject(ElementRef);
+
+    private outsideClickListener: ((event: MouseEvent) => void) | null = null;
+
+    private destroy$ = new Subject<void>();
+
+    constructor() {
+        effect(() => {
+            const state = this.layoutService.layoutState();
+
+            if (this.layoutService.isDesktop()) {
+                if (state.overlayMenuActive) {
+                    this.bindOutsideClickListener();
+                } else {
+                    this.unbindOutsideClickListener();
+                }
+            } else {
+                if (state.mobileMenuActive) {
+                    this.bindOutsideClickListener();
+                } else {
+                    this.unbindOutsideClickListener();
+                }
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.router.events
+            .pipe(
+                filter((event) => event instanceof NavigationEnd),
+                takeUntil(this.destroy$)
+            )
+            .subscribe((event) => {
+                const navEvent = event as NavigationEnd;
+                this.onRouteChange(navEvent.urlAfterRedirects);
+            });
+
+        this.onRouteChange(this.router.url);
+    }
+
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.unbindOutsideClickListener();
+    }
+
+    private onRouteChange(path: string) {
+        this.layoutService.layoutState.update((val) => ({
+            ...val,
+            activePath: path,
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            mobileMenuActive: false,
+            menuHoverActive: false
+        }));
+    }
+
+    private bindOutsideClickListener() {
+        if (!this.outsideClickListener) {
+            this.outsideClickListener = (event: MouseEvent) => {
+                if (this.isOutsideClicked(event)) {
+                    this.layoutService.layoutState.update((val) => ({
+                        ...val,
+                        overlayMenuActive: false,
+                        staticMenuMobileActive: false,
+                        mobileMenuActive: false,
+                        menuHoverActive: false
+                    }));
+                }
+            };
+
+            document.addEventListener('click', this.outsideClickListener);
+        }
+    }
+
+    private unbindOutsideClickListener() {
+        if (this.outsideClickListener) {
+            document.removeEventListener('click', this.outsideClickListener);
+            this.outsideClickListener = null;
+        }
+    }
+
+    private isOutsideClicked(event: MouseEvent): boolean {
+        const topbarButtonEl = document.querySelector('.topbar-start > button');
+        const sidebarEl = this.el.nativeElement;
+
+        return !(sidebarEl?.isSameNode(event.target as Node) || sidebarEl?.contains(event.target as Node) || topbarButtonEl?.isSameNode(event.target as Node) || topbarButtonEl?.contains(event.target as Node));
+    }
+}