Sidebar Example

by velo_ninja

HTML

<script src="https://kit.fontawesome.com/your-fontawesome-kit.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sidebar Example</title>
  <!-- Font Awesome Free CDN -->
  

</head>
<body>
  <div id="sysMainStage"></div>
  <script>
    // Constants
    const SIDEBAR_CONSTANTS = {
      CLASS_NAMES: {
        SIDEBAR: 'sidebar enhanced-sidebar',
        HEADER: 'sidebar-header enhanced-header',
        SEARCH: 'search-section enhanced-search',
        BREADCRUMBS: 'breadcrumb-section',
        MENU: 'nav-menu enhanced-nav',
        RECENT: 'recent-section',
        FOOTER: 'footer-section',
        TOOLTIP: 'tooltip-container enhanced-tooltips',
        IFRAME: 'ifrStage enhanced-stage',
      },
      DEFAULTS: {
        MENU_COLLAPSE_DELAY: 800,
        ANIMATION_DURATION: 300,
        TOOLTIP_DELAY: 500,
        BREAKPOINT_MOBILE: 768,
        MAX_RECENT_ITEMS: 5,
      },
      STORAGE_KEYS: {
        STATE: 'sidebar_state',
        RECENT: 'sidebar_recent',
        THEME: 'sidebar_theme',
      },
      ICONS: {
        THEME: 'fa-solid fa-adjust',
        COLLAPSE: 'fa-solid fa-chevron-left',
        SEARCH: 'fa-solid fa-search',
        CLEAR: 'fa-solid fa-times',
        LOGIN: 'fa-solid fa-sign-out-alt',
      },
    };

    // Utils
    function createElement({ tag, id, clsName, destination, attributes = {}, innerText = '', innerHTML = '', events = {} }) {
      if (!tag || typeof tag !== 'string') throw new Error('Invalid tag name');
      const el = document.createElement(tag);
      if (id) el.id = id;
      if (clsName) el.className = clsName;
      Object.entries(attributes).forEach(([key, val]) => {
        if (val !== undefined) el.setAttribute(key, val);
      });
      if (innerText) el.innerText = innerText;
      if (innerHTML) el.innerHTML = innerHTML;
     ...

CSS

body {
      margin: 0;
      font-family: Arial, sans-serif;
      transition: all 0.3s ease;
    }
    body.light {
      background: #f4f4f4;
      color: #333;
    }
    .sidebar {
      width: 250px;
      height: 100vh;
      background: #2c3e50;
      color: #fff;
      position: fixed;
      transition: width 0.3s ease;
    }
    .sidebar.collapsed {
      width: 60px;
    }
    .sidebar-header {
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .brand-area {
      font-size: 1.2em;
      font-weight: bold;
    }
    .controls-area button {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 5px;
    }
    .search-section {
      padding: 10px;
      position: relative;
    }
    .search-input {
      width: 100%;
      padding: 5px;
      border: none;
      border-radius: 4px;
    }
    .search-icon, .clear-search {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #fff;
    }
    .clear-search {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
    }
    .search-section.has-query .clear-search {
      display: block;
    }
    .nav-menu {
      padding: 10px;
    }
    .menu-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .menu-item {
      margin: 5px 0;
    }
    .menu-link {
      display: flex;
      align-items: center;
      color: #fff;
      text-decoration: none;
      padding: 5px;
    }
    .menu-link.active {
      background: #34495e;
      border-radius: 4px;
    }
    .link-content i {
      margin-right: 10px;
    }
    .has-submenu .submenu {
      display: none;
      padding-left: 20px;
    }
    .has-submenu.expanded .submenu {
      display: block;
    }
    .recent-section, .breadcrumb-section,...

JavaScript

// Constants
    const SIDEBAR_CONSTANTS = {
      CLASS_NAMES: {
        SIDEBAR: 'sidebar enhanced-sidebar',
        HEADER: 'sidebar-header enhanced-header',
        SEARCH: 'search-section enhanced-search',
        BREADCRUMBS: 'breadcrumb-section',
        MENU: 'nav-menu enhanced-nav',
        RECENT: 'recent-section',
        FOOTER: 'footer-section',
        TOOLTIP: 'tooltip-container enhanced-tooltips',
        IFRAME: 'ifrStage enhanced-stage',
      },
      DEFAULTS: {
        MENU_COLLAPSE_DELAY: 800,
        ANIMATION_DURATION: 300,
        TOOLTIP_DELAY: 500,
        BREAKPOINT_MOBILE: 768,
        MAX_RECENT_ITEMS: 5,
      },
      STORAGE_KEYS: {
        STATE: 'sidebar_state',
        RECENT: 'sidebar_recent',
        THEME: 'sidebar_theme',
      },
      ICONS: {
        THEME: 'fa-solid fa-adjust',
        COLLAPSE: 'fa-solid fa-chevron-left',
        SEARCH: 'fa-solid fa-search',
        CLEAR: 'fa-solid fa-times',
        LOGIN: 'fa-solid fa-sign-out-alt',
      },
    };

    // Utils
    function createElement({ tag, id, clsName, destination, attributes = {}, innerText = '', innerHTML = '', events = {} }) {
      if (!tag || typeof tag !== 'string') throw new Error('Invalid tag name');
      const el = document.createElement(tag);
      if (id) el.id = id;
      if (clsName) el.className = clsName;
      Object.entries(attributes).forEach(([key, val]) => {
        if (val !== undefined) el.setAttribute(key, val);
      });
      if (innerText) el.innerText = innerText;
      if (innerHTML) el.innerHTML = innerHTML;
      Object.entries(events).forEach(([event, handler]) => {
        el.addEventListener(event, handler);
      });
      let targetDestination = destination;
      if (typeof destination === 'string') {
        targetDestination = document.getElementById(destination);
      }
      if (targetDestination instanceof HTMLElement) {
        targetDestination.appendChild(el);
...