sidebarı sola sabitle site ile iç içe giriyor

components/sidebar.js

@@ -1,8 +1,12 @@
 
 class CustomSidebar extends HTMLElement {
-    connectedCallback() {
+    constructor() {
+        super();
         this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
+    }
+    
+    connectedCallback() {
+this.shadowRoot.innerHTML = `
             <style>
                 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
                 * { font-family: 'Inter', sans-serif; }
@@ -15,9 +19,7 @@ class CustomSidebar extends HTMLElement {
                     padding: 1.5rem 0 5rem;
                     overflow-y: auto;
                     height: 100vh;
-                    position: fixed;
-                    left: 0;
-                    top: 0;
+                    position: relative;
                     z-index: 40;
                     transition: transform 0.3s ease;
                 }
@@ -207,6 +209,7 @@ class CustomSidebar extends HTMLElement {
                 }
                 @media (max-width: 768px) {
                     .sidebar {
+                        position: fixed;
                         transform: translateX(-100%);
                     }
                     
@@ -214,11 +217,13 @@ class CustomSidebar extends HTMLElement {
                         transform: translateX(0);
                     }
                     
-                    .fixed.bottom-0.left-0.w-\[280px\] {
+                    .fixed.bottom-0 {
+                        position: fixed;
                         transform: translateX(-100%);
                     }
                     
-                    .sidebar.active ~ .fixed.bottom-0.left-0.w-\[280px\] {
+                    .sidebar.active ~ .fixed.bottom-0,
+                    .fixed.bottom-0.active {
                         transform: translateX(0);
                     }
                 }
@@ -346,10 +351,11 @@ class CustomSidebar extends HTMLElement {
                         </div>
                     </div>
                 </div>
-</nav>
+            </nav>
+        </div>
             <!-- Fixed Bottom Account -->
             <div class="fixed bottom-0 left-0 w-[280px] bg-zinc-900/95 backdrop-blur-xl border-t border-zinc-800 p-3 z-50">
-                <button onclick="openAccount()" class="account-btn">
+<button onclick="openAccount()" class="account-btn">
 <div class="account-icon">
                         U
                     </div>
@@ -362,7 +368,50 @@ class CustomSidebar extends HTMLElement {
                     </svg>
                 </button>
             </div>
-`;
+        `;
+        
+        // Add mobile menu toggle
+        this.setupMobileMenu();
+    }
+    
+    setupMobileMenu() {
+        // Create mobile menu button
+        const menuButton = document.createElement('button');
+        menuButton.className = 'mobile-menu-trigger';
+        menuButton.innerHTML = `
+            <style>
+                .mobile-menu-trigger {
+                    display: none;
+                    position: fixed;
+                    top: 1rem;
+                    left: 1rem;
+                    z-index: 50;
+                    background: rgba(9, 9, 11, 0.9);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 8px;
+                    padding: 0.5rem;
+                    cursor: pointer;
+                }
+                
+                @media (max-width: 768px) {
+                    .mobile-menu-trigger {
+                        display: block;
+                    }
+                }
+            </style>
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+                <path d="M3 12h18M3 6h18M3 18h18"/>
+            </svg>
+        `;
+        
+        menuButton.onclick = () => {
+            const sidebar = this.shadowRoot.querySelector('.sidebar');
+            const accountPanel = sidebar.nextElementSibling;
+            sidebar.classList.toggle('active');
+            accountPanel.classList.toggle('active');
+        };
+        
+        document.body.appendChild(menuButton);
     }
 }
 

index.html

@@ -63,7 +63,7 @@
     <div class="flex h-screen relative z-10">
         <custom-sidebar></custom-sidebar>
 <!-- Main Chat Area -->
-<main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full">
+<main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full ml-0">
 <!-- Chat Header -->
             <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
                 <div class="flex items-center space-x-3">

style.css

@@ -144,10 +144,11 @@ body {
 /* Mobile Responsive */
 @media (max-width: 768px) {
     main {
-        margin-left: 0 !important;
+        margin-left: 0;
     }
     
     .sidebar {
+        position: fixed;
         transform: translateX(-100%);
         transition: transform 0.3s ease;
     }
@@ -156,6 +157,13 @@ body {
         transform: translateX(0);
     }
 }
+
+/* Desktop Responsive */
+@media (min-width: 769px) {
+    main {
+        margin-left: 280px;
+    }
+}
 /* Loading Skeleton */
 .skeleton {
     background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);