// src/Sidebar.js

import React from 'react';

export default function Sidebar({ darkMode, setDarkMode }) {
const sidebarStyle = {
width: '220px',
minHeight: '100vh',
backgroundColor: darkMode ? '#1a1a1a' : '#f0f0f0',
color: darkMode ? '#fff' : '#222',
display: 'flex',
flexDirection: 'column',
padding: '1.5rem',
boxShadow: darkMode
? '2px 0 8px rgba(0,0,0,0.6)'
: '2px 0 8px rgba(0,0,0,0.1)',
transition: 'all 0.3s ease',
position: 'fixed',
top: 0,
left: 0,
zIndex: 1000,
};

const buttonStyle = {
backgroundColor: darkMode ? '#1e88e5' : '#0078d4',
color: '#fff',
border: 'none',
padding: '0.5rem 1rem',
borderRadius: '6px',
cursor: 'pointer',
marginTop: 'auto',
transition: 'background 0.2s ease',
};

const linkStyle = {
padding: '0.5rem 0',
marginBottom: '0.5rem',
cursor: 'pointer',
borderRadius: '4px',
transition: 'background 0.2s ease',
};

return (
<div style={sidebarStyle}>
<h2 style={{ marginBottom: '1.5rem' }}>MLTX Menu</h2>

<div style={linkStyle}>Dashboard</div>
<div style={linkStyle}>Orders</div>
<div style={linkStyle}>Settings</div>
<div style={linkStyle}>Profile</div>

<button style={buttonStyle} onClick={() => setDarkMode(!darkMode)}>
Toggle {darkMode ? 'Light' : 'Dark'} Mode
</button>
</div>
);
}import Sidebar from './Sidebar';

export default function App() {
const [darkMode, setDarkMode] = useState(false);
// ... rest of your state

return (
<div style={{ display: 'flex' }}>
<Sidebar darkMode={darkMode} setDarkMode={setDarkMode} />
<div style={{ marginLeft: '220px', flex: 1, padding: '2rem' }}>
{/* Rest of your App content here */}
</div>
</div>
);
}
import Sidebar from './Sidebar';

export default function App() {
const [darkMode, setDarkMode] = useState(false);
// ... rest of your state

return (
<div style={{ display: 'flex' }}>
<Sidebar darkMode={darkMode} setDarkMode={setDarkMode} />
<div style={{ marginLeft: '220px', flex: 1, padding: '2rem' }}>
{/* Rest of your App content here */}
</div>
</div>
);
}

components/sidebar.js

@@ -5,17 +5,27 @@ class CustomSidebar extends HTMLElement {
   }
 
   connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    
+    // Add event listener for theme toggle
+    this.shadowRoot.querySelector('#themeToggle').addEventListener('click', () => {
+      this.toggleTheme();
+    });
+  }
+
+  toggleTheme() {
+    this.darkMode = !this.darkMode;
+    document.documentElement.setAttribute('data-theme', this.darkMode ? 'dark' : 'light');
     this.render();
-    this.setupEventListeners();
   }
 
   render() {
     const backgroundColor = this.darkMode ? '#1a1a1a' : '#f0f0f0';
     const textColor = this.darkMode ? '#fff' : '#222';
-    const shadowColor = this.darkMode ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.1)';
     const buttonColor = this.darkMode ? '#1e88e5' : '#0078d4';
+    const shadowColor = this.darkMode ? 'rgba(0,0,0,0.6)' : 'rgba(0,0,0,0.1)';
 
-    this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = `
       <style>
         .sidebar {
@@ -33,12 +43,14 @@ class CustomSidebar extends HTMLElement {
           left: 0;
           z-index: 1000;
         }
-        h2 {
+        
+        .sidebar h2 {
           margin-bottom: 1.5rem;
           font-size: 1.5rem;
-          font-weight: 600;
+          font-weight: bold;
         }
-        .menu-item {
+        
+        .sidebar-link {
           padding: 0.5rem 0;
           margin-bottom: 0.5rem;
           cursor: pointer;
@@ -46,10 +58,12 @@ class CustomSidebar extends HTMLElement {
           transition: background 0.2s ease;
           padding-left: 0.5rem;
         }
-        .menu-item:hover {
+        
+        .sidebar-link:hover {
           background-color: ${this.darkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)'};
         }
-        .toggle-button {
+        
+        .theme-toggle {
           background-color: ${buttonColor};
           color: #fff;
           border: none;
@@ -58,50 +72,48 @@ class CustomSidebar extends HTMLElement {
           cursor: pointer;
           margin-top: auto;
           transition: background 0.2s ease;
+          font-size: 0.9rem;
         }
-        .toggle-button:hover {
+        
+        .theme-toggle:hover {
           opacity: 0.9;
         }
+        
+        @media (max-width: 768px) {
+          .sidebar {
+            width: 100%;
+            position: relative;
+            min-height: auto;
+          }
+          
+          .main-content {
+            margin-left: 0 !important;
+          }
+        }
       </style>
+      
       <div class="sidebar">
         <h2>MLTX Menu</h2>
         
-        <div class="menu-item" data-page="dashboard">Dashboard</div>
-        <div class="menu-item" data-page="orders">Orders</div>
-        <div class="menu-item" data-page="settings">Settings</div>
-        <div class="menu-item" data-page="profile">Profile</div>
+        <div class="sidebar-link">
+          <a href="/" style="color: inherit; text-decoration: none; display: block;">Dashboard</a>
+        </div>
+        <div class="sidebar-link">
+          <a href="/orders.html" style="color: inherit; text-decoration: none; display: block;">Orders</a>
+        </div>
+        <div class="sidebar-link">
+          <a href="/settings.html" style="color: inherit; text-decoration: none; display: block;">Settings</a>
+        </div>
+        <div class="sidebar-link">
+          <a href="/profile.html" style="color: inherit; text-decoration: none; display: block;">Profile</a>
+        </div>
         
-        <button class="toggle-button" id="darkModeToggle">
+        <button class="theme-toggle" id="themeToggle">
           Toggle ${this.darkMode ? 'Light' : 'Dark'} Mode
         </button>
       </div>
     `;
   }
-
-  setupEventListeners() {
-    this.shadowRoot.getElementById('darkModeToggle').addEventListener('click', () => {
-      this.darkMode = !this.darkMode;
-      this.render();
-      this.setupEventListeners();
-      
-      // Dispatch custom event for other components
-      this.dispatchEvent(new CustomEvent('darkModeToggle', {
-        detail: { darkMode: this.darkMode },
-        bubbles: true
-      }));
-    });
-
-    // Add click listeners for menu items
-    this.shadowRoot.querySelectorAll('.menu-item').forEach(item => {
-      item.addEventListener('click', () => {
-        const page = item.getAttribute('data-page');
-        this.dispatchEvent(new CustomEvent('menuItemClick', {
-          detail: { page },
-          bubbles: true
-        }));
-      });
-    });
-  }
 }
 
 customElements.define('custom-sidebar', CustomSidebar);

orders.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Orders - MLTX Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-sidebar></custom-sidebar>
+    <div class="main-content" style="margin-left: 220px; padding: 2rem;">
+        <h1 class="text-3xl font-bold mb-6">Orders</h1>
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <p class="text-gray-600 dark:text-gray-300">Order management system coming soon...</p>
+        </div>
+    </div>
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

profile.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile - MLTX Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-sidebar></custom-sidebar>
+    <div class="main-content" style="margin-left: 220px; padding: 2rem;">
+        <h1 class="text-3xl font-bold mb-6">Profile</h1>
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <p class="text-gray-600 dark:text-gray-300">User profile management coming soon...</p>
+        </div>
+    </div>
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>

settings.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - MLTX Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body>
+    <custom-sidebar></custom-sidebar>
+    <div class="main-content" style="margin-left: 220px; padding: 2rem;">
+        <h1 class="text-3xl font-bold mb-6">Settings</h1>
+        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
+            <p class="text-gray-600 dark:text-gray-300">Settings panel coming soon...</p>
+        </div>
+    </div>
+    <script src="components/sidebar.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>