From 1ea68d30da527da2a2b77b85afebf942906a401c Mon Sep 17 00:00:00 2001 From: Chrissy LeMaire Date: Mon, 16 Dec 2024 13:04:50 +0100 Subject: [PATCH] supposed fix for disappearing x --- css/components/nav/mobile.css | 121 ++++++-------------- css/components/nav/user-menu-dropdown.css | 40 +++++-- css/components/nav/user-menu-responsive.css | 14 +-- js/components/top-nav.js | 17 +-- 4 files changed, 72 insertions(+), 120 deletions(-) diff --git a/css/components/nav/mobile.css b/css/components/nav/mobile.css index 20a25bc..919c395 100644 --- a/css/components/nav/mobile.css +++ b/css/components/nav/mobile.css @@ -23,11 +23,6 @@ background: var(--accent); } -/* Hide mobile mode switches by default (desktop) */ -.mobile-mode-switches { - display: none; -} - /* Mobile Styles */ @media (max-width: 768px) { .top-nav { @@ -36,7 +31,13 @@ justify-content: space-between; padding: 0 var(--spacing-sm); height: 55px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + position: fixed; + top: 0; + left: 0; + right: 0; + background: var(--surface); + z-index: 999; + border-bottom: 1px solid var(--border); } .brand { @@ -52,26 +53,12 @@ .hamburger-menu { display: flex !important; position: absolute; - top: 16px; - right: var(--spacing-sm); + top: 18px; + right: 16px; z-index: 1001; } - /* Ensure dropdown appears below hamburger */ - .user-menu-dropdown { - display: none; - } - - .user-menu.active .user-menu-dropdown { - display: block; - } - - /* Ensure menu is above other content */ - .user-menu.active { - z-index: 1000; - } - - /* Hide non-essential elements on mobile */ + /* Hide desktop elements */ .mode-toggle, .keywords-updated, .user-name, @@ -83,106 +70,57 @@ /* Style nav-mute-button for mobile */ .nav-mute-button { - position: absolute; - right: 56px; /* Position to left of hamburger menu */ - top: 50%; - transform: translateY(-50%); + margin-right: 48px; padding: 8px 12px; font-size: 0.9rem; - min-height: 36px; /* Ensure good touch target size */ - display: none; /* Hidden by default */ + min-height: 36px; + display: none; } .nav-mute-button.visible { - display: block; /* Show only when there are changes */ - } - - /* Remove the space the mode-toggle was taking up */ - .mode-toggle { - height: 0; - margin: 0; - padding: 0; - overflow: hidden; - } - - /* Show and style mobile mode switches */ - .mobile-mode-switches { display: block; - border-bottom: 1px solid var(--border); - margin-bottom: 8px; - padding: 4px 0; } - .mobile-mode-switches .user-menu-item { + /* Menu items styling */ + .user-menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; - cursor: pointer; - transition: var(--transition); + color: var(--text); + text-decoration: none; + transition: background-color 0.2s; } - .mobile-mode-switches .user-menu-item:hover { + .user-menu-item:hover { background: var(--surface-hover); } - .mobile-mode-switches .user-menu-item svg { + .user-menu-item svg { + width: 20px; + height: 20px; flex-shrink: 0; } + /* Ensure dropdown appears below hamburger */ .user-menu-dropdown { + display: none; position: fixed; top: 55px; right: 0; left: 0; width: 100%; - max-width: 100%; background: var(--surface); border-radius: 0; box-shadow: var(--card-shadow); z-index: 1000; - overflow-x: hidden; - } - - /* Adjust search and controls area */ - .sidebar-header { - padding: 8px var(--spacing-sm); - margin: 0; - background: var(--surface); } - .toggle-all-controls { - display: flex; - gap: 8px; - padding: 8px 0; - margin: 0; - } - - .sidebar-search { - margin: 0; - padding: 8px 12px; - } - - /* Adjust main content area */ - .interface-mode { - margin-top: 0; - } - - .advanced-layout { - padding-top: 0; - } - - /* Hamburger menu active state */ - .hamburger-menu.active { - display: flex !important; - } - - .hamburger-menu.active span { - width: 100%; - height: 2px; - background: var(--text); + .user-menu.active .user-menu-dropdown { + display: block; } + /* Hamburger animation */ .hamburger-menu.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); } @@ -194,4 +132,9 @@ .hamburger-menu.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } + + /* Adjust main content for fixed header */ + body { + padding-top: 55px; + } } diff --git a/css/components/nav/user-menu-dropdown.css b/css/components/nav/user-menu-dropdown.css index 3acdb8c..2935b2c 100644 --- a/css/components/nav/user-menu-dropdown.css +++ b/css/components/nav/user-menu-dropdown.css @@ -1,22 +1,18 @@ /* User Menu Dropdown Styles */ /* Overlay background when menu is open */ -.user-menu::before { +.user-menu.active::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; - background: rgba(0, 0, 0, 0.3); - display: none; - z-index: 100; -} - -.user-menu.active::before { - display: block; + background: rgba(0, 0, 0, 0.5); + z-index: 998; } +/* Base dropdown styles for desktop */ .user-menu-dropdown { position: absolute; top: calc(100% + 8px); @@ -26,11 +22,10 @@ border-radius: var(--border-radius-lg); box-shadow: var(--card-shadow); width: 320px; - min-width: 320px; + min-width: 280px; max-width: calc(100vw - 32px); display: none; - z-index: 101; - flex-shrink: 0; + z-index: 1001; } .user-menu.active .user-menu-dropdown { @@ -62,5 +57,26 @@ background: var(--background); border-radius: var(--border-radius); white-space: nowrap; - flex-shrink: 0; +} + +/* Mobile styles */ +@media (max-width: 768px) { + /* Reset any inherited positioning */ + .user-menu { + position: static; + } + + /* Fixed positioning for mobile dropdown */ + .user-menu-dropdown { + position: fixed !important; + top: 55px !important; + right: 16px !important; + left: auto !important; + width: 280px !important; + min-width: 280px !important; + border-radius: var(--border-radius) !important; + max-height: calc(100vh - 71px); + overflow-y: auto; + margin: 0; + } } diff --git a/css/components/nav/user-menu-responsive.css b/css/components/nav/user-menu-responsive.css index 89e47c2..2134d02 100644 --- a/css/components/nav/user-menu-responsive.css +++ b/css/components/nav/user-menu-responsive.css @@ -1,19 +1,11 @@ /* User Menu Responsive Styles */ @media (max-width: 768px) { - .mobile-mode-switches { - display: block; + .user-menu { + position: static; } -} -@media (max-width: 400px) { + /* Hide desktop elements */ .total-mutes { display: none; } - - .user-menu-dropdown { - width: 100% !important; - min-width: 100% !important; - right: 0; - left: 0; - } } diff --git a/js/components/top-nav.js b/js/components/top-nav.js index 667f5e9..c39bc1c 100644 --- a/js/components/top-nav.js +++ b/js/components/top-nav.js @@ -80,26 +80,27 @@ class TopNav extends HTMLElement { const hamburgerMenu = this.querySelector('.hamburger-menu'); const userMenu = this.querySelector('.user-menu'); - hamburgerMenu?.addEventListener('click', (e) => { - e.stopPropagation(); + // Handle hamburger menu clicks + hamburgerMenu?.addEventListener('click', () => { const isActive = hamburgerMenu.classList.contains('active'); - - // If menu is active (X is showing), clicking should always close it if (isActive) { hamburgerMenu.classList.remove('active'); userMenu.classList.remove('active'); } else { - // Only open if it's not already active hamburgerMenu.classList.add('active'); userMenu.classList.add('active'); } }); - // Close menu when clicking outside + // Handle clicks outside menu document.addEventListener('click', (e) => { - if (!userMenu.contains(e.target) && !hamburgerMenu.contains(e.target)) { + // Only handle clicks outside both hamburger and menu + if (e.target !== hamburgerMenu && + !hamburgerMenu?.contains(e.target) && + e.target !== userMenu && + !userMenu?.contains(e.target)) { hamburgerMenu?.classList.remove('active'); - userMenu.classList.remove('active'); + userMenu?.classList.remove('active'); } });