Enhance sidebar functionality and responsiveness with new toggle features

index.html

@@ -804,6 +804,16 @@
         background-color: var(--accent-color);
         color: white;
       }
+     
+
+      @media (min-width: 400px) and (max-width: 1920px) {
+      .content-wrapper.closed-sidebar {
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+
+        
+      }
 
       @media (max-width: 768px) {
         .content-wrapper {
@@ -813,8 +823,23 @@
         }
 
         .sidebar-sticky {
+          position: absolute;
+          top: 50px;
+          left: 0;
+          width: 100%;
+          transition: transform 0.2s ease;
+          background: #00000050;
+          backdrop-filter: blur(4px);
+          height: 100%;
+        }
+
+        #closeFooter {
           display: none;
         }
+        
+        .sidebar-sticky.closed {
+          transform: translateX(-600px);
+        }
 
         .sidebar {
            width: 100%;
@@ -823,6 +848,10 @@
           border-bottom: 1px solid #e1e4e8;
         }
 
+              .sidebar.closed {
+        transform: translateX(-600px);
+      }
+
         .dark-mode .sidebar {
           border-bottom-color: #2d2d2d;
         }
@@ -831,8 +860,8 @@
           height: auto;
         }
 
+
         .site-header {
-          --site-header-height: 120px;
           height: var(--site-header-height);
         }
 
@@ -1567,10 +1596,10 @@
 
               <aside class="sidebar">
           <div class="search-container">
-            <div class="prompt-count" id="promptCount">
-              <span class="count-label">All Prompts</span>
-              <span class="prompts-count-label">Developer Prompts</span>
-              <span class="count-number">0</span>
+              <div class="prompt-count" id="promptCount">
+                <span class="count-label">All Prompts</span>
+                <span class="prompts-count-label">Developer Prompts</span>
+                <span class="count-number">0</span>
             </div>
             <input type="text" id="searchInput" placeholder="Search prompts...">
             <ul id="searchResults"></ul>

script.js

@@ -13,6 +13,17 @@ function toggleDarkMode() {
   moonIcon.style.display = isDarkMode ? "block" : "none";
 }
 
+const sidebar = document.querySelector('.sidebar');
+const sidebarSticky = document.querySelector('.sidebar-sticky');
+const footer = document.querySelector('.site-footer');
+const contentWrapper = document.querySelector('.content-wrapper');
+const collapsedSiderIcon = document.querySelector('.collapsed-sider-icon');
+const expandedSiderIcon = document.querySelector('.expanded-sider-icon');
+const closeSidebar = document.getElementById('closeSidebar');
+const closeFooter = document.getElementById('closeFooter');
+const collapsedFooterIcon = document.querySelector('.collapsed-footer-icon');
+const expandedFooterIcon = document.querySelector('.expanded-footer-icon');
+
 function updateHeaderHeight() {
   const siteHeader = document.querySelector('.site-header');
   if (!siteHeader) return; // Eğer element yoksa hata vermemesi için
@@ -32,29 +43,25 @@ document.addEventListener("DOMContentLoaded", () => {
   devModeToggle.checked = initialDevMode;
 
   // Initialize sidebar toggle
-  const sidebar = document.querySelector('.sidebar');
-  const footer = document.querySelector('.site-footer');
-  const contentWrapper = document.querySelector('.content-wrapper');
-  const collapsedSiderIcon = document.querySelector('.collapsed-sider-icon');
-  const expandedSiderIcon = document.querySelector('.expanded-sider-icon');
-  const closeSidebar = document.getElementById('closeSidebar');
-  const closeFooter = document.getElementById('closeFooter');
-  const collapsedFooterIcon = document.querySelector('.collapsed-footer-icon');
-  const expandedFooterIcon = document.querySelector('.expanded-footer-icon');
+  if (window.innerWidth <= 768) {
+    sidebar.classList.toggle('closed');
+    sidebarSticky.classList.toggle('closed');
+  }
 
   closeSidebar.addEventListener('click', () => {
     contentWrapper.classList.toggle('closed-sidebar');
     sidebar.classList.toggle('closed');
+    sidebarSticky.classList.toggle('closed');
     collapsedSiderIcon.classList.toggle('hidden');
     expandedSiderIcon.classList.toggle('hidden');
   });
 
-closeFooter.addEventListener('click', () => {
-  contentWrapper.classList.toggle('closed-footer');
-  footer.classList.toggle('closed');
-  collapsedFooterIcon.classList.toggle('hidden');
-  expandedFooterIcon.classList.toggle('hidden');
-});
+  closeFooter.addEventListener('click', () => {
+    contentWrapper.classList.toggle('closed-footer');
+    footer.classList.toggle('closed');
+    collapsedFooterIcon.classList.toggle('hidden');
+    expandedFooterIcon.classList.toggle('hidden');
+  });
   // Initialize chat button icons
   updateChatButtonIcons(initialDevMode);
 
@@ -280,6 +287,11 @@ function displaySearchResults(results) {
           searchTitle.toLowerCase().includes(cardTitle.toLowerCase());
       });
 
+      if (window.innerWidth <= 768) {
+        sidebar.classList.toggle('closed');
+        sidebarSticky.classList.toggle('closed');
+      }
+
       if (targetCard) {
         // Remove highlight from all cards
         cards.forEach((card) => {
@@ -306,7 +318,7 @@ function displaySearchResults(results) {
           });
         } else {
           // On desktop, scroll the main-content container
-          const mainContent = document.querySelector(".main-content");
+          const mainContent = document.querySelector("html");
           const cardRect = targetCard.getBoundingClientRect();
           const scrollTop = mainContent.scrollTop + cardRect.top -
             headerHeight - 20;