@startsimpli/ui 0.4.50 → 0.4.52

package/src/components/navigation/grouped-nav.tsx

@@ -0,0 +1,192 @@
+'use client'
+
+import * as React from 'react'
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../../lib/utils'
+
+export interface GroupedNavLink {
+  href: string
+  label: string
+  icon?: React.ReactNode
+  /** Optional trailing slot (count pill, status dot…). */
+  badge?: React.ReactNode
+}
+
+export interface GroupedNavGroup {
+  label: string
+  icon?: React.ReactNode
+  items: GroupedNavLink[]
+  /** Start expanded (default true). Ignored while a child is active — then forced open. */
+  defaultOpen?: boolean
+  /** Show a chevron toggle (default true). false = a static section heading. */
+  collapsible?: boolean
+}
+
+/** A top-level link, or a named group of links. Discriminated by `items`. */
+export type GroupedNavEntry = GroupedNavLink | GroupedNavGroup
+
+export interface GroupedNavRenderLinkArgs {
+  link: GroupedNavLink
+  active: boolean
+  className: string
+  /** The pre-composed inner content (icon + label + badge). */
+  content: React.ReactNode
+}
+
+export interface GroupedNavProps {
+  items: GroupedNavEntry[]
+  /** The current path; drives active state. */
+  activeHref?: string
+  /** Override active matching (default: exact, or `activeHref` under `href/`). */
+  isActive?: (href: string, activeHref?: string) => boolean
+  /**
+   * Render a link — pass `next/link` here in a Next app. Default renders a plain
+   * `<a>` so the primitive stays framework-agnostic.
+   */
+  renderLink?: (args: GroupedNavRenderLinkArgs) => React.ReactNode
+  className?: string
+}
+
+function isGroup(entry: GroupedNavEntry): entry is GroupedNavGroup {
+  return Array.isArray((entry as GroupedNavGroup).items)
+}
+
+function defaultIsActive(href: string, activeHref?: string): boolean {
+  if (!activeHref) return false
+  if (href === '/') return activeHref === '/'
+  return activeHref === href || activeHref.startsWith(href + '/')
+}
+
+const defaultRenderLink = ({ link, active, className, content }: GroupedNavRenderLinkArgs) => (
+  <a href={link.href} className={className} aria-current={active ? 'page' : undefined}>
+    {content}
+  </a>
+)
+
+function linkClasses(active: boolean, indented: boolean) {
+  return cn(
+    'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
+    indented && 'pl-9',
+    active
+      ? 'bg-primary-600 text-white'
+      : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+  )
+}
+
+/**
+ * A grouped sidebar navigation list: a mix of top-level links and collapsible
+ * groups (e.g. Dashboard + a "Content" group of the three content types). Purely
+ * the `<nav>` list — the app shell owns the logo, user footer, and chrome. Active
+ * state and link rendering are injectable so it drops into any router.
+ */
+export function GroupedNav({
+  items,
+  activeHref,
+  isActive = defaultIsActive,
+  renderLink = defaultRenderLink,
+  className,
+}: GroupedNavProps) {
+  return (
+    <nav className={cn('space-y-1', className)} aria-label="Primary">
+      {items.map((entry, idx) =>
+        isGroup(entry) ? (
+          <NavGroup
+            key={`group-${entry.label}-${idx}`}
+            group={entry}
+            activeHref={activeHref}
+            isActive={isActive}
+            renderLink={renderLink}
+          />
+        ) : (
+          <NavLinkRow
+            key={entry.href}
+            link={entry}
+            active={isActive(entry.href, activeHref)}
+            indented={false}
+            renderLink={renderLink}
+          />
+        ),
+      )}
+    </nav>
+  )
+}
+
+function NavLinkRow({
+  link,
+  active,
+  indented,
+  renderLink,
+}: {
+  link: GroupedNavLink
+  active: boolean
+  indented: boolean
+  renderLink: NonNullable<GroupedNavProps['renderLink']>
+}) {
+  const content = (
+    <>
+      {link.icon ? <span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{link.icon}</span> : null}
+      <span className="flex-1 truncate">{link.label}</span>
+      {link.badge ? <span className="flex-shrink-0">{link.badge}</span> : null}
+    </>
+  )
+  return <>{renderLink({ link, active, className: linkClasses(active, indented), content })}</>
+}
+
+function NavGroup({
+  group,
+  activeHref,
+  isActive,
+  renderLink,
+}: {
+  group: GroupedNavGroup
+  activeHref?: string
+  isActive: NonNullable<GroupedNavProps['isActive']>
+  renderLink: NonNullable<GroupedNavProps['renderLink']>
+}) {
+  const collapsible = group.collapsible ?? true
+  const hasActiveChild = group.items.some((l) => isActive(l.href, activeHref))
+  const [open, setOpen] = useState(group.defaultOpen ?? true)
+  const expanded = hasActiveChild || open
+
+  const links = expanded
+    ? group.items.map((link) => (
+        <NavLinkRow
+          key={link.href}
+          link={link}
+          active={isActive(link.href, activeHref)}
+          indented
+          renderLink={renderLink}
+        />
+      ))
+    : null
+
+  const heading = (
+    <span className="flex items-center gap-2 min-w-0">
+      {group.icon ? <span className="flex-shrink-0 w-5 h-5 flex items-center justify-center">{group.icon}</span> : null}
+      <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider truncate">{group.label}</span>
+    </span>
+  )
+
+  return (
+    <div className="pt-3 first:pt-0">
+      {collapsible ? (
+        <button
+          type="button"
+          onClick={() => setOpen((o) => !o)}
+          aria-expanded={expanded}
+          className="w-full flex items-center justify-between gap-2 px-3 py-1.5 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
+        >
+          {heading}
+          <ChevronDown
+            className={cn('w-4 h-4 text-gray-400 transition-transform flex-shrink-0', expanded ? '' : '-rotate-90')}
+            aria-hidden="true"
+          />
+        </button>
+      ) : (
+        <div className="px-3 py-1.5">{heading}</div>
+      )}
+      {links && <div className="mt-1 space-y-1">{links}</div>}
+    </div>
+  )
+}