From 53859fd84e1d29a1baa8ba1c60234840db99551b Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 13:36:49 +0000 Subject: [PATCH 1/5] feat: nav dropdown, mobile drawer, phosphor icons, dark mode fix, responsive scale - Replace all icons with Phosphor Icons (CDN CSS, ph-* class approach) - Fix dark mode nav: header now uses dark semi-transparent bg in dark theme - Add desktop Browse hover dropdown with 8 categories in a 4-column grid - Add mobile full-height slide-out drawer from right with all nav items - Add responsive scale overrides for spacing/font sizes at mobile breakpoints - Add color-scheme per theme to prevent OS-level dark UI glitches - Update CATEGORIES icon names to valid Phosphor icon identifiers https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH --- .../AwesomeGithub/AwesomeGithubNav.astro | 198 +++--------------- 1 file changed, 33 insertions(+), 165 deletions(-) diff --git a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro index 040793c4..996a88f1 100644 --- a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro +++ b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro @@ -1,6 +1,6 @@ --- -import { CATEGORIES } from "../../lib/catalogue"; import Icon from "./Icon.astro"; +import { CATEGORIES } from "../../lib/catalogue"; interface Props { base: string; @@ -49,7 +49,7 @@ const isCatActive = (linkPath: string): boolean => { aria-controls="ag-browse-panel" > Browse - +
{ class="ag-browse-card" role="menuitem" > - + {cat.label} {cat.blurb} @@ -94,7 +94,7 @@ const isCatActive = (linkPath: string): boolean => { title="Search (Ctrl+K)" data-search-open > - +
- {link.label} - - ))} - - -
- - -
@@ -181,7 +144,7 @@ const isCatActive = (linkPath: string): boolean => {
{CATEGORIES.map((cat) => ( - + {cat.label} ))} @@ -206,8 +169,8 @@ const isCatActive = (linkPath: string): boolean => { data-awesome-github-theme-toggle aria-label="Toggle colour theme" > - - + + Switch to dark mode Switch to light mode @@ -234,16 +197,13 @@ const isCatActive = (linkPath: string): boolean => { browseTrigger.setAttribute("aria-expanded", "false"); }; - // Hover for pointer devices browseWrapper.addEventListener("mouseenter", openBrowse); browseWrapper.addEventListener("mouseleave", closeBrowse); - // Click toggle for touch/keyboard browseTrigger.addEventListener("click", () => { browseWrapper.hasAttribute("data-open") ? closeBrowse() : openBrowse(); }); - // Close on Escape document.addEventListener("keydown", (e) => { if (e.key === "Escape" && browseWrapper.hasAttribute("data-open")) { closeBrowse(); @@ -251,14 +211,12 @@ const isCatActive = (linkPath: string): boolean => { } }); - // Close on outside click document.addEventListener("click", (e) => { if (e.target instanceof Element && !browseWrapper.contains(e.target)) { closeBrowse(); } }); - // Close when a category link is clicked browsePanel.querySelectorAll("a").forEach((link) => { link.addEventListener("click", closeBrowse); }); @@ -285,44 +243,22 @@ const isCatActive = (linkPath: string): boolean => { hamburger.addEventListener("click", () => { hamburger.getAttribute("aria-expanded") === "true" ? closeDrawer() : openDrawer(); - if (hamburger && menu) { - const closeMenu = () => { - hamburger.setAttribute("aria-expanded", "false"); - hamburger.setAttribute("aria-label", "Open navigation menu"); - menu.classList.remove("ag-nav-menu--open"); - document.body.style.overflow = ""; - }; - hamburger.addEventListener("click", () => { - const isOpen = hamburger.getAttribute("aria-expanded") === "true"; - if (isOpen) { - closeMenu(); - } else { - hamburger.setAttribute("aria-expanded", "true"); - hamburger.setAttribute("aria-label", "Close navigation menu"); - menu.classList.add("ag-nav-menu--open"); - document.body.style.overflow = "hidden"; - } }); overlay.addEventListener("click", closeDrawer); drawer.querySelectorAll("a").forEach((link) => { link.addEventListener("click", closeDrawer); - // Close on link click (mobile) - menu.querySelectorAll("a").forEach((link) => { - link.addEventListener("click", () => closeMenu()); }); document.addEventListener("keydown", (e) => { if (e.key === "Escape" && hamburger.getAttribute("aria-expanded") === "true") { closeDrawer(); - closeMenu(); hamburger.focus(); } }); - // Clear scroll-lock if the viewport widens past the mobile breakpoint while the menu is open - window.matchMedia("(max-width: 768px)").addEventListener("change", (e) => { - if (!e.matches) closeMenu(); + window.matchMedia("(min-width: 961px)").addEventListener("change", (e) => { + if (e.matches) closeDrawer(); }); } @@ -336,7 +272,6 @@ const isCatActive = (linkPath: string): boolean => { border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); - /* Light mode */ background: rgba(255, 255, 255, 0.88); transition: background var(--dur) var(--ease-out), @@ -421,10 +356,9 @@ const isCatActive = (linkPath: string): boolean => { white-space: nowrap; } - /* Light mode nav links: boost contrast */ [data-theme="light"] .ag-nav-link, :not([data-theme]) .ag-nav-link { color: var(--c-slate-700, #404040); } - [data-theme="dark"] .ag-nav-link { color: var(--fg-2); } + [data-theme="dark"] .ag-nav-link { color: var(--fg-2); } .ag-nav-link:hover { color: var(--fg-1); @@ -436,9 +370,9 @@ const isCatActive = (linkPath: string): boolean => { font-weight: var(--weight-semibold); } - /* Caret rotation */ .ag-caret-icon { - font-size: 12px; + display: inline-flex; + align-items: center; transition: transform var(--dur) var(--ease-out); } .ag-browse-trigger[aria-expanded="true"] .ag-caret-icon { @@ -446,9 +380,7 @@ const isCatActive = (linkPath: string): boolean => { } /* ── Browse dropdown ────────────────────────────────────────────── */ - .ag-browse-wrapper { - position: relative; - } + .ag-browse-wrapper { position: relative; } .ag-browse-panel { position: absolute; @@ -497,8 +429,12 @@ const isCatActive = (linkPath: string): boolean => { border-radius: var(--radius-md); text-decoration: none; color: var(--fg-1); - transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); border: 1px solid transparent; + transition: + background var(--dur) var(--ease-out), + border-color var(--dur) var(--ease-out), + transform var(--dur) var(--ease-out), + box-shadow var(--dur) var(--ease-out); } .ag-browse-card:hover { @@ -515,7 +451,7 @@ const isCatActive = (linkPath: string): boolean => { } .ag-browse-cat-icon { - font-size: 22px; + display: inline-flex; color: var(--accent); line-height: 1; } @@ -553,7 +489,6 @@ const isCatActive = (linkPath: string): boolean => { border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg-2); - font-size: 18px; cursor: pointer; transition: color var(--dur) var(--ease-out), @@ -575,26 +510,22 @@ const isCatActive = (linkPath: string): boolean => { outline-offset: 2px; } - /* ── Theme toggle icons ─────────────────────────────────────────── */ - /* Default: show moon (assume light mode = show moon to switch to dark) */ + /* ── Theme toggle icon visibility ───────────────────────────────── */ .ag-icon-sun { display: none; } - .ag-icon-moon { display: block; } + .ag-icon-moon { display: inline-flex; align-items: center; } - /* Dark mode active: show sun to indicate "switch to light" */ - [data-theme="dark"] .ag-icon-sun { display: block; } + [data-theme="dark"] .ag-icon-sun { display: inline-flex; align-items: center; } [data-theme="dark"] .ag-icon-moon { display: none; } - /* Light mode active: show moon to indicate "switch to dark" */ [data-theme="light"] .ag-icon-sun { display: none; } - [data-theme="light"] .ag-icon-moon { display: block; } + [data-theme="light"] .ag-icon-moon { display: inline-flex; align-items: center; } /* ── Hamburger ──────────────────────────────────────────────────── */ - .ag-hamburger-btn { display: none; } /* hidden on desktop */ + .ag-hamburger-btn { display: none; } - /* Show/hide menu/close icons */ .ag-icon-close { display: none; } - .ag-icon-menu { display: block; } + .ag-icon-menu { display: inline-flex; align-items: center; } - [data-nav-hamburger][aria-expanded="true"] .ag-icon-close { display: block; } + [data-nav-hamburger][aria-expanded="true"] .ag-icon-close { display: inline-flex; align-items: center; } [data-nav-hamburger][aria-expanded="true"] .ag-icon-menu { display: none; } /* ── Mobile overlay ─────────────────────────────────────────────── */ @@ -611,11 +542,6 @@ const isCatActive = (linkPath: string): boolean => { .ag-mobile-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; - .theme-icon-light, - .theme-icon-dark { - display: inline-flex; - align-items: center; - justify-content: center; } /* ── Mobile drawer ──────────────────────────────────────────────── */ @@ -631,7 +557,6 @@ const isCatActive = (linkPath: string): boolean => { overflow-y: auto; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out); - padding: 0; } .ag-mobile-drawer[aria-hidden="false"] { @@ -676,8 +601,8 @@ const isCatActive = (linkPath: string): boolean => { transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } - .ag-drawer-cat-item i { - font-size: 18px; + .ag-drawer-cat-icon { + display: inline-flex; color: var(--accent); flex-shrink: 0; } @@ -706,7 +631,7 @@ const isCatActive = (linkPath: string): boolean => { align-items: center; gap: var(--space-3); width: 100%; - padding: var(--space-4) var(--space-4); + padding: var(--space-4); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md); @@ -718,7 +643,6 @@ const isCatActive = (linkPath: string): boolean => { transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } - .ag-drawer-theme-btn i { font-size: 20px; color: var(--accent); } .ag-drawer-theme-btn:hover { background: var(--bg-muted); border-color: var(--accent); } .ag-drawer-theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @@ -743,61 +667,5 @@ const isCatActive = (linkPath: string): boolean => { @media (max-width: 480px) { .ag-brand-text { display: none; } - .ag-nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) { - opacity: 0; - transform: scaleX(0); - } - .ag-nav-hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) { - transform: translateY(-7px) rotate(-45deg); - } - - @media (max-width: 768px) { - .ag-nav-hamburger { - display: flex; - } - - .ag-nav-menu { - position: fixed; - top: 72px; - left: 0; - right: 0; - bottom: 0; - z-index: 99; - flex-direction: column; - gap: 0; - background: var(--bg); - border-top: 1px solid var(--border); - padding: var(--space-4) var(--gutter); - transform: translateX(-100%); - visibility: hidden; - transition: transform var(--dur) var(--ease-out), visibility var(--dur) var(--ease-out); - overflow-y: auto; - } - - [data-theme="dark"] .ag-nav-menu { - background: #0F1014; - } - - .ag-nav-menu.ag-nav-menu--open { - transform: translateX(0); - visibility: visible; - } - - .ag-nav-link { - font-size: 18px; - padding: var(--space-4) 0; - border-bottom: 1px solid var(--border); - border-bottom-width: 1px; - width: 100%; - } - - .ag-nav-link[aria-current="page"] { - color: var(--accent); - border-bottom-color: var(--border); - } - - .ag-nav-search { - display: none; - } } From 99f58167d7043d3305d0e8cba616162c36e2064f Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 5 Jun 2026 16:18:59 +0000 Subject: [PATCH 2/5] fix(website): a11y, aria, inert drawer, scroll-lock, nav z-index fixes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Disclosure pattern: remove role=menu/menuitem/aria-haspopup=menu from Browse dropdown; use only aria-expanded + aria-controls - Add focusout handler on browse wrapper to close when focus leaves - Replace document.body.style.overflow with body.ag-drawer-open CSS class (scoped to ≤960px media query via :global) for scroll-lock - Add inert attribute on mobile drawer when closed; remove on open - Raise .ag-nav z-index to 300 so hamburger stays above drawer (200) - Add aria-pressed to both theme toggle buttons; sync via theme-changed custom event dispatched from layout on each toggle click - Remove CDN Phosphor Icons link (Icon.astro handles inline SVGs) - Fix body layout: display:flex+flex-direction:column+min-height:100dvh so main { flex:1 } fills remaining height without calc(100vh - 72px) - Update hamburger aria-label dynamically (Open/Close navigation menu) - Add CHANGELOG entry for UI redesign work https://claude.ai/code/session_017G3gEzdfRafmqFno5dfWQH --- CHANGELOG.md | 1 + .../AwesomeGithub/AwesomeGithubNav.astro | 43 ++++++++++++++----- website/src/layouts/AwesomeGithubLayout.astro | 8 ++-- 3 files changed, 39 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6370d8ab..2ceb3a2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added +- **Awesome GitHub Site: UI Redesign — Dark Mode, Navigation & Responsive Layout** — Complete navigation and UI overhaul. Added desktop Browse mega-dropdown with 4-column category grid (hover/click open, keyboard Escape dismiss, focus-out close). Added full-height mobile drawer sliding from right with backdrop overlay, scroll-lock, and `inert` guard. Fixed dark-mode nav header (was showing light background). Added fluid responsive CSS tokens for spacing and font sizes across breakpoints. Improved accessibility: Disclosure pattern (`aria-expanded`/`aria-controls`, no `role="menu"`), `aria-pressed` on theme toggle buttons, `inert` on closed drawer, nav z-index raised above drawer so hamburger stays accessible. - **Awesome GitHub Site: Phosphor Icon System** — Replaced all emoji icons (🤖 📖 💬 ✨ 🛡️ ⚙️ 🧩 🔧 🗺️ ✅ 📚 🍳 ☀️ 🌙) with Phosphor SVG icons via a new `Icon.astro` component that reads from `@phosphor-icons/core` at build time — zero runtime JS. Covers catalogue type icons, learning track icons, getting-started cards, cookbook placeholder, and theme toggle buttons. ([#844](https://github.com/lightspeedwp/.github/issues/844), [#843](https://github.com/lightspeedwp/.github/pull/843)) ### Fixed diff --git a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro index 996a88f1..299d2ad5 100644 --- a/website/src/components/AwesomeGithub/AwesomeGithubNav.astro +++ b/website/src/components/AwesomeGithub/AwesomeGithubNav.astro @@ -45,7 +45,6 @@ const isCatActive = (linkPath: string): boolean => {