Your Dashboards
- {userDashboards.map(({ name, route }) => (
-
- ))}
+
+ {userDashboards.map((dashboard) => (
+
+ ))}
+
- ) : null}
+ )}
- {footerLinks.map(({ category, pages }) => (
-
-
{category}
-
- {pages.map(({ name, route }) => (
-
- ))}
+ {/* Resources - Footer Section */}
+
+
Resources
+
+
+
- ))}
+
+
+ {/* Legal Footer */}
+
+
+ Privacy
+
+ •
+
+ Terms
+
+
-
+
}>
@@ -118,34 +167,3 @@ export const Menu = React.memo(function Menu({
)
})
-
-const LinkToPage = React.memo(function LinkToPage({
- route,
- name,
- attention,
- asPath
-}: {
- route: string
- name: string
- attention?: boolean
- asPath: string
-}) {
- const isActive = route === asPath.split('/?')[0].split('?')[0]
- return (
-
-
- {name}
- {attention ? (
-
- ) : null}
-
-
- )
-})
diff --git a/src/components/Nav/Mobile/index.tsx b/src/components/Nav/Mobile/index.tsx
index 367dc113b..5fc50d619 100644
--- a/src/components/Nav/Mobile/index.tsx
+++ b/src/components/Nav/Mobile/index.tsx
@@ -1,22 +1,20 @@
import * as React from 'react'
import { lazy } from 'react'
import { BasicLink } from '~/components/Link'
-import { TNavLink, TNavLinks } from '../types'
+import type { NavLink } from '../navStructure'
import { Menu } from './Menu'
import { Settings } from './Settings'
const MobileSearch = lazy(() => import('~/components/Search').then((m) => ({ default: m.MobileSearch }))) as React.FC
export const MobileNav = ({
- mainLinks,
pinnedPages,
userDashboards,
- footerLinks
+ accountAttention
}: {
- mainLinks: TNavLinks
- pinnedPages: TNavLink[]
- userDashboards: TNavLink[]
- footerLinks: TNavLinks
+ pinnedPages: string[]
+ userDashboards: NavLink[]
+ accountAttention?: boolean
}) => {
return (
)
}
diff --git a/src/components/Nav/NavCollapseContext.tsx b/src/components/Nav/NavCollapseContext.tsx
new file mode 100644
index 000000000..e6ad40ada
--- /dev/null
+++ b/src/components/Nav/NavCollapseContext.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+interface NavCollapseContextType {
+ collapseAll: () => void
+ registerDisclosure: (id: string, disclosure: any) => void
+ unregisterDisclosure: (id: string) => void
+}
+
+const NavCollapseContext = React.createContext
(null)
+
+export function NavCollapseProvider({ children }: { children: React.ReactNode }) {
+ const disclosuresRef = React.useRef>(new Map())
+
+ const registerDisclosure = React.useCallback((id: string, disclosure: any) => {
+ disclosuresRef.current.set(id, disclosure)
+ }, [])
+
+ const unregisterDisclosure = React.useCallback((id: string) => {
+ disclosuresRef.current.delete(id)
+ }, [])
+
+ const collapseAll = React.useCallback(() => {
+ disclosuresRef.current.forEach((disclosure) => {
+ disclosure.setOpen(false)
+ })
+ }, [])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useNavCollapse() {
+ const context = React.useContext(NavCollapseContext)
+ return context
+}
diff --git a/src/components/Nav/NavGroup.tsx b/src/components/Nav/NavGroup.tsx
new file mode 100644
index 000000000..13a855a13
--- /dev/null
+++ b/src/components/Nav/NavGroup.tsx
@@ -0,0 +1,290 @@
+import * as React from 'react'
+import { useRouter } from 'next/router'
+import { Disclosure, DisclosureContent, useDisclosureStore } from '@ariakit/react'
+import { Icon } from '~/components/Icon'
+import { BasicLink } from '~/components/Link'
+import { Tooltip } from '../Tooltip'
+import { useNavCollapse } from './NavCollapseContext'
+import type { NavGroup as NavGroupType, NavItem, NavLink as NavLinkType } from './navStructure'
+
+interface NavGroupProps {
+ group: NavGroupType
+ isExpanded: boolean
+ depth?: number
+ showUnpin?: boolean
+ onUnpin?: (route: string) => void
+}
+
+interface NavLinkProps {
+ link: NavLinkType
+ isExpanded: boolean
+ depth?: number
+ showUnpin?: boolean
+ onUnpin?: (route: string) => void
+}
+
+export const NavLink = React.memo(function NavLink({ link, isExpanded, depth = 0, showUnpin, onUnpin }: NavLinkProps) {
+ const { asPath } = useRouter()
+ const isActive = link.route === asPath.split('/?')[0].split('?')[0]
+
+ const iconSize = 'h-4 w-4'
+
+ // Visual weight for footer/resource links
+ const getVisualWeight = () => {
+ if (['Support', 'Documentation', 'Contact us'].includes(link.label)) {
+ return 'opacity-100'
+ }
+ if (['Careers', 'Report Incorrect Data', 'Press / Media', 'List your project'].includes(link.label)) {
+ return 'opacity-70'
+ }
+ if (['Twitter', 'Discord'].includes(link.label)) {
+ return 'opacity-50'
+ }
+ if (['Donate'].includes(link.label)) {
+ return 'opacity-60'
+ }
+ return 'opacity-100'
+ }
+
+ const linkElement = (
+
+ {link.icon ? (
+
+ ) : link.emoji ? (
+ {link.emoji}
+ ) : null}
+ {isExpanded ? (
+
+
+ {link.label}
+ {link.badge && (
+
+ {link.badge.toUpperCase()}
+
+ )}
+ {link.attention && (
+
+ )}
+
+
+ ) : (
+ {link.label}
+ )}
+
+ )
+
+ const content =
+ !isExpanded && (link.icon || link.emoji) ? (
+
+ {linkElement}
+
+ ) : (
+ linkElement
+ )
+
+ // Add unpin button column if needed
+ if (showUnpin && onUnpin && isExpanded) {
+ return (
+
+ {content}
+
+
+
+
+ )
+ }
+
+ return content
+})
+
+export const NavGroup = React.memo(function NavGroup({
+ group,
+ isExpanded,
+ depth = 0,
+ showUnpin,
+ onUnpin
+}: NavGroupProps) {
+ const disclosure = useDisclosureStore({
+ defaultOpen: group.defaultOpen ?? false,
+ // When sidebar is collapsed, close all groups
+ open: isExpanded ? undefined : false
+ })
+
+ const open = disclosure.useState('open')
+ const iconSize = 'h-4 w-4'
+
+ // Register with collapse context (all groups, not just nested)
+ const navCollapse = useNavCollapse()
+ const groupId = React.useId()
+
+ React.useEffect(() => {
+ if (navCollapse) {
+ navCollapse.registerDisclosure(groupId, disclosure)
+ return () => navCollapse.unregisterDisclosure(groupId)
+ }
+ }, [navCollapse, groupId, disclosure])
+
+ // When sidebar expands, restore default state
+ React.useEffect(() => {
+ if (isExpanded && group.defaultOpen) {
+ disclosure.setOpen(true)
+ }
+ }, [isExpanded, group.defaultOpen, disclosure])
+
+ const trigger = (
+
+ {group.icon ? (
+
+ ) : group.emoji ? (
+ {group.emoji}
+ ) : null}
+ {isExpanded ? (
+
+
+ {group.label}
+
+
+ ) : (
+ {group.label}
+ )}
+ {isExpanded && (
+
+ )}
+ {!isExpanded && {group.label}}
+
+ )
+
+ return (
+
+ {!isExpanded && (group.icon || group.emoji) ? (
+
+ {trigger}
+
+ ) : (
+ trigger
+ )}
+
+ {/* Vertical indicator line - only show when expanded */}
+ {isExpanded && (
+
+ )}
+
+ {group.children.map((child, index) => {
+ if (child.type === 'link') {
+ return (
+
+ )
+ }
+ if (child.type === 'group') {
+ return (
+
+ )
+ }
+ return null
+ })}
+
+
+
+ {item.label && isExpanded &&
{item.label}
}
+
+