86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useAppLayoutStore } from "@/components/layout/store"
|
|
import { NavLink, Space } from "@mantine/core"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import { useState } from "react"
|
|
import { MenuItem } from "../common"
|
|
import { ClientIcon } from "./ClientIcon"
|
|
|
|
interface LinksGroupProps {
|
|
item: MenuItem
|
|
offset?: number
|
|
initiallyOpened?: boolean
|
|
routerUrl?: string
|
|
toggleMobile?: () => void
|
|
}
|
|
|
|
export function LinksGroup({
|
|
item,
|
|
offset = 0,
|
|
initiallyOpened,
|
|
routerUrl,
|
|
toggleMobile,
|
|
}: LinksGroupProps) {
|
|
const hasLinks = Array.isArray(item.items) && item.items.length > 0
|
|
const pathname = usePathname()
|
|
|
|
const router = useRouter()
|
|
|
|
const { updateLinksOpenStatus } = useAppLayoutStore()
|
|
|
|
const linksOpenStatus = useAppLayoutStore.getState().linksOpenStatus
|
|
|
|
let storeOpened = linksOpenStatus[`${routerUrl}/${item.url}`] || false
|
|
|
|
const [opened, setOpened] = useState(initiallyOpened && storeOpened)
|
|
|
|
let childrenOffset = 24 + (offset || 0)
|
|
|
|
const children = hasLinks
|
|
? item.items!.map((subItem) => (
|
|
<LinksGroup
|
|
key={subItem.url}
|
|
item={subItem}
|
|
offset={childrenOffset}
|
|
initiallyOpened={initiallyOpened}
|
|
routerUrl={`${routerUrl}/${item.url}`}
|
|
toggleMobile={toggleMobile}
|
|
/>
|
|
))
|
|
: null
|
|
|
|
return (
|
|
<>
|
|
<NavLink
|
|
// href={`/${routerUrl}/${item.url}`}
|
|
onClick={() => {
|
|
setOpened(!opened)
|
|
updateLinksOpenStatus(`${routerUrl}/${item.url}`, !opened)
|
|
!hasLinks && router.push(`/${routerUrl}/${item.url}`)
|
|
!hasLinks && toggleMobile && toggleMobile()
|
|
}}
|
|
opened={opened}
|
|
label={item.title}
|
|
noWrap={true}
|
|
active={
|
|
hasLinks ? false : pathname.startsWith(`/${routerUrl}/${item.url}`)
|
|
}
|
|
leftSection={
|
|
<>
|
|
<Space w={offset} />
|
|
{item.icon && (
|
|
<ClientIcon
|
|
icon={item.icon}
|
|
style={{ width: "1rem", height: "1rem" }}
|
|
/>
|
|
)}
|
|
</>
|
|
}
|
|
childrenOffset={0}>
|
|
{children}
|
|
</NavLink>
|
|
</>
|
|
)
|
|
}
|