From 542d0c5555372bcc3baa44c37a40c43a9bfebd58 Mon Sep 17 00:00:00 2001 From: Daniel Lehr Date: Fri, 16 Feb 2024 20:24:11 +0100 Subject: [PATCH 1/7] Center chevron indicator --- src/components/navigation/NavigationCategory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/navigation/NavigationCategory.tsx b/src/components/navigation/NavigationCategory.tsx index 3cae5bb4..e423bbbf 100644 --- a/src/components/navigation/NavigationCategory.tsx +++ b/src/components/navigation/NavigationCategory.tsx @@ -47,7 +47,7 @@ export function NavigationCategory({ navItem, isRoot }: Props) {
  • Date: Fri, 16 Feb 2024 20:25:02 +0100 Subject: [PATCH 2/7] Add some smooth category expand/collapse transitions --- .../navigation/NavigationCategory.tsx | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/navigation/NavigationCategory.tsx b/src/components/navigation/NavigationCategory.tsx index e423bbbf..a06bb848 100644 --- a/src/components/navigation/NavigationCategory.tsx +++ b/src/components/navigation/NavigationCategory.tsx @@ -1,7 +1,7 @@ import { NavItem } from "@/lib/interfaces"; import { hasActiveNavLinkItem } from "@/lib/utils/has-active-nav-link-item"; import clsx from "clsx"; -import { ChevronRightIcon, ChevronDownIcon } from "lucide-react"; +import { ChevronRightIcon } from "lucide-react"; import { usePathname, useRouter } from "next/navigation"; import { useEffect, useState } from "react"; import { NavigationLinkItem } from "./NavigationLinkItem"; @@ -55,26 +55,26 @@ export function NavigationCategory({ navItem, isRoot }: Props) { onClick={onClick} > {navItem.label} - {isCollapsed ? ( - - ) : ( - - )} +
    • ); From 6ad11484f4bb6010526b3789206368349e17b177 Mon Sep 17 00:00:00 2001 From: Daniel Lehr Date: Fri, 16 Feb 2024 20:27:31 +0100 Subject: [PATCH 3/7] =?UTF-8?q?Allow=20=E2=88=9E=20expand/collapse?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigation/NavigationCategory.tsx | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/components/navigation/NavigationCategory.tsx b/src/components/navigation/NavigationCategory.tsx index a06bb848..3e631313 100644 --- a/src/components/navigation/NavigationCategory.tsx +++ b/src/components/navigation/NavigationCategory.tsx @@ -23,6 +23,19 @@ function isCategoryExpanded(navItem: NavItem, pathname: string): boolean { return navItem.isExpandedByDefault || hasActiveNavLinkItem(navItem, pathname); } +const recursiveHasActiveItemInCategory = ( + navItem: NavItem, + pathname: string, +): boolean => { + if (navItem.href && navItem.href === pathname) return true; + + return ( + navItem.items?.some((item) => + recursiveHasActiveItemInCategory(item, pathname), + ) ?? false + ); +}; + export function NavigationCategory({ navItem, isRoot }: Props) { const pathname = usePathname(); const router = useRouter(); @@ -33,7 +46,13 @@ export function NavigationCategory({ navItem, isRoot }: Props) { const onClick = () => { if (isCollapsed) { - router.push(categoryHref); + const hasActiveItemInCategory = recursiveHasActiveItemInCategory( + navItem, + pathname, + ); + + if (!hasActiveItemInCategory) router.push(categoryHref); + setIsCollapsed(false); } else { setIsCollapsed(true); } @@ -41,7 +60,7 @@ export function NavigationCategory({ navItem, isRoot }: Props) { useEffect(() => { setIsCollapsed(!isCategoryExpanded(navItem, pathname)); - }, [pathname, setIsCollapsed, navItem]); + }, [pathname, navItem]); return (
  • From 466db939ec4842c44b1530f20d33c09f8bf3693d Mon Sep 17 00:00:00 2001 From: Daniel Lehr Date: Fri, 16 Feb 2024 20:55:27 +0100 Subject: [PATCH 4/7] No auto collapse --- .../navigation/NavigationCategory.tsx | 30 +++---------------- 1 file changed, 4 insertions(+), 26 deletions(-) diff --git a/src/components/navigation/NavigationCategory.tsx b/src/components/navigation/NavigationCategory.tsx index 3e631313..7d2aa452 100644 --- a/src/components/navigation/NavigationCategory.tsx +++ b/src/components/navigation/NavigationCategory.tsx @@ -3,7 +3,7 @@ import { hasActiveNavLinkItem } from "@/lib/utils/has-active-nav-link-item"; import clsx from "clsx"; import { ChevronRightIcon } from "lucide-react"; import { usePathname, useRouter } from "next/navigation"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { NavigationLinkItem } from "./NavigationLinkItem"; type Props = { @@ -23,19 +23,6 @@ function isCategoryExpanded(navItem: NavItem, pathname: string): boolean { return navItem.isExpandedByDefault || hasActiveNavLinkItem(navItem, pathname); } -const recursiveHasActiveItemInCategory = ( - navItem: NavItem, - pathname: string, -): boolean => { - if (navItem.href && navItem.href === pathname) return true; - - return ( - navItem.items?.some((item) => - recursiveHasActiveItemInCategory(item, pathname), - ) ?? false - ); -}; - export function NavigationCategory({ navItem, isRoot }: Props) { const pathname = usePathname(); const router = useRouter(); @@ -46,22 +33,13 @@ export function NavigationCategory({ navItem, isRoot }: Props) { const onClick = () => { if (isCollapsed) { - const hasActiveItemInCategory = recursiveHasActiveItemInCategory( - navItem, - pathname, - ); - - if (!hasActiveItemInCategory) router.push(categoryHref); + if (!hasActiveNavLinkItem(navItem, pathname)) router.push(categoryHref); setIsCollapsed(false); } else { setIsCollapsed(true); } }; - useEffect(() => { - setIsCollapsed(!isCategoryExpanded(navItem, pathname)); - }, [pathname, navItem]); - return (
  • -
    +
    {navItem.items?.map((innerItem) => innerItem.items?.length ? ( From 196da7447b46b6779054906959ee6758a22a2688 Mon Sep 17 00:00:00 2001 From: Daniel Lehr Date: Fri, 16 Feb 2024 20:55:34 +0100 Subject: [PATCH 5/7] Adjust spacings --- src/components/Layout.tsx | 2 +- src/components/navigation/Navigation.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index a1253fbc..096704f5 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -10,7 +10,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
    -
    +
    diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx index aa97f49b..46969f2e 100644 --- a/src/components/navigation/Navigation.tsx +++ b/src/components/navigation/Navigation.tsx @@ -11,7 +11,7 @@ type Props = { export function Navigation({ className }: Props) { return (