make the background dark buttins movable with a drop down menu

components/sidebar.js

@@ -1,9 +1,7 @@
-
 class CustomSidebar extends HTMLElement {
   constructor() {
     super();
-    this.darkMode = true;
-    this.collapsed = false;
+    this.darkMode = false;
   }
 
   connectedCallback() {
@@ -16,168 +14,101 @@ class CustomSidebar extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         .sidebar {
-          width: 250px;
+          width: 220px;
           min-height: 100vh;
-          background-color: #1a1a1a;
-          color: #fff;
+          background-color: var(--sidebar-bg, #f0f0f0);
+          color: var(--sidebar-color, #222);
           display: flex;
           flex-direction: column;
           padding: 1.5rem;
+          box-shadow: var(--sidebar-shadow, 2px 0 8px rgba(0,0,0,0.1));
+          transition: all 0.3s ease;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 1000;
-          transition: all 0.3s ease;
-          border-right: 1px solid #333;
-        }
-
-        .sidebar.collapsed {
-          width: 70px;
-          overflow: hidden;
-        }
-
-        .sidebar.collapsed .nav-text,
-        .sidebar.collapsed h2 {
-          display: none;
-        }
-
-        .toggle-sidebar {
-          position: absolute;
-          right: 10px;
-          top: 10px;
-          background: none;
-          border: none;
-          color: #fff;
-          cursor: pointer;
-          font-size: 1.2rem;
         }
 
-        .sidebar-header {
-          display: flex;
-          align-items: center;
-          margin-bottom: 2rem;
-          padding-bottom: 1rem;
-          border-bottom: 1px solid #333;
+        .sidebar.dark {
+          --sidebar-bg: #1a1a1a;
+          --sidebar-color: #fff;
+          --sidebar-shadow: 2px 0 8px rgba(0,0,0,0.6);
         }
 
-        .menu-icon {
-          margin-right: 10px;
-          min-width: 24px;
+        .sidebar h2 {
+          margin-bottom: 1.5rem;
+          font-size: 1.5rem;
+          font-weight: 600;
         }
 
         .nav-item {
-          display: flex;
-          align-items: center;
-          padding: 0.75rem;
+          padding: 0.5rem 0;
           margin-bottom: 0.5rem;
           cursor: pointer;
-          border-radius: 6px;
-          transition: all 0.2s ease;
+          border-radius: 4px;
+          transition: background 0.2s ease;
+          padding-left: 0.5rem;
         }
 
         .nav-item:hover {
-          background-color: #333;
-        }
-
-        .nav-item.active {
-          background-color: #ff4777;
-        }
-
-        .submenu {
-          margin-left: 1.5rem;
-          max-height: 0;
-          overflow: hidden;
-          transition: max-height 0.3s ease;
-        }
-
-        .submenu.open {
-          max-height: 500px;
-        }
-
-        .submenu-item {
-          padding: 0.5rem 0;
-          color: #aaa;
-          transition: color 0.2s;
-        }
-
-        .submenu-item:hover {
-          color: #fff;
+          background-color: var(--nav-hover, rgba(0,0,0,0.1));
         }
 
-        .theme-toggle {
-          margin-top: auto;
-          margin-bottom: 1rem;
+        .dark .nav-item:hover {
+          --nav-hover: rgba(255,255,255,0.1);
         }
 
         .toggle-btn {
-          width: 100%;
-          background: #333;
+          background-color: var(--btn-bg, #0078d4);
           color: #fff;
           border: none;
-          padding: 0.75rem;
+          padding: 0.5rem 1rem;
           border-radius: 6px;
           cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          transition: background 0.2s;
+          margin-top: auto;
+          transition: background 0.2s ease;
+          font-size: 0.9rem;
         }
 
         .toggle-btn:hover {
-          background: #444;
+          background-color: var(--btn-hover, #005a9e);
         }
 
-        .toggle-btn i {
-          margin-right: 0.5rem;
+        .dark .toggle-btn {
+          --btn-bg: #1e88e5;
+          --btn-hover: #1565c0;
         }
       </style>
-      <div class="sidebar ${this.collapsed ? 'collapsed' : ''} dark">
-        <button class="toggle-sidebar">${this.collapsed ? '☰' : '×'}</button>
-        
-        <div class="sidebar-header">
-          <span class="menu-icon">☰</span>
-          <h2>MLTX Menu</h2>
-        </div>
-        
-        <div class="nav-item active">
-          <span class="menu-icon">🏠</span>
-          <span class="nav-text"><a href="/" style="text-decoration: none; color: inherit;">Dashboard</a></span>
-        </div>
-        
-        <div class="nav-item">
-          <span class="menu-icon">📦</span>
-          <span class="nav-text"><a href="/orders.html" style="text-decoration: none; color: inherit;">Orders</a></span>
-        </div>
-        
-        <div class="nav-item with-submenu">
-          <span class="menu-icon">⚙️</span>
-          <span class="nav-text">Settings</span>
-          <span class="submenu-icon">▼</span>
-        </div>
-        <div class="submenu">
-          <div class="submenu-item"><a href="/settings.html" style="text-decoration: none; color: inherit;">General</a></div>
-          <div class="submenu-item"><a href="/profile.html" style="text-decoration: none; color: inherit;">Profile</a></div>
-          <div class="submenu-item"><a href="/security.html" style="text-decoration: none; color: inherit;">Security</a></div>
-        </div>
+      <div class="sidebar">
+        <h2>MLTX Menu</h2>
         
-        <div class="theme-toggle">
-          <button class="toggle-btn">
-            <i>🌓</i>
-            <span class="nav-text">Toggle Theme</span>
-          </button>
-        </div>
+        <div class="nav-item"><a href="/" style="text-decoration: none; color: inherit;">Dashboard</a></div>
+        <div class="nav-item"><a href="/orders.html" style="text-decoration: none; color: inherit;">Orders</a></div>
+        <div class="nav-item"><a href="/settings.html" style="text-decoration: none; color: inherit;">Settings</a></div>
+        <div class="nav-item"><a href="/profile.html" style="text-decoration: none; color: inherit;">Profile</a></div>
+
+        <button class="toggle-btn">Toggle Light Mode</button>
       </div>
-`;
+    `;
   }
-
   setupEventListeners() {
     const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
+    const menuToggle = this.shadowRoot.querySelector('.menu-toggle');
     const sidebar = this.shadowRoot.querySelector('.sidebar');
+    const dropdown = this.shadowRoot.querySelector('.dropdown');
+
+    // Toggle sidebar collapse
+    menuToggle.addEventListener('click', () => {
+      this.collapsed = !this.collapsed;
+      sidebar.classList.toggle('collapsed', this.collapsed);
+      this.saveState();
+    });
 
+    // Toggle dark mode
     toggleBtn.addEventListener('click', () => {
       this.darkMode = !this.darkMode;
-      sidebar.classList.toggle('dark', this.darkMode);
-      toggleBtn.textContent = `Toggle ${this.darkMode ? 'Light' : 'Dark'} Mode`;
+      document.documentElement.classList.toggle('dark', this.darkMode);
+      this.saveState();
       
       // Dispatch custom event for other components
       this.dispatchEvent(new CustomEvent('darkModeToggle', {
@@ -185,7 +116,42 @@ class CustomSidebar extends HTMLElement {
         bubbles: true
       }));
     });
+
+    // Toggle dropdown
+    dropdown.addEventListener('click', () => {
+      dropdown.classList.toggle('active');
+    });
+
+    // Initialize from localStorage
+    this.loadState();
+    feather.replace();
+  }
+
+  saveState() {
+    localStorage.setItem('sidebarCollapsed', this.collapsed);
+    localStorage.setItem('darkMode', this.darkMode);
+  }
+
+  loadState() {
+    const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
+    const darkMode = localStorage.getItem('darkMode') === 'true';
+    
+    if (collapsed) {
+      this.collapsed = true;
+      this.shadowRoot.querySelector('.sidebar').classList.add('collapsed');
+    }
+    
+    if (darkMode) {
+      this.darkMode = true;
+      document.documentElement.classList.add('dark');
+    }
   }
 }
+customElements.define('custom-sidebar', CustomSidebar);
 
-customElements.define('custom-sidebar', CustomSidebar);
+// Initialize dark mode if set
+document.addEventListener('DOMContentLoaded', () => {
+  if (localStorage.getItem('darkMode') === 'true') {
+    document.documentElement.classList.add('dark');
+  }
+});

style.css

@@ -3,28 +3,12 @@
 * {
     font-family: 'Inter', sans-serif;
 }
+
 /* Smooth scroll behavior */
 html {
     scroll-behavior: smooth;
 }
 
-/* Dark mode by default */
-html.dark {
-  background-color: #111;
-  color: #fff;
-}
-
-/* Main content margin for sidebar */
-.main-content {
-  margin-left: 250px;
-  transition: margin-left 0.3s ease;
-  padding: 2rem;
-}
-
-/* Collapsed sidebar state */
-.sidebar.collapsed ~ .main-content {
-  margin-left: 70px;
-}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;