@exxatdesignux/ui 0.0.6 → 0.0.8

package/template/components/secondary-nav.tsx

@@ -0,0 +1,394 @@
+"use client"
+
+/**
+ * SecondaryNav — two-panel contextual navigation
+ *
+ * Layout:
+ *   ┌──────┬──────────────────────────┐
+ *   │ Rail │  Content panel            │
+ *   │ (52) │  (200–240px)              │
+ *   │      │  Section heading          │
+ *   │  ◉   │  · Nav item               │
+ *   │  ○   │  · Nav item (active)      │
+ *   │  ○   │  ─────────────────        │
+ *   │      │  Section heading          │
+ *   │      │  · Nav item               │
+ *   └──────┴──────────────────────────┘
+ *
+ * Usage:
+ *   <SecondaryNav sections={SECTIONS} />
+ *
+ * Or use composed pieces:
+ *   <SecondaryNavRail sections={…} activeSection={…} onSectionChange={…} />
+ *   <SecondaryNavPanel section={…} />
+ */
+
+import * as React from "react"
+import { usePathname } from "next/navigation"
+import { cn } from "@/lib/utils"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface SecondaryNavLink {
+  /** Unique key */
+  key: string
+  label: string
+  href: string
+  icon?: string
+  /** Badge count shown on link */
+  count?: number
+  /** If true, item is rendered as a section divider label (not a link) */
+  isSectionHeader?: boolean
+}
+
+export interface SecondaryNavSectionAction {
+  /** Tooltip / aria-label */
+  label: string
+  /** FontAwesome icon class, e.g. "fa-plus" */
+  icon: string
+  onClick: () => void
+}
+
+export interface SecondaryNavSection {
+  /** Unique key — used to identify the active section */
+  key: string
+  /** Tooltip shown on rail icon */
+  label: string
+  /** FontAwesome icon class, e.g. "fa-users" */
+  icon: string
+  /** Solid icon used when section is active */
+  iconActive?: string
+  /** Flat list of links (use isSectionHeader=true for dividers) */
+  links: SecondaryNavLink[]
+  /** When true, a search input is shown above the list and filters link labels */
+  searchable?: boolean
+  /** Placeholder for the search input */
+  searchPlaceholder?: string
+  /** Optional primary action rendered next to the section title (e.g. Add) */
+  action?: SecondaryNavSectionAction
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// RailButton — single icon in the narrow left rail
+// ─────────────────────────────────────────────────────────────────────────────
+
+function RailButton({
+  section,
+  isActive,
+  onClick,
+}: {
+  section: SecondaryNavSection
+  isActive: boolean
+  onClick: () => void
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={section.label}
+          aria-current={isActive ? "true" : undefined}
+          onClick={onClick}
+          className={cn(
+            "relative flex items-center justify-center size-9 rounded-lg transition-all",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            isActive
+              ? [
+                  "text-[var(--brand-color)]",
+                  "bg-[color-mix(in_oklch,var(--background)_88%,var(--brand-color)_12%)]",
+                ].join(" ")
+              : "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-strong"
+          )}
+        >
+          {/* Active left pip */}
+          {isActive && (
+            <span
+              aria-hidden="true"
+              className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 rounded-r-full bg-[var(--brand-color)]"
+            />
+          )}
+          <i
+            className={cn(
+              isActive && section.iconActive
+                ? `fa-solid ${section.iconActive}`
+                : `fa-light ${section.icon}`,
+              "text-[15px]"
+            )}
+            aria-hidden="true"
+          />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="right" sideOffset={6}>
+        {section.label}
+      </TooltipContent>
+    </Tooltip>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// NavLink — single item in the content panel
+// ─────────────────────────────────────────────────────────────────────────────
+
+function NavLink({ link }: { link: SecondaryNavLink }) {
+  const pathname = usePathname()
+  const isActive = pathname === link.href || pathname.startsWith(link.href + "/")
+
+  if (link.isSectionHeader) {
+    return (
+      <li role="presentation">
+        <span className="block px-3 pt-3 pb-0.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 select-none">
+          {link.label}
+        </span>
+      </li>
+    )
+  }
+
+  return (
+    <li>
+      <a
+        href={link.href}
+        aria-current={isActive ? "page" : undefined}
+        className={cn(
+          "group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+          isActive
+            ? [
+                "font-medium text-[var(--brand-color)]",
+                "bg-[color-mix(in_oklch,var(--background)_88%,var(--brand-color)_12%)]",
+              ].join(" ")
+            : "text-foreground/80 hover:text-interactive-hover-foreground hover:bg-interactive-hover-medium"
+        )}
+      >
+        {link.icon && (
+          <span className="size-4 shrink-0 flex items-center justify-center">
+            <i
+              className={cn(
+                isActive ? `fa-solid ${link.icon}` : `fa-light ${link.icon}`,
+                "text-[13px]"
+              )}
+              aria-hidden="true"
+            />
+          </span>
+        )}
+        <span className="flex-1 min-w-0 truncate">{link.label}</span>
+        {link.count !== undefined && (
+          <span
+            className={cn(
+              "shrink-0 min-w-[18px] h-[18px] flex items-center justify-center rounded-full text-xs font-medium px-1",
+              isActive
+                ? "bg-[var(--brand-color)] text-white"
+                : "bg-muted text-muted-foreground"
+            )}
+          >
+            {link.count}
+          </span>
+        )}
+      </a>
+    </li>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SecondaryNavRail — exported if consumers want to compose manually
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SecondaryNavRail({
+  sections,
+  activeSection,
+  onSectionChange,
+  className,
+}: {
+  sections: SecondaryNavSection[]
+  activeSection: string
+  onSectionChange: (key: string) => void
+  className?: string
+}) {
+  return (
+    <nav
+      aria-label="Section navigation"
+      className={cn(
+        "flex flex-col items-center gap-1 pt-3 pb-2 px-1.5 w-[52px] shrink-0 border-r border-border",
+        className
+      )}
+    >
+      <TooltipProvider delayDuration={200}>
+        {sections.map(section => (
+          <RailButton
+            key={section.key}
+            section={section}
+            isActive={activeSection === section.key}
+            onClick={() => onSectionChange(section.key)}
+          />
+        ))}
+      </TooltipProvider>
+    </nav>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SecondaryNavPanel — exported for manual composition
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function SecondaryNavPanel({
+  section,
+  className,
+}: {
+  section: SecondaryNavSection
+  className?: string
+}) {
+  const [query, setQuery] = React.useState("")
+  const q = query.trim().toLowerCase()
+
+  const visibleLinks = React.useMemo(() => {
+    if (!section.searchable || !q) return section.links
+    // Filter out non-header items that don't match; drop headers whose group becomes empty
+    const kept: SecondaryNavLink[] = []
+    let pendingHeader: SecondaryNavLink | null = null
+    let groupHasMatch = false
+    for (const link of section.links) {
+      if (link.isSectionHeader) {
+        if (pendingHeader && groupHasMatch) kept.push(pendingHeader)
+        pendingHeader = link
+        groupHasMatch = false
+        continue
+      }
+      if (link.label.toLowerCase().includes(q)) {
+        if (pendingHeader && !groupHasMatch) {
+          kept.push(pendingHeader)
+          groupHasMatch = true
+        } else if (!pendingHeader) {
+          groupHasMatch = true
+        }
+        kept.push(link)
+      }
+    }
+    if (pendingHeader && groupHasMatch) {
+      // already pushed above when first match in group — nothing to do
+    }
+    return kept
+  }, [section.links, section.searchable, q])
+
+  return (
+    <nav
+      aria-label={`${section.label} navigation`}
+      className={cn("flex flex-col min-w-[200px] max-w-[240px] pt-3 pb-2", className)}
+    >
+      {/* Section title + action */}
+      <div className="flex items-center justify-between gap-2 px-3 pb-2">
+        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground/60 select-none">
+          {section.label}
+        </p>
+        {section.action && (
+          <button
+            type="button"
+            aria-label={section.action.label}
+            title={section.action.label}
+            onClick={section.action.onClick}
+            className={cn(
+              "inline-flex size-6 items-center justify-center rounded-md -mr-1",
+              "text-muted-foreground hover:text-interactive-hover-foreground hover:bg-interactive-hover-strong",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            )}
+          >
+            <i className={cn("fa-light", section.action.icon, "text-[13px]")} aria-hidden="true" />
+          </button>
+        )}
+      </div>
+
+      {/* Search */}
+      {section.searchable && (
+        <div className="px-2 pb-2">
+          <div className="relative">
+            <i
+              className="fa-light fa-magnifying-glass absolute left-2 top-1/2 -translate-y-1/2 text-[11px] text-muted-foreground pointer-events-none"
+              aria-hidden="true"
+            />
+            <input
+              type="search"
+              value={query}
+              onChange={e => setQuery(e.target.value)}
+              placeholder={section.searchPlaceholder ?? "Search"}
+              aria-label={`Search ${section.label}`}
+              className={cn(
+                "w-full h-7 pl-7 pr-2 rounded-md text-xs bg-background border border-border",
+                "placeholder:text-muted-foreground/70",
+                "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent"
+              )}
+            />
+          </div>
+        </div>
+      )}
+
+      <ul role="list" className="flex flex-col gap-0.5 px-1.5">
+        {visibleLinks.map(link => (
+          <NavLink key={link.key} link={link} />
+        ))}
+        {section.searchable && q && visibleLinks.length === 0 && (
+          <li className="px-3 py-2 text-xs text-muted-foreground">No results</li>
+        )}
+      </ul>
+    </nav>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SecondaryNav — composed two-panel component (default export)
+// ─────────────────────────────────────────────────────────────────────────────
+
+export interface SecondaryNavProps {
+  sections: SecondaryNavSection[]
+  /** Which section key is active by default — defaults to first section */
+  defaultSection?: string
+  className?: string
+  /** Called when active section changes */
+  onSectionChange?: (key: string) => void
+}
+
+export function SecondaryNav({
+  sections,
+  defaultSection,
+  className,
+  onSectionChange,
+}: SecondaryNavProps) {
+  const [activeSection, setActiveSection] = React.useState(
+    defaultSection ?? sections[0]?.key ?? ""
+  )
+
+  const currentSection = sections.find(s => s.key === activeSection) ?? sections[0]
+
+  function handleSectionChange(key: string) {
+    setActiveSection(key)
+    onSectionChange?.(key)
+  }
+
+  if (!currentSection) return null
+
+  return (
+    <div
+      className={cn(
+        "flex h-full border-r border-border bg-sidebar",
+        className
+      )}
+    >
+      {/* Left icon rail — only shown when multiple sections */}
+      {sections.length > 1 && (
+        <SecondaryNavRail
+          sections={sections}
+          activeSection={activeSection}
+          onSectionChange={handleSectionChange}
+        />
+      )}
+
+      {/* Right content panel */}
+      <SecondaryNavPanel section={currentSection} />
+    </div>
+  )
+}

package/template/components/secondary-panel.tsx

@@ -0,0 +1,239 @@
+"use client"
+
+/**
+ * SecondaryPanel — nested sidebar panel that appears between the icon-rail
+ * sidebar and the main content. When active, the main sidebar collapses to
+ * icon-only mode; when dismissed, the sidebar expands back.
+ *
+ * Pattern: VS Code / Figma icon-rail + detail panel.
+ */
+
+import * as React from "react"
+import { cn }          from "@/lib/utils"
+import { useSidebar }  from "@/components/ui/sidebar"
+import { Tip }         from "@/components/ui/tip"
+import { Button }      from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Context
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface SecondaryPanelContextValue {
+  /** Currently active panel id, or null if none */
+  activePanel: string | null
+  /** Open a panel by id */
+  openPanel: (id: string) => void
+  /** Close the panel */
+  closePanel: () => void
+}
+
+const SecondaryPanelContext = React.createContext<SecondaryPanelContextValue>({
+  activePanel: null,
+  openPanel: () => {},
+  closePanel: () => {},
+})
+
+export function useSecondaryPanel() {
+  return React.useContext(SecondaryPanelContext)
+}
+
+export function SecondaryPanelProvider({ children }: { children: React.ReactNode }) {
+  const [activePanel, setActivePanel]     = React.useState<string | null>(null)
+  const { setOpen } = useSidebar()
+
+  const openPanel = React.useCallback((id: string) => {
+    setActivePanel(id)
+    setOpen(false) // collapse main sidebar to icon rail
+  }, [setOpen])
+
+  const closePanel = React.useCallback(() => {
+    setActivePanel(null)
+    setOpen(true) // expand main sidebar back
+  }, [setOpen])
+
+  const value = React.useMemo(() => ({
+    activePanel, openPanel, closePanel,
+  }), [activePanel, openPanel, closePanel])
+
+  return (
+    <SecondaryPanelContext.Provider value={value}>
+      {children}
+    </SecondaryPanelContext.Provider>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Panel content — Rotations
+// ─────────────────────────────────────────────────────────────────────────────
+
+const ROTATION_ITEMS = [
+  { id: "all",        label: "All Rotations",               icon: "fa-folder",  iconActive: "fa-folder", meta: "12 active" },
+  { id: "rotation-1", label: "Clinical Nursing — Fall 2026", icon: "fa-folder",  iconActive: "fa-folder", meta: "8 students" },
+  { id: "rotation-2", label: "PT Fieldwork — Spring 2026",   icon: "fa-folder",  iconActive: "fa-folder", meta: "6 students" },
+  { id: "rotation-3", label: "OT Level II — Summer 2026",    icon: "fa-folder",  iconActive: "fa-folder", meta: "4 students" },
+]
+
+function RotationsPanel() {
+  const { closePanel } = useSecondaryPanel()
+  const [activeRotation, setActiveRotation] = React.useState("all")
+  const [query, setQuery] = React.useState("")
+
+  const q = query.trim().toLowerCase()
+  const filtered = q
+    ? ROTATION_ITEMS.filter(i => i.label.toLowerCase().includes(q))
+    : ROTATION_ITEMS
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-2 px-4 pt-4 pb-2">
+        <h2
+          className="text-xl font-semibold leading-tight text-sidebar-foreground"
+          style={{ fontFamily: "var(--font-heading)" }}
+        >
+          Rotations
+        </h2>
+        <div className="flex items-center gap-1">
+          <Tip label="Add rotation" side="bottom">
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={() => { /* hook up create flow */ }}
+              aria-label="Add rotation"
+            >
+              <i className="fa-light fa-plus" aria-hidden="true" />
+            </Button>
+          </Tip>
+          <Tip label="Close panel" side="bottom">
+            <Button
+              type="button"
+              size="icon"
+              variant="ghost"
+              onClick={closePanel}
+              aria-label="Close panel"
+            >
+              <i className="fa-light fa-xmark" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+      </div>
+      <div className="px-4 pb-2">
+        <InputGroup className="h-8 min-h-8">
+          <InputGroupAddon>
+            <i className="fa-light fa-magnifying-glass size-4 text-[13px]" aria-hidden="true" />
+          </InputGroupAddon>
+          <InputGroupInput
+            type="search"
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            placeholder="Search rotations"
+            aria-label="Search rotations"
+            className="text-sm pe-3"
+          />
+        </InputGroup>
+      </div>
+      <ul className="flex-1 space-y-0.5 px-4 pb-4" role="listbox">
+        {filtered.length === 0 && (
+          <li className="py-2 text-xs text-muted-foreground">No results</li>
+        )}
+        {filtered.map(item => {
+          const isActive = item.id === activeRotation
+          return (
+            <li key={item.id}>
+              <Tip label={item.label} side="right">
+                <button
+                  type="button"
+                  role="option"
+                  aria-selected={isActive}
+                  onClick={() => setActiveRotation(item.id)}
+                  className={cn(
+                    // Match primary `SidebarMenuButton`: text-sm, compact padding, sidebar tokens
+                    "flex w-full items-start gap-2 rounded-md p-2 text-left text-sm transition-colors",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    isActive
+                      ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+                      : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+                  )}
+                >
+                  <i
+                    className={cn(
+                      "mt-0.5 size-4 shrink-0 text-center text-[13px] leading-none",
+                      isActive ? `fa-solid ${item.iconActive}` : `fa-light ${item.icon}`,
+                    )}
+                    aria-hidden="true"
+                  />
+                  <div className="min-w-0 flex-1">
+                    <span className="block whitespace-normal break-words leading-snug">
+                      {item.label}
+                    </span>
+                    {item.meta && (
+                      <span className="mt-0.5 block whitespace-normal break-words text-xs leading-snug text-muted-foreground">
+                        {item.meta}
+                      </span>
+                    )}
+                  </div>
+                </button>
+              </Tip>
+            </li>
+          )
+        })}
+      </ul>
+    </>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// SecondaryPanel — the actual rendered panel
+// ─────────────────────────────────────────────────────────────────────────────
+
+const PANELS: Record<string, React.FC> = {
+  rotations: RotationsPanel,
+}
+
+export function SecondaryPanel() {
+  const { activePanel } = useSecondaryPanel()
+  const PanelContent = activePanel ? PANELS[activePanel] : null
+
+  return (
+    <nav
+      aria-label="Secondary navigation"
+      data-state={activePanel ? "open" : "closed"}
+      className={cn(
+        "flex flex-col overflow-hidden",
+        "transition-[width,margin,opacity] duration-200 ease-linear",
+        activePanel
+          ? "w-56 shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative h-[min(calc(100svh-2rem),800px)] md:sticky md:top-2 md:h-[min(calc(100svh-1rem),800px)]"
+          : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none"
+      )}
+      style={activePanel ? { backgroundColor: "var(--secondary-panel-bg, #FAFBFF)" } : undefined}
+    >
+      <div
+        className={cn(
+          "flex flex-1 flex-col overflow-y-auto",
+          activePanel ? "min-w-0" : "hidden min-w-0 w-0 p-0"
+        )}
+      >
+        {PanelContent && <PanelContent />}
+      </div>
+    </nav>
+  )
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Auto-open hook — pages call this to show/hide a panel on mount/unmount
+// ─────────────────────────────────────────────────────────────────────────────
+
+export function useAutoPanel(panelId: string) {
+  const { openPanel, closePanel } = useSecondaryPanel()
+
+  React.useEffect(() => {
+    openPanel(panelId)
+    return () => { closePanel() }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [panelId])
+}