Repository navigation
✨ Add light/dark theming support to the mega menu - #146
Merged
Merged
Conversation
Drive the menu's colours from CSS-variable design tokens (foreground, background, muted-foreground, hairline) that mirror SSW.Website's styles.css, so the menu themes under a `.dark` scope with no `dark:` utilities. Swap the logo to the white-with-red dark-mode asset, mute + gap the nav chevrons, and tokenise the bar text/dividers. Adds a `prepare` build so the package can be consumed as a git dependency. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Point the dark logo at the consuming site's /images/ssw-logo-darkmode.svg (matches the footer) instead of the CDN URL. Show the tagline only at 2xl so the nav doesn't overflow at the xl breakpoint on the themed homepage. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Size both logos by their natural aspect (h-14 w-auto) instead of squeezing the wide dark 332×98 mark into a 100×60 box, so it no longer renders tiny. Make the mobile hamburger use the foreground token so it's visible (white) in dark mode. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…n homepage Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
… match - Dropdown panel/sidebar/text get dark variants (only under .dark, so every non-home route stays byte-identical) - Light logo uses the recolored twin of the dark lockup SVG so the two themes share identical geometry Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The classicMenu/featured widget links kept text-ssw-black, so the right-hand "Latest Videos"/"Support" lists rendered dark-on-dark in the homepage's dark dropdown. Add dark:text-white (and dark:text-white/60 for descriptions). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reorder dark: variants after the responsive/size variants in Logo and the dropdown sidebar (prettier-plugin-tailwindcss); no rendered change. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Products can supply a second icon shown only under the homepage's .dark scope. MegaIcon renders both the default and dark icons and toggles them with dark:hidden / hidden dark:block (CSS-only, no JS, no flash); products with no dark variant render the single default icon exactly as before. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
useMenuItems fetched a hardcoded production endpoint, so preview slots (and local dev) always rendered prod's menu and never their own content. Fetch same-origin on ssw.com.au / *.azurewebsites.net / localhost, and keep the canonical production URL as the fallback for any other consumer. Production behaviour is unchanged — its own origin IS the canonical URL. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Below lg the bar shows only the logo and hamburger; the side actions (a consumer override like the homepage's, or the default phone + region) move into the hamburger panel, which also carries the search box. From lg up the bar is unchanged. The panel takes a mobileMenuClassName so a themed consumer can re-apply its scope to the portaled dialog (the homepage passes "dark" so the panel gets the dark tokens), and small screens get some nav-bar y-padding. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
New nav behaviour (collapse to logo + hamburger below lg, actions in the hamburger), an optional mobileMenuClassName for theming the portaled panel, and optional dark-mode product icons — all backward compatible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
TL;DR
The v3 SSW.Website homepage is getting a light/dark toggle, and the mega menu needs to theme with it. This drives the menu's colours from CSS-variable design tokens (mirroring
SSW.Website/styles.css) so it flips under a.darkscope with nodark:utilities.What changed
tailwind.config.jsmapsforeground/background/muted-foreground/hairlineto CSS vars +darkMode: "selector";lib/index.css/src/index.cssdefine the:root+.darkvalues.text-ssw-black/bg-gray-*.preparebuild — letsSSW.Websiteconsume this branch as a git dependency for preview deploys until it's published.Reviewer notes
:root, so consumers without a.darkscope render as before.Links
🤖 Generated with Claude Code