ui-essentials/projects/demo-ui-essentials/src/app/features/dashboard/dashboard.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardSidebarComponent, SidebarMenuItem } from "./dashboard.sidebar.component";
import { LayoutContainerComponent } from "../../shared/layout-containers/layout-container.component";
import {
  faWindowMaximize, faUserCircle, faCertificate, faHandPointer, faIdCard, faTags,
  faCheckSquare, faKeyboard, faThLarge, faList, faDotCircle, faSearch, faToggleOn,
  faTable, faImage, faImages, faPlay, faBars, faEdit, faEye, faCompass,
  faVideo, faComment, faMousePointer, faLayerGroup, faSquare, faCalendarDays, faClock,
  faGripVertical, faArrowsAlt, faBoxOpen, faChevronLeft, faSpinner, faExclamationTriangle,
  faCloudUploadAlt, faFileText, faListAlt, faCircle, faExpandArrowsAlt, faCircleNotch, faSliders,
  faMinus, faInfoCircle
} from '@fortawesome/free-solid-svg-icons';
import { DemoRoutes } from '../../demos';
import { ScrollContainerComponent } from '../../../../../ui-essentials/src/lib/layouts/scroll-container.component';
// import { DemoRoutes } from "../../../../../ui-essentials/src/public-api";

@Component({
  selector: 'skyui-dashboard',
  standalone: true,
  imports: [
    CommonModule,
    DashboardSidebarComponent,
    LayoutContainerComponent,
    ScrollContainerComponent,
    DemoRoutes
],
  template: `


<ui-layout-container [topBarHeight]=64 [leftNavigationState]="'full'" 
  [showTopBar]=false [customLeftWidth]=260>
  <div slot=left-navigation style="height: 100vh;">
    <ui-scroll-container scrollbarVisibility="never">
      <skyui-dashboard-sidebar [data]=menuItems (selected)="menuClick($event)"></skyui-dashboard-sidebar>
    </ui-scroll-container>
  </div>

  <div slot=content style="height: 100vh;">
    <ui-scroll-container>
      <ui-demo-routes [route]=route></ui-demo-routes>
    </ui-scroll-container>
  </div>
</ui-layout-container>

  `,
})
export class DashboardComponent {
  // Sidebar state
  sidebarCollapsed = false;
  route: string = "image-container"
  faBars = faBars; 

  // FontAwesome icons
  faWindowMaximize = faWindowMaximize;
  faUserCircle = faUserCircle;
  faCertificate = faCertificate;
  faHandPointer = faHandPointer;
  faIdCard = faIdCard;
  faTags = faTags;
  faCheckSquare = faCheckSquare;
  faKeyboard = faKeyboard;
  faThLarge = faThLarge;
  faList = faList;
  faDotCircle = faDotCircle;
  faSearch = faSearch;
  faToggleOn = faToggleOn;
  faTable = faTable;
  faImage = faImage;
  faImages = faImages;
  faPlay = faPlay;
  faEdit = faEdit;
  faEye = faEye;
  faCompass = faCompass;
  faVideo = faVideo;
  faComment = faComment;
  faMousePointer = faMousePointer;
  faLayerGroup = faLayerGroup;
  faSquare = faSquare;
  faCalendarDays = faCalendarDays;
  faClock = faClock;
  faGripVertical = faGripVertical;
  faArrowsAlt = faArrowsAlt;
  faBoxOpen = faBoxOpen;
  faChevronLeft = faChevronLeft;
  faSpinner = faSpinner;
  faExclamationTriangle = faExclamationTriangle;
  faCloudUploadAlt = faCloudUploadAlt;
  faFileText = faFileText;
  faListAlt = faListAlt;
  faCircle = faCircle;
  faExpandArrowsAlt = faExpandArrowsAlt;
  faCircleNotch = faCircleNotch;
  faSliders = faSliders;
  faMinus = faMinus;
  faInfoCircle = faInfoCircle;

  menuItems: any = []

  // Toggle sidebar method
  toggleSidebar() {
    this.sidebarCollapsed = !this.sidebarCollapsed;
  }
  
  addMenuItem(id: string, label: string, icon?: any, children?: SidebarMenuItem[]): void {
    const menuItem: SidebarMenuItem = {
      id,
      label,
      icon,
      active: false,
      children,
      isParent: !!children,
      expanded: false
    };
    this.menuItems.push(menuItem);
  }

  createChildItem(id: string, label: string, icon?: any): SidebarMenuItem {
    return {
      id,
      label,
      icon,
      active: false,
      isParent: false
    };
  }


  ngOnInit() {
    // Forms category
    const formsChildren = [
      this.createChildItem("input", "Input Fields", this.faKeyboard),
      this.createChildItem("checkbox", "Checkboxes", this.faCheckSquare),
      this.createChildItem("radio", "Radio Buttons", this.faDotCircle),
      this.createChildItem("search", "Search Bars", this.faSearch),
      this.createChildItem("switch", "Switches", this.faToggleOn),
      this.createChildItem("autocomplete", "Autocomplete", this.faListAlt),
      this.createChildItem("date-picker", "Date Picker", this.faCalendarDays),
      this.createChildItem("time-picker", "Time Picker", this.faClock),
      this.createChildItem("file-upload", "File Upload", this.faCloudUploadAlt),
      this.createChildItem("form-field", "Form Field", this.faFileText),
      this.createChildItem("range-slider", "Range Slider", this.faSliders)
    ];
    this.addMenuItem("forms", "Forms", this.faEdit, formsChildren);

    // Data Display category
    const dataDisplayChildren = [
      this.createChildItem("table", "Tables", this.faTable),
      this.createChildItem("lists", "Lists", this.faList),
      this.createChildItem("progress", "Progress Bars", this.faCheckSquare),
      this.createChildItem("badge", "Badges", this.faCertificate),
      this.createChildItem("avatar", "Avatars", this.faUserCircle),
      this.createChildItem("cards", "Cards", this.faIdCard),
      this.createChildItem("divider", "Divider", this.faMinus),
      this.createChildItem("tooltip", "Tooltip", this.faInfoCircle)
    ];
    this.addMenuItem("data-display", "Data Display", this.faEye, dataDisplayChildren);

    // Navigation category
    const navigationChildren = [
      this.createChildItem("appbar", "App Bars", this.faWindowMaximize),
      this.createChildItem("menu", "Menus", this.faBars),
      this.createChildItem("pagination", "Pagination", this.faChevronLeft)
    ];
    this.addMenuItem("navigation", "Navigation", this.faCompass, navigationChildren);

    // Media category
    const mediaChildren = [
      this.createChildItem("image-container", "Image Container", this.faImage),
      this.createChildItem("carousel", "Carousel", this.faImages),
      this.createChildItem("video-player", "Video Player", this.faPlay)
    ];
    this.addMenuItem("media", "Media", this.faVideo, mediaChildren);

    // Actions category
    const actionsChildren = [
      this.createChildItem("buttons", "Buttons", this.faMousePointer)
    ];
    this.addMenuItem("actions", "Actions", this.faMousePointer, actionsChildren);

    // Feedback category
    const feedbackChildren = [
      this.createChildItem("chips", "Chips", this.faTags),
      this.createChildItem("loading-spinner", "Loading Spinner", this.faSpinner),
      this.createChildItem("skeleton-loader", "Skeleton Loader", this.faSpinner),
      this.createChildItem("empty-state", "Empty State", this.faExclamationTriangle),
      this.createChildItem("progress-circle", "Progress Circle", this.faCircleNotch)
    ];
    this.addMenuItem("feedback", "Feedback", this.faComment, feedbackChildren);

    // Layout category
    const layoutChildren = [
      this.createChildItem("layout", "Layout Demos", this.faThLarge),
      this.createChildItem("grid-system", "Grid System", this.faGripVertical),
      this.createChildItem("spacer", "Spacer", this.faArrowsAlt),
      this.createChildItem("container", "Container", this.faBoxOpen)
    ];
    this.addMenuItem("layouts", "Layouts", this.faLayerGroup, layoutChildren);

    // Overlays category
    const overlaysChildren = [
      this.createChildItem("modal", "Modal/Dialog", this.faSquare),
      this.createChildItem("drawer", "Drawer/Sidebar", this.faBars),
      this.createChildItem("backdrop", "Backdrop", this.faCircle),
      this.createChildItem("overlay-container", "Overlay Container", this.faExpandArrowsAlt)
    ];
    this.addMenuItem("overlays", "Overlays", this.faLayerGroup, overlaysChildren);

    // Utilities (standalone)
    this.addMenuItem("fontawesome", "FontAwesome Icons", this.faCheckSquare);
  }

  menuClick(id: string) {
    console.log(JSON.stringify(id))
    
    this.route = id.toString()
  }

}