Use <Link /> on sidebar (#662)

* Use links on sidebar * Reformat
factorialco · Oct 8, 2024 · 2aaebe6 · 2aaebe6
1 parent e8e80bd
commit 2aaebe6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/lib/experimental/Navigation/Sidebar/Menu/index.stories.tsx b/lib/experimental/Navigation/Sidebar/Menu/index.stories.tsx
@@ -25,7 +25,7 @@ export const Default: Story = {
  {
  title: "Root",
  items: [
- { label: "Home", icon: "Home", href: "/home", isActive: true },
+ { label: "Home", icon: "Home", href: "/", exactMatch: true },
  {
  label: "Inbox",
  icon: "Envelope",

diff --git a/lib/experimental/Navigation/Sidebar/Menu/index.tsx b/lib/experimental/Navigation/Sidebar/Menu/index.tsx
@@ -1,5 +1,6 @@
 import { Counter } from "@/experimental/Information/Counter"
 import * as Icons from "@/icons"
+import { Link, useNavigation } from "@/lib/linkHandler"
 import { cn, focusRing } from "@/lib/utils"
 import {
  Collapsible,
@@ -16,7 +17,7 @@ interface MenuItem {
  icon: IconName
  badge?: number
  href: string
- isActive?: boolean
+ exactMatch?: boolean
 }
 
 interface MenuCategory {
@@ -30,7 +31,13 @@ interface MenuProps {
  tree: MenuCategory[]
 }
 
-const MenuItemContent = ({ item }: { item: MenuItem }) => {
+const MenuItemContent = ({
+ item,
+ active,
+}: {
+ item: MenuItem
+ active: boolean
+}) => {
  const IconComponent = Icons[item.icon]
 
  return (
@@ -39,7 +46,7 @@ const MenuItemContent = ({ item }: { item: MenuItem }) => {
  <IconComponent
  className={cn(
  "h-5 w-5",
- item.isActive ? "text-f1-foreground" : "text-f1-icon"
+ active ? "text-f1-foreground" : "text-f1-icon"
  )}
  />
  <span>{item.label}</span>
@@ -49,20 +56,25 @@ const MenuItemContent = ({ item }: { item: MenuItem }) => {
  )
 }
 
-const MenuItem = ({ item }: { item: MenuItem }) => (
- <a
- href={item.href}
- className={cn(
- "flex cursor-pointer items-center rounded py-1.5 pl-1.5 pr-2 no-underline transition-colors",
- focusRing(),
- item.isActive
- ? "bg-f1-background-secondary-hover text-f1-foreground"
- : "hover:bg-f1-background-secondary-hover"
- )}
- >
- <MenuItemContent item={item} />
- </a>
-)
+const MenuItem = ({ item }: { item: MenuItem }) => {
+ const { isActive } = useNavigation()
+ const active = isActive(item.href, { exact: item.exactMatch })
+
+ return (
+ <Link
+ href={item.href}
+ className={cn(
+ "flex cursor-pointer items-center rounded py-1.5 pl-1.5 pr-2 no-underline transition-colors",
+ focusRing(),
+ active
+ ? "bg-f1-background-secondary-hover text-f1-foreground"
+ : "hover:bg-f1-background-secondary-hover"
+ )}
+ >
+ <MenuItemContent item={item} active={active} />
+ </Link>
+ )
+}
 
 const CategoryItem = ({ category }: { category: MenuCategory }) => {
  const [isOpen, setIsOpen] = React.useState(category.isOpen !== false)

diff --git a/lib/lib/linkHandler.tsx b/lib/lib/linkHandler.tsx
@@ -46,7 +46,7 @@ export const useNavigation = () => {
 
  const isActive = (
  path: string | undefined,
- { exact }: { exact: boolean } = { exact: false }
+ { exact = false }: { exact?: boolean } = { exact: false }
  ) => {
  if (currentPath === undefined || path === undefined) return false
  if (exact) return currentPath === path