steve
/
awesome-chatgpt-prompts
mirror of https://github.com/f/awesome-chatgpt-prompts
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Enhance sidebar functionality and responsiveness with new toggle features

This commit is contained in:
Halid 2025-02-08 22:29:52 +03:00
parent 50d243288c
commit 8d0ccbece5
2 changed files with 62 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@ -805,6 +805,16 @@
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 {
flex-direction: column;
@ -813,9 +823,24 @@
}
.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%;
height: auto;
@ -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);
}

32
script.js
View File

@ -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,19 +43,15 @@ 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');
});
@ -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;