ironriders/4180-WebsiteV2
9
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity Actions

WIP: feat: revamp navbar to add accessability, darkmode view-transition, popover api, and other features. #6

Draft
Iprobablydontknowwhatimdoing wants to merge 1 commit from new-navbar into main
pull from: new-navbar
merge into: ironriders:main
Conversation 3 Commits 1 Files changed 29 +1107 -436
Iprobablydontknowwhatimdoing commented 2026-03-21 22:11:25 +00:00 (Migrated from github.com)
Copy link

Please summarize your changes here in the description.

Please summarize your changes here in the description.
eBooked (Migrated from github.com) reviewed 2026-03-21 22:11:25 +00:00
copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed 2026-03-21 22:17:59 +00:00
copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment
Copy link

Pull request overview

This PR revamps the site navigation to a component-based header/nav system using the Popover API, adds a skip link + motion/print styling, and reworks dark mode handling (including view transitions) while removing legacy dropdown/mobile-menu scripts/components.

Changes:

  • Replace legacy Tailwind-based navbar + dropdown JS with new src/components/nav/* header/nav components driven by Data.ts.
  • Add new global/reset/print CSS and header/nav component CSS (popover-based desktop dropdowns + mobile slide-in).
  • Replace old darkmode/dropdown/mobile menu scripts with a new init.js + cookie utilities.

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 13 comments.

Show a summary per file
File Description
src/styles/reset.css Adds baseline typography/media/reset rules and reduced-motion handling.
src/styles/print.css Adds print stylesheet for hiding nav/popovers and formatting links/headings.
src/styles/global.css Introduces layered imports, dark variant logic, theme variables, and link styling.
src/styles/components/theme-changer.css Implements theme toggle UI + color-scheme + view-transition styling.
src/styles/components/skip-link.css Styles skip-to-content link behavior.
src/styles/components/header/theme-mobile-toggle.css Styles theme toggle + mobile hamburger button visuals.
src/styles/components/header/print-header.css Adds header-scoped print styles (currently duplicates print.css).
src/styles/components/header/mobile-nav.css Adds mobile popover nav layout/animation styles.
src/styles/components/header/header.css Adds header positioning, scroll behavior, popover resets, and view-transition clip-path.
src/styles/components/header/header-branding.css Styles logo/branding layout in the header.
src/styles/components/header/desktop-nav.css Adds responsive desktop nav + popover dropdown presentation.
src/scripts/init.js New initialization for keyboard support, popover escape handling, theme toggle + view transitions.
src/scripts/cookieUtils.js Adds cookie helpers for persisting theme state.
src/resources/IronLogo.png Adds a logo asset (currently stored as a data URL string rather than a real PNG).
src/pages/index.astro Tweaks CTA block styling and changes “Contact” link target.
src/layouts/Layout.astro Replaces inline navbar markup with <Header /> and adds the new init script reference.
src/components/nav/ThemeAndMobileToggle.astro Adds theme toggle + mobile nav toggle UI.
src/components/nav/NavLink.astro Adds shared nav link component with aria-current support.
src/components/nav/MobileNav.astro Adds mobile nav popover rendering from Data.ts.
src/components/nav/HeaderBranding.astro Adds header logo/branding component using astro:assets.
src/components/nav/Header.astro Adds composed header with skip link, branding, desktop nav, and mobile nav.
src/components/nav/DesktopNav.astro Adds desktop nav with popover dropdown menus rendered from Data.ts.
src/components/nav/Data.ts Centralizes navigation link structure for desktop/mobile rendering.
src/scripts/phoneDropdown.js Removes legacy phone dropdown JS.
src/scripts/mobileMenu.js Removes legacy mobile menu JS.
src/scripts/dropdown.js Removes legacy dropdown JS.
src/scripts/darkmode.js Removes legacy localStorage-based dark mode script.
src/components/DropDownButton.astro Removes legacy dropdown component.
src/components/Button.astro Removes legacy button component used by old navbar.
Comments suppressed due to low confidence (1)

src/layouts/Layout.astro:41

  • The header includes a skip link to #main-content, and several styles target main#main-content, but this <main> element has no id. Add id="main-content" so the skip link works and print/header offsets apply correctly.
    <main>
      <slot />
    </main>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

## Pull request overview This PR revamps the site navigation to a component-based header/nav system using the Popover API, adds a skip link + motion/print styling, and reworks dark mode handling (including view transitions) while removing legacy dropdown/mobile-menu scripts/components. **Changes:** - Replace legacy Tailwind-based navbar + dropdown JS with new `src/components/nav/*` header/nav components driven by `Data.ts`. - Add new global/reset/print CSS and header/nav component CSS (popover-based desktop dropdowns + mobile slide-in). - Replace old darkmode/dropdown/mobile menu scripts with a new `init.js` + cookie utilities. ### Reviewed changes Copilot reviewed 29 out of 29 changed files in this pull request and generated 13 comments. <details> <summary>Show a summary per file</summary> | File | Description | | ---- | ----------- | | src/styles/reset.css | Adds baseline typography/media/reset rules and reduced-motion handling. | | src/styles/print.css | Adds print stylesheet for hiding nav/popovers and formatting links/headings. | | src/styles/global.css | Introduces layered imports, dark variant logic, theme variables, and link styling. | | src/styles/components/theme-changer.css | Implements theme toggle UI + color-scheme + view-transition styling. | | src/styles/components/skip-link.css | Styles skip-to-content link behavior. | | src/styles/components/header/theme-mobile-toggle.css | Styles theme toggle + mobile hamburger button visuals. | | src/styles/components/header/print-header.css | Adds header-scoped print styles (currently duplicates `print.css`). | | src/styles/components/header/mobile-nav.css | Adds mobile popover nav layout/animation styles. | | src/styles/components/header/header.css | Adds header positioning, scroll behavior, popover resets, and view-transition clip-path. | | src/styles/components/header/header-branding.css | Styles logo/branding layout in the header. | | src/styles/components/header/desktop-nav.css | Adds responsive desktop nav + popover dropdown presentation. | | src/scripts/init.js | New initialization for keyboard support, popover escape handling, theme toggle + view transitions. | | src/scripts/cookieUtils.js | Adds cookie helpers for persisting theme state. | | src/resources/IronLogo.png | Adds a logo asset (currently stored as a data URL string rather than a real PNG). | | src/pages/index.astro | Tweaks CTA block styling and changes “Contact” link target. | | src/layouts/Layout.astro | Replaces inline navbar markup with `<Header />` and adds the new init script reference. | | src/components/nav/ThemeAndMobileToggle.astro | Adds theme toggle + mobile nav toggle UI. | | src/components/nav/NavLink.astro | Adds shared nav link component with `aria-current` support. | | src/components/nav/MobileNav.astro | Adds mobile nav popover rendering from `Data.ts`. | | src/components/nav/HeaderBranding.astro | Adds header logo/branding component using `astro:assets`. | | src/components/nav/Header.astro | Adds composed header with skip link, branding, desktop nav, and mobile nav. | | src/components/nav/DesktopNav.astro | Adds desktop nav with popover dropdown menus rendered from `Data.ts`. | | src/components/nav/Data.ts | Centralizes navigation link structure for desktop/mobile rendering. | | src/scripts/phoneDropdown.js | Removes legacy phone dropdown JS. | | src/scripts/mobileMenu.js | Removes legacy mobile menu JS. | | src/scripts/dropdown.js | Removes legacy dropdown JS. | | src/scripts/darkmode.js | Removes legacy localStorage-based dark mode script. | | src/components/DropDownButton.astro | Removes legacy dropdown component. | | src/components/Button.astro | Removes legacy button component used by old navbar. | </details> <details> <summary>Comments suppressed due to low confidence (1)</summary> **src/layouts/Layout.astro:41** * The header includes a skip link to `#main-content`, and several styles target `main#main-content`, but this `<main>` element has no `id`. Add `id="main-content"` so the skip link works and print/header offsets apply correctly. ``` <main> <slot /> </main> ``` </details> --- 💡 <a href="/IronRiders/4180-WebsiteV2/new/main?filename=.github/instructions/*.instructions.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add Copilot custom instructions</a> for smarter, more guided reviews. <a href="https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn how to get started</a>.
src/components/nav/Data.ts Outdated
@ -0,0 +18,4 @@
},
{
label: "Contact",
href: "/contact"
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:57 +00:00
Copy link

Several nav hrefs point to routes that don't exist in src/pages (e.g., /contact in mobileCTA). This will ship broken links in the global navigation unless the corresponding pages are added.

        href: "#contact"
Several nav hrefs point to routes that don't exist in `src/pages` (e.g., `/contact` in `mobileCTA`). This will ship broken links in the global navigation unless the corresponding pages are added. ```suggestion href: "#contact" ```
Lyra marked this conversation as resolved
src/components/nav/Data.ts Outdated
@ -0,0 +71,4 @@
{
label: "Mentorship",
href: "/join-mentor"
},
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:58 +00:00
Copy link

navigationData includes hrefs like /mentors, /chat, /github, and /join-mentor, but there are no matching pages/routes in src/pages (existing routes include /discord, /digital-resources, etc.). Update these hrefs to valid internal routes or use external URLs where appropriate to avoid 404s from the main navbar.

`navigationData` includes hrefs like `/mentors`, `/chat`, `/github`, and `/join-mentor`, but there are no matching pages/routes in `src/pages` (existing routes include `/discord`, `/digital-resources`, etc.). Update these hrefs to valid internal routes or use external URLs where appropriate to avoid 404s from the main navbar.
Lyra marked this conversation as resolved
src/components/nav/HeaderBranding.astro Outdated
@ -0,0 +8,4 @@
id="header-branding-link"
>
<Image
src="data:image/webp;base64,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"
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:57 +00:00
Copy link

Logo is imported but never used, and the <Image> src is a huge inlined data URL string. This increases HTML size and bypasses Astro's asset pipeline. Prefer using src={Logo} (with a real image file) and remove the hard-coded base64 string and any unused import.

        src={Logo}
`Logo` is imported but never used, and the `<Image>` `src` is a huge inlined data URL string. This increases HTML size and bypasses Astro's asset pipeline. Prefer using `src={Logo}` (with a real image file) and remove the hard-coded base64 string and any unused import. ```suggestion src={Logo} ```
Lyra marked this conversation as resolved
src/components/nav/ThemeAndMobileToggle.astro Outdated
@ -0,0 +1,30 @@
---
import '../../styles/components/theme-mobile-toggle.css'
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:58 +00:00
Copy link

This CSS import path does not exist (src/styles/components/theme-mobile-toggle.css), while the file added in this PR is under src/styles/components/header/theme-mobile-toggle.css. Fix the import path so the mobile toggle styles are actually included and the build doesn't fail with a missing file.

import '../../styles/components/header/theme-mobile-toggle.css'
This CSS import path does not exist (`src/styles/components/theme-mobile-toggle.css`), while the file added in this PR is under `src/styles/components/header/theme-mobile-toggle.css`. Fix the import path so the mobile toggle styles are actually included and the build doesn't fail with a missing file. ```suggestion import '../../styles/components/header/theme-mobile-toggle.css' ```
src/layouts/Layout.astro Outdated
@ -37,3 +13,1 @@
}
})();
</script>
<script src="../scripts/init.js"></script> <!-- Handles darkmode & space-to-click for accessibility -->
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:58 +00:00
Copy link

Import path uses ../components/Nav/Header.astro, but the directory in this repo is src/components/nav/ (lowercase). This will fail on case-sensitive filesystems (Linux CI/production). Update the import to match the actual path casing.

import Header from "../components/nav/Header.astro";
Import path uses `../components/Nav/Header.astro`, but the directory in this repo is `src/components/nav/` (lowercase). This will fail on case-sensitive filesystems (Linux CI/production). Update the import to match the actual path casing. ```suggestion import Header from "../components/nav/Header.astro"; ```
src/layouts/Layout.astro Outdated
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:56 +00:00
Copy link

init.js is loaded as a classic script, but it contains an ES module import statement. Without type="module" (and a bundler-resolved URL), this will throw in the browser and prevent initialization. Load it as a module and ensure the path is emitted by Astro/Vite (e.g., import the script URL in frontmatter or move it under public/).

`init.js` is loaded as a classic script, but it contains an ES module `import` statement. Without `type="module"` (and a bundler-resolved URL), this will throw in the browser and prevent initialization. Load it as a module and ensure the path is emitted by Astro/Vite (e.g., import the script URL in frontmatter or move it under `public/`).
Lyra marked this conversation as resolved
src/pages/index.astro Outdated
@ -73,4 +73,4 @@
class="p-6 rounded-lg bg-light-100 hover:bg-light-0 dark:bg-dark-600 dark:hover:bg-dark-400 border border-light-300 dark:border-dark-400
transition-colors duration-200"
>
<span class="font-mono font-medium text-light-1000 dark:text-dark-0">Contact Us</span>
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:56 +00:00
Copy link

This changes the CTA link to /contact, but there is no src/pages/contact.astro (or other route) in the repository, so it will 404. Either add the contact page/route, or point this back to an existing page (e.g., /digital-resources as before).

				<a href="/digital-resources"
This changes the CTA link to `/contact`, but there is no `src/pages/contact.astro` (or other route) in the repository, so it will 404. Either add the contact page/route, or point this back to an existing page (e.g., `/digital-resources` as before). ```suggestion <a href="/digital-resources" ```
Lyra marked this conversation as resolved
src/resources/IronLogo.png Outdated
@ -0,0 +1 @@
data:image/webp;base64,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
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:56 +00:00
Copy link

This file is named .png, but its contents are a text data:image/webp;base64,... URL. That won't be treated as a valid PNG asset and is likely to break if imported/served as an image. Store the actual binary image file here (or rename to .txt/move the data URL into code if that's intentional).

# Placeholder for IronLogo PNG binary data. Replace this line with actual PNG binary contents.
This file is named `.png`, but its contents are a text `data:image/webp;base64,...` URL. That won't be treated as a valid PNG asset and is likely to break if imported/served as an image. Store the actual binary image file here (or rename to `.txt`/move the data URL into code if that's intentional). ```suggestion # Placeholder for IronLogo PNG binary data. Replace this line with actual PNG binary contents. ```
Lyra marked this conversation as resolved
src/scripts/cookieUtils.js Outdated
@ -0,0 +8,4 @@
var cookiestring = RegExp("" + cookiename + "[^;]+").exec(document.cookie);
return decodeURIComponent(
!!cookiestring ? cookiestring.toString().replace(/^[^=]+./, "") : ""
);
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:59 +00:00
Copy link

getCookie uses a regex that can match partial cookie names (e.g., searching for theme can match theme2) and doesn't handle the ; delimiter reliably. Use a stricter pattern like (?:^|;\s*)<name>=([^;]*) (with proper escaping) to avoid incorrect theme detection.


// Escape special characters in a string so it can be used safely in a RegExp.
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

export function getCookie(cookiename) {
  var escapedName = escapeRegExp(cookiename);
  var pattern = "(?:^|;\\s*)" + escapedName + "=([^;]*)";
  var match = document.cookie.match(new RegExp(pattern));
  return match ? decodeURIComponent(match[1]) : "";
`getCookie` uses a regex that can match partial cookie names (e.g., searching for `theme` can match `theme2`) and doesn't handle the `; ` delimiter reliably. Use a stricter pattern like `(?:^|;\s*)<name>=([^;]*)` (with proper escaping) to avoid incorrect theme detection. ```suggestion // Escape special characters in a string so it can be used safely in a RegExp. function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } export function getCookie(cookiename) { var escapedName = escapeRegExp(cookiename); var pattern = "(?:^|;\\s*)" + escapedName + "=([^;]*)"; var match = document.cookie.match(new RegExp(pattern)); return match ? decodeURIComponent(match[1]) : ""; ```
src/scripts/init.js Outdated
@ -0,0 +43,4 @@
window.matchMedia("(prefers-reduced-motion: reduce)").matches
) {
changeTheme(toDark);
return;
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:58 +00:00
Copy link

The theme toggle handler calls e.preventDefault() on the checkbox click, which prevents the checkbox from toggling. Since toDark is read from e.target.checked, the value will never change and the theme toggle can become a no-op. Use a change listener (preferred) or avoid preventDefault and read the updated checked state.

The theme toggle handler calls `e.preventDefault()` on the checkbox click, which prevents the checkbox from toggling. Since `toDark` is read from `e.target.checked`, the value will never change and the theme toggle can become a no-op. Use a `change` listener (preferred) or avoid `preventDefault` and read the updated checked state.
src/styles/components/header/print-header.css Outdated
@ -0,0 +43,4 @@
#mobile-site-nav {
display: none !important;
}
:is(a, summary):is(hover, focus) {
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:56 +00:00
Copy link

Selector :is(a, summary):is(hover, focus) is invalid because hover/focus need to be pseudo-classes (:hover, :focus). As written, the rule is ignored. Replace with :is(a, summary):is(:hover, :focus) (or remove if not needed for print).

    :is(a, summary):is(:hover, :focus) {
Selector `:is(a, summary):is(hover, focus)` is invalid because `hover`/`focus` need to be pseudo-classes (`:hover`, `:focus`). As written, the rule is ignored. Replace with `:is(a, summary):is(:hover, :focus)` (or remove if not needed for print). ```suggestion :is(a, summary):is(:hover, :focus) { ```
Lyra marked this conversation as resolved
src/styles/components/header/print-header.css Outdated
@ -0,0 +46,4 @@
:is(a, summary):is(hover, focus) {
anchor-name: --hovered-item;
}
}
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:57 +00:00
Copy link

src/styles/print.css and src/styles/components/header/print-header.css contain the same @media print rules. Duplicating these will make future changes easy to miss and can lead to drift. Consider keeping a single print stylesheet and importing it from the needed layer(s).

@import url("../../print.css") print;
`src/styles/print.css` and `src/styles/components/header/print-header.css` contain the same `@media print` rules. Duplicating these will make future changes easy to miss and can lead to drift. Consider keeping a single print stylesheet and importing it from the needed layer(s). ```suggestion @import url("../../print.css") print; ```
src/styles/print.css Outdated
@ -0,0 +43,4 @@
#mobile-site-nav {
display: none !important;
}
:is(a, summary):is(hover, focus) {
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2026-03-21 22:17:57 +00:00
Copy link

Selector :is(a, summary):is(hover, focus) is invalid because hover/focus need to be pseudo-classes (:hover, :focus). As written, the whole rule is ignored. Replace with :is(a, summary):is(:hover, :focus) (or remove if not needed for print).

    :is(a, summary):is(:hover, :focus) {
Selector `:is(a, summary):is(hover, focus)` is invalid because `hover`/`focus` need to be pseudo-classes (`:hover`, `:focus`). As written, the whole rule is ignored. Replace with `:is(a, summary):is(:hover, :focus)` (or remove if not needed for print). ```suggestion :is(a, summary):is(:hover, :focus) { ```
Iprobablydontknowwhatimdoing (Migrated from github.com) reviewed 2026-03-22 00:04:51 +00:00
src/layouts/Layout.astro
Iprobablydontknowwhatimdoing (Migrated from github.com) commented 2026-03-22 00:04:51 +00:00
Copy link

This is what it will be compiled to

This is what it will be compiled to
Lyra force-pushed new-navbar from 85ba82b8cd to 558339dd72 2026-07-07 02:50:40 +00:00 Compare
This pull request is marked as a work in progress.
View command line instructions

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin new-navbar:new-navbar
git switch new-navbar
Sign in to join this conversation.
Reviewers
No reviewers
eBooked
Labels
Clear labels   
bug
Something isn't working

  
documentation
Improvements or additions to documentation

  
duplicate
This issue or pull request already exists

  
enhancement
New feature or request

  
good first issue
Good for newcomers

  
help wanted
Extra attention is needed

  
invalid
This doesn't seem right

  
question
Further information is requested

  
wontfix
This will not be worked on

  
bug
Something is not working

  
documentation
Adjustments to internal documentation such as javadoc

  
duplicate
This issue or pull request already exists

  
enhancement
New feature

  
help wanted
Need some help

  
invalid
Something is wrong

  
question
More information is needed

  
wontfix
This won't be fixed

No labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
bug
documentation
duplicate
enhancement
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
ironriders/4180-WebsiteV2!6
No description provided.