From b5629297a0ddfa4857cfba1f013222670973fbab Mon Sep 17 00:00:00 2001 From: Nicolai Rosdahl Tellefsen Date: Tue, 3 Dec 2024 22:52:45 +0100 Subject: [PATCH 1/7] feat: add combined hamburger and hover navigation --- src/components/Header.astro | 114 +++++++++--------------- src/components/HeaderNavigation.astro | 88 ++++++++++++++++++ src/components/navigation/NavItem.astro | 69 +++++++------- src/types/index.ts | 1 + src/types/navigation.ts | 7 ++ 5 files changed, 172 insertions(+), 107 deletions(-) create mode 100644 src/components/HeaderNavigation.astro create mode 100644 src/types/navigation.ts diff --git a/src/components/Header.astro b/src/components/Header.astro index 3c6c9dd..5eaa414 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,5 +1,34 @@ --- -import NavItem from "./navigation/NavItem.astro"; +import type { NavItem } from "../types"; +import HeaderNavigation from "./HeaderNavigation.astro"; + +const NAVIGATION: NavItem[] = [ + { + title: "Om TG", + path: "/about", + items: [ + { title: "Bli utstiller", path: "/about/expo" }, + { title: "Bli sponsor", path: "/about/sponsor" }, + ], + }, + { + title: "Konkurranser", + items: [ + { title: "Kreative", path: "/competitions/creative" }, + { title: "Esport", path: "/competitions/esport" }, + ], + }, + { title: "Kontakt oss", path: "/contact" }, + { + title: "Billetter", + path: "/tickets", + items: [ + { title: "Vilkår", path: "/tickets/terms-and-conditions" }, + { title: "Arrangementsregler", path: "/event/rules" }, + { title: "Konstruksjonsregler", path: "/event/construction-rules" }, + ], + }, +]; --- + + diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro index 0168c21..8f58568 100644 --- a/src/components/navigation/NavItem.astro +++ b/src/components/navigation/NavItem.astro @@ -1,37 +1,34 @@ --- -export interface Props { - title: string; - path?: string; - subAlignment?: "left" | "right"; - subItems?: SubItem[]; +import type { NavItem } from "../../types"; +export interface Props extends NavItem { class?: string; -} -interface SubItem { - title: string; - path: string; + subAlignment?: "left" | "right"; + mode?: "click" | "hover"; } const { title, path, - subItems = [], + items = [], subAlignment = "left", class: className = "", + mode = "click", } = Astro.props; + const key = `${title.toLowerCase().replace(" ", "-")}-${path || ""}`; const clickable = !!path; -const expandable = !!subItems.length; +const expandable = !!items.length; const TextContainer = clickable ? "a" : "span"; const isActive = path === Astro.url.pathname || - subItems.some((item) => item.path === Astro.url.pathname); + items.some((item) => item.path === Astro.url.pathname); -const subItemsWithParent: Array< - SubItem & { +const itemsWithParent: Array< + NavItem & { touchOnly?: boolean; } -> = path ? [{ path, title, touchOnly: true }, ...subItems] : subItems; +> = path ? [{ path, title, touchOnly: true }, ...items] : items; ---
  • Date: Tue, 3 Dec 2024 23:21:49 +0100 Subject: [PATCH 2/7] chore: introduce hamburger mode --- src/components/Header.astro | 3 +-- src/components/HeaderNavigation.astro | 7 ++++--- src/components/navigation/NavItem.astro | 15 +++++++++++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 5eaa414..59b14be 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -82,7 +82,6 @@ const NAVIGATION: NavItem[] = [
    @@ -131,7 +130,7 @@ const NAVIGATION: NavItem[] = [
    diff --git a/src/components/HeaderNavigation.astro b/src/components/HeaderNavigation.astro index 6713a7a..10ceb76 100644 --- a/src/components/HeaderNavigation.astro +++ b/src/components/HeaderNavigation.astro @@ -4,7 +4,7 @@ import NavItemComponent from "./navigation/NavItem.astro"; interface Props { navigationItems: NavItem[]; - mode: "click" | "hover"; + hamburger?: boolean; prioritized?: boolean; class?: string; } @@ -12,8 +12,8 @@ interface Props { const { navigationItems, class: classNames = "", - mode, prioritized = false, + hamburger = false, } = Astro.props; const lastItemIndex = navigationItems.length - 1; @@ -80,7 +80,8 @@ const lastItemIndex = navigationItems.length - 1; title={title} path={path} items={items} - mode={mode} + hamburger={hamburger} + interactionMode={hamburger ? "click" : "hover"} subAlignment={index === lastItemIndex ? "right" : "left"} /> )) diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro index 8f58568..289e522 100644 --- a/src/components/navigation/NavItem.astro +++ b/src/components/navigation/NavItem.astro @@ -3,7 +3,8 @@ import type { NavItem } from "../../types"; export interface Props extends NavItem { class?: string; subAlignment?: "left" | "right"; - mode?: "click" | "hover"; + interactionMode?: "click" | "hover"; + hamburger?: boolean; } const { @@ -12,7 +13,8 @@ const { items = [], subAlignment = "left", class: className = "", - mode = "click", + interactionMode = "click", + hamburger = false, } = Astro.props; const key = `${title.toLowerCase().replace(" ", "-")}-${path || ""}`; @@ -104,7 +106,7 @@ const itemsWithParent: Array<
  • Date: Tue, 3 Dec 2024 23:22:39 +0100 Subject: [PATCH 3/7] fix: handle touch device case on hover nav --- src/components/navigation/NavItem.astro | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro index 289e522..1ebaaeb 100644 --- a/src/components/navigation/NavItem.astro +++ b/src/components/navigation/NavItem.astro @@ -72,11 +72,17 @@ const itemsWithParent: Array< }); } + const isTouchDevice = + "ontouchstart" in window || + navigator.maxTouchPoints > 0 || + // @ts-ignore + navigator.msMaxTouchPoints > 0; + navItems.forEach(({ mainLink, navItem, trigger, subMenu }, index: number) => { const interactionMode = navItem.getAttribute("data-mode") || "click"; navItem.classList.add(`interaction-mode-${interactionMode}`); - if (interactionMode === "hover") { + if (interactionMode === "hover" && !isTouchDevice) { navItem.addEventListener("mouseenter", () => { closeAll(); expand(index, true); From 3a49d59a064d06589ee65010ca2fccc38d2a4112 Mon Sep 17 00:00:00 2001 From: Nicolai Rosdahl Tellefsen Date: Wed, 4 Dec 2024 00:07:43 +0100 Subject: [PATCH 4/7] chore: reorder ticket nav item --- src/components/Header.astro | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 59b14be..b7acc55 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -11,14 +11,6 @@ const NAVIGATION: NavItem[] = [ { title: "Bli sponsor", path: "/about/sponsor" }, ], }, - { - title: "Konkurranser", - items: [ - { title: "Kreative", path: "/competitions/creative" }, - { title: "Esport", path: "/competitions/esport" }, - ], - }, - { title: "Kontakt oss", path: "/contact" }, { title: "Billetter", path: "/tickets", @@ -28,6 +20,14 @@ const NAVIGATION: NavItem[] = [ { title: "Konstruksjonsregler", path: "/event/construction-rules" }, ], }, + { + title: "Konkurranser", + items: [ + { title: "Kreative", path: "/competitions/creative" }, + { title: "Esport", path: "/competitions/esport" }, + ], + }, + { title: "Kontakt oss", path: "/contact" }, ]; --- From adeb80056b8e2bfc7e57a79527c4ed1654752e80 Mon Sep 17 00:00:00 2001 From: Nicolai Rosdahl Tellefsen Date: Wed, 4 Dec 2024 00:08:11 +0100 Subject: [PATCH 5/7] chore: hide top nav on mobile --- src/components/Header.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index b7acc55..06be382 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -81,7 +81,7 @@ const NAVIGATION: NavItem[] = [
    From 86492bf8e08b175255650e1c2fc9cf7cfa5b82a2 Mon Sep 17 00:00:00 2001 From: Nicolai Rosdahl Tellefsen Date: Wed, 4 Dec 2024 00:10:02 +0100 Subject: [PATCH 6/7] fix: various multi navigation issues --- src/components/HeaderNavigation.astro | 20 +++++--------------- src/components/navigation/NavItem.astro | 13 +++++++------ 2 files changed, 12 insertions(+), 21 deletions(-) diff --git a/src/components/HeaderNavigation.astro b/src/components/HeaderNavigation.astro index 10ceb76..a760a97 100644 --- a/src/components/HeaderNavigation.astro +++ b/src/components/HeaderNavigation.astro @@ -33,26 +33,16 @@ const lastItemIndex = navigationItems.length - 1; return; } - // Store actual required width for each item, doing this initially - // avoids need for overflow style on container - // Adjust initial value to add preferred extra margin - let usedWidth = 0; - items.forEach((item) => { - // Adjust value to account for margin on each item - const margin = 24; - usedWidth += margin + (item?.scrollWidth || 0); - item.setAttribute("data-required-width", usedWidth.toString(10)); - }); - return () => { const menuWidth = menu.clientWidth; + // Adjust values to add preferred extra margins + const margin = 24; + let usedWidth = 50; items.forEach((item) => { item.classList.remove("hidden"); + usedWidth += margin + (item?.scrollWidth || 0); - if ( - parseInt(item.getAttribute("data-required-width") || "0", 10) >= - menuWidth - ) { + if (usedWidth >= menuWidth) { item.classList.add("hidden"); } }); diff --git a/src/components/navigation/NavItem.astro b/src/components/navigation/NavItem.astro index 1ebaaeb..3bdade3 100644 --- a/src/components/navigation/NavItem.astro +++ b/src/components/navigation/NavItem.astro @@ -115,9 +115,9 @@ const itemsWithParent: Array< data-mode={interactionMode} >
    - + {title} { @@ -156,10 +156,11 @@ const itemsWithParent: Array< expandable ? (