implement nice styling for the lefthand sidebar

components/sidebar.js

@@ -0,0 +1,176 @@
+class CryptoSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          width: 280px;
+          background: rgba(17, 24, 39, 0.95);
+          backdrop-filter: blur(10px);
+          border-right: 1px solid rgba(255, 255, 255, 0.05);
+          z-index: 40;
+          transform: translateX(-100%);
+          transition: transform 0.3s ease;
+        }
+        
+        :host(.open) {
+          transform: translateX(0);
+        }
+        
+        .sidebar-content {
+          height: 100%;
+          padding: 1.5rem;
+          overflow-y: auto;
+          scrollbar-width: thin;
+        }
+        
+        .sidebar-header {
+          display: flex;
+          align-items: center;
+          padding-bottom: 1.5rem;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          margin-bottom: 1.5rem;
+        }
+        
+        .logo {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          font-weight: 600;
+          font-size: 1.25rem;
+        }
+        
+        .logo-icon {
+          color: #6366f1;
+        }
+        
+        .nav-section {
+          margin-bottom: 2rem;
+        }
+        
+        .nav-title {
+          font-size: 0.875rem;
+          font-weight: 500;
+          color: rgba(156, 163, 175, 0.8);
+          margin-bottom: 1rem;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+        }
+        
+        .nav-link {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          padding: 0.75rem;
+          border-radius: 0.5rem;
+          color: rgba(209, 213, 219, 0.9);
+          font-weight: 500;
+          transition: all 0.2s ease;
+          margin-bottom: 0.25rem;
+        }
+        
+        .nav-link:hover {
+          background: rgba(55, 65, 81, 0.5);
+          color: white;
+        }
+        
+        .nav-link.active {
+          background: rgba(99, 102, 241, 0.1);
+          color: #6366f1;
+        }
+        
+        .nav-link i {
+          width: 1.25rem;
+          height: 1.25rem;
+        }
+        
+        .sidebar-toggle {
+          position: absolute;
+          right: -3rem;
+          top: 1rem;
+          background: rgba(17, 24, 39, 0.9);
+          border: 1px solid rgba(255, 255, 255, 0.05);
+          border-radius: 0.375rem;
+          padding: 0.5rem;
+          color: rgba(209, 213, 219, 0.9);
+          cursor: pointer;
+          transition: all 0.2s ease;
+        }
+        
+        .sidebar-toggle:hover {
+          background: rgba(55, 65, 81, 0.5);
+          color: white;
+        }
+      </style>
+      
+      <button class="sidebar-toggle" id="toggle-sidebar">
+        <i data-feather="menu"></i>
+      </button>
+      
+      <div class="sidebar-content">
+        <div class="sidebar-header">
+          <div class="logo">
+            <i data-feather="activity" class="logo-icon"></i>
+            <span>Crypto Pulse</span>
+          </div>
+        </div>
+        
+        <div class="nav-section">
+          <h4 class="nav-title">Dashboard</h4>
+          <a href="/" class="nav-link active">
+            <i data-feather="home"></i>
+            <span>Overview</span>
+          </a>
+          <a href="#" class="nav-link">
+            <i data-feather="trending-up"></i>
+            <span>Market Trends</span>
+          </a>
+          <a href="#" class="nav-link">
+            <i data-feather="heart"></i>
+            <span>Watchlist</span>
+          </a>
+        </div>
+        
+        <div class="nav-section">
+          <h4 class="nav-title">Analytics</h4>
+          <a href="#" class="nav-link">
+            <i data-feather="bar-chart-2"></i>
+            <span>Charts</span>
+          </a>
+          <a href="#" class="nav-link">
+            <i data-feather="alert-circle"></i>
+            <span>Alerts</span>
+          </a>
+          <a href="#" class="nav-link">
+            <i data-feather="clock"></i>
+            <span>Historical Data</span>
+          </a>
+        </div>
+        
+        <div class="nav-section">
+          <h4 class="nav-title">Settings</h4>
+          <a href="#" class="nav-link">
+            <i data-feather="settings"></i>
+            <span>Preferences</span>
+          </a>
+          <a href="#" class="nav-link">
+            <i data-feather="help-circle"></i>
+            <span>Help</span>
+          </a>
+        </div>
+      </div>
+    `;
+    
+    const toggleBtn = this.shadowRoot.getElementById('toggle-sidebar');
+    toggleBtn.addEventListener('click', () => {
+      this.classList.toggle('open');
+    });
+  }
+}
+
+customElements.define('crypto-sidebar', CryptoSidebar);

index.html

@@ -27,9 +27,9 @@
     </script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">
+    <crypto-sidebar></crypto-sidebar>
     <crypto-header></crypto-header>
-    
-    <main class="container mx-auto px-4 py-8">
+<main class="container mx-auto px-4 py-8">
         <div class="flex flex-col lg:flex-row gap-8">
             <div class="lg:w-1/4">
                 <crypto-filters></crypto-filters>
@@ -44,9 +44,9 @@
     </main>
 
     <crypto-footer></crypto-footer>
-
+    <script src="components/sidebar.js"></script>
     <script src="components/header.js"></script>
-    <script src="components/filters.js"></script>
+<script src="components/filters.js"></script>
     <script src="components/footer.js"></script>
     <script src="script.js"></script>
     <script>feather.replace();</script>

style.css

@@ -30,6 +30,15 @@
 ::-webkit-scrollbar-thumb:hover {
     background: #6b7280;
 }
+/* Sidebar adjustment for main content */
+main {
+  margin-left: 280px;
+  transition: margin-left 0.3s ease;
+}
+
+body:has(crypto-sidebar:not(.open)) main {
+  margin-left: 0;
+}
 
 /* Custom transitions */
 .smooth-transition {