@eggspot/ui 0.0.0

package/src/components/DashboardLayout/SidebarNav.tsx

@@ -0,0 +1,509 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import { SearchInput } from "@eggspot/ui/components/Input"
+import { Tooltip, TooltipTrigger } from "@eggspot/ui/components/Tooltip"
+import { cn } from "@eggspot/ui/lib/utils"
+import { ChevronDown, ChevronLeft, ChevronRight, Search } from "lucide-react"
+import { Focusable } from "react-aria-components"
+import * as ReactDOM from "react-dom"
+
+import { useDashboard } from "./DashboardLayout"
+
+// Flyout panel for collapsed sidebar sections
+interface SidebarFlyoutProps {
+  title: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  onClose: () => void
+}
+
+function SidebarFlyout({ title, icon, children, onClose }: SidebarFlyoutProps) {
+  const { activePath, closeFlyout, sidebarRect } = useDashboard()
+  const flyoutRef = React.useRef<HTMLDivElement>(null)
+  const flyoutWidth = 220
+
+  const sidebarRight = sidebarRect?.right ?? 0
+
+  const prevActivePath = React.useRef(activePath)
+  React.useEffect(() => {
+    if (prevActivePath.current !== activePath) {
+      closeFlyout()
+    }
+    prevActivePath.current = activePath
+  }, [activePath, closeFlyout])
+
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose()
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [onClose])
+
+  React.useEffect(() => {
+    const originalOverflow = document.body.style.overflow
+    document.body.style.overflow = "hidden"
+
+    flyoutRef.current?.focus()
+
+    return () => {
+      document.body.style.overflow = originalOverflow
+    }
+  }, [])
+
+  const sidebarTop = sidebarRect?.top ?? 0
+  const sidebarHeight = sidebarRect?.height ?? 0
+  const maxAvailableHeight =
+    typeof window !== "undefined"
+      ? window.innerHeight - sidebarTop
+      : sidebarHeight
+  const flyoutHeight = Math.min(sidebarHeight, maxAvailableHeight)
+
+  const flyoutContent = (
+    <>
+      <div
+        className="fixed inset-0 z-40"
+        style={{ left: sidebarRight + flyoutWidth }}
+        onClick={onClose}
+        aria-hidden="true"
+      />
+
+      <div
+        ref={flyoutRef}
+        tabIndex={-1}
+        className={cn(
+          "fixed z-50 overflow-hidden",
+          "from-gray-2 to-gray-1 bg-linear-to-b",
+          "border-gray-6 border-r",
+          "rounded-r-2xl shadow-xl",
+          "animate-in slide-in-from-left-2 duration-200",
+          "focus:outline-none"
+        )}
+        style={{
+          left: sidebarRight + 1,
+          top: sidebarTop,
+          width: flyoutWidth,
+          height: flyoutHeight,
+        }}
+      >
+        <div className="flex h-full flex-col overflow-hidden p-4">
+          <div className="mb-4 flex shrink-0 items-center gap-3">
+            <span className="text-accent-11 [&>svg]:size-5">{icon}</span>
+            <h3 className="text-gray-12 text-sm font-semibold">{title}</h3>
+          </div>
+
+          <div className="flex-1 overflow-y-auto">
+            <div className="space-y-1.5">
+              {React.Children.map(children, (child) => {
+                if (React.isValidElement(child)) {
+                  return React.cloneElement(
+                    child as React.ReactElement<{
+                      nested?: boolean
+                      inFlyout?: boolean
+                    }>,
+                    {
+                      nested: true,
+                      inFlyout: true,
+                    }
+                  )
+                }
+                return child
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+
+  if (typeof window === "undefined") return null
+  return ReactDOM.createPortal(flyoutContent, document.body)
+}
+
+export interface SidebarToggleProps {
+  className?: string
+}
+
+export function SidebarToggle({ className }: SidebarToggleProps) {
+  const { sidebarState, toggleSidebar } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed"
+
+  return (
+    <Button
+      mode="icon"
+      aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+      variant="ghost"
+      tooltip={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+      tooltipPlacement="right"
+      onClick={toggleSidebar}
+      className={cn(
+        "rounded-2xl",
+        "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
+        isCollapsed && "h-12 w-full",
+        className
+      )}
+    >
+      {isCollapsed ? (
+        <ChevronRight className="size-[18px]" />
+      ) : (
+        <ChevronLeft className="size-[18px]" />
+      )}
+    </Button>
+  )
+}
+
+// Nav Section (collapsible group)
+export interface SidebarNavSectionProps {
+  title: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  defaultOpen?: boolean
+  className?: string
+}
+
+export function SidebarNavSection({
+  title,
+  icon,
+  children,
+  defaultOpen = false,
+  className,
+}: SidebarNavSectionProps) {
+  const {
+    sidebarState,
+    expandedGroups,
+    toggleGroup,
+    activePath,
+    flyoutGroup,
+    setFlyoutGroup,
+  } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed"
+
+  const isOpen = expandedGroups.includes(title)
+  const isFlyoutOpen = flyoutGroup === title
+
+  const childrenArray = React.Children.toArray(children)
+  const hasActiveChild = childrenArray.some((child) => {
+    if (React.isValidElement<{ href?: string }>(child) && child.props.href) {
+      return activePath === child.props.href
+    }
+    return false
+  })
+
+  // Collapsed mode - show flyout on click
+  if (isCollapsed) {
+    return (
+      <>
+        <Button
+          mode="icon"
+          variant="ghost"
+          tooltip={isFlyoutOpen ? undefined : title}
+          tooltipPlacement="right"
+          onClick={() => setFlyoutGroup(isFlyoutOpen ? null : title)}
+          className={cn(
+            "relative flex h-12 w-full items-center justify-center rounded-2xl",
+            "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
+            isFlyoutOpen && "bg-gray-4/50 text-gray-12",
+            hasActiveChild && "text-gray-12",
+            className
+          )}
+        >
+          {/* Active indicator */}
+          {hasActiveChild && (
+            <div className="bg-accent-9 absolute top-1/2 left-0 h-5 w-[3px] -translate-y-1/2 rounded-full" />
+          )}
+          <span
+            className={cn(
+              "[&>svg]:size-[18px]",
+              hasActiveChild && "text-accent-11"
+            )}
+          >
+            {icon}
+          </span>
+        </Button>
+
+        {/* Flyout panel */}
+        {isFlyoutOpen && (
+          <SidebarFlyout
+            title={title}
+            icon={icon}
+            onClose={() => setFlyoutGroup(null)}
+          >
+            {children}
+          </SidebarFlyout>
+        )}
+      </>
+    )
+  }
+
+  return (
+    <div className={cn("mb-1", className)}>
+      <button
+        onClick={() => toggleGroup(title)}
+        className={cn(
+          "group flex h-11 w-full min-w-0 items-center gap-3 rounded-2xl px-4",
+          "text-gray-11 text-sm transition-all duration-150",
+          "hover:bg-gray-4/50 hover:text-gray-12",
+          "focus-visible:ring-accent-9 focus:outline-none focus-visible:ring-2",
+          hasActiveChild && "text-gray-12"
+        )}
+      >
+        <span
+          className={cn(
+            "transition-colors",
+            hasActiveChild
+              ? "text-accent-11"
+              : "text-gray-11 group-hover:text-gray-12"
+          )}
+        >
+          {icon}
+        </span>
+        <span className="min-w-0 flex-1 truncate text-left text-xs font-semibold tracking-wider uppercase">
+          {title}
+        </span>
+        <ChevronDown
+          className={cn(
+            "text-gray-11 group-hover:text-gray-12 size-4 transition-transform duration-200",
+            isOpen && "rotate-180"
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div className="animate-in slide-in-from-top-1 relative mt-2 ml-5 space-y-1 pl-4 duration-200">
+          {/* Guide line */}
+          <div className="bg-gray-6/50 absolute top-0 bottom-0 left-[4px] w-[2px] rounded-full" />
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Nav Group (static header, no collapse)
+export interface SidebarNavGroupProps {
+  title: string
+  className?: string
+}
+
+export function SidebarNavGroup({ title, className }: SidebarNavGroupProps) {
+  const { sidebarState } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed"
+
+  if (isCollapsed) {
+    return <div className="bg-gray-6/30 mx-auto my-1.5 h-px w-8" />
+  }
+
+  return (
+    <div
+      className={cn(
+        "text-gray-11 px-4 pt-4 pb-1 text-xs font-semibold tracking-wider uppercase",
+        className
+      )}
+    >
+      {title}
+    </div>
+  )
+}
+
+// Nav Item
+export interface SidebarNavItemProps {
+  href?: string
+  icon?: React.ReactNode
+  children: React.ReactNode
+  isActive?: boolean
+  badge?: React.ReactNode
+  onClick?: () => void
+  className?: string
+  /** Whether this is a nested item inside a section */
+  nested?: boolean
+  /** Whether this item is rendered inside a flyout panel (forces expanded styling) */
+  inFlyout?: boolean
+}
+
+export function SidebarNavItem({
+  href,
+  icon,
+  children,
+  isActive = false,
+  badge,
+  onClick,
+  className,
+  nested = false,
+  inFlyout = false,
+}: SidebarNavItemProps) {
+  const { sidebarState, activePath, closeFlyout } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed" && !inFlyout
+
+  const active = isActive || (href ? activePath === href : false)
+
+  const handleClick = React.useCallback(() => {
+    onClick?.()
+    if (inFlyout || href) {
+      closeFlyout()
+    }
+  }, [onClick, inFlyout, href, closeFlyout])
+
+  const baseStyles = cn(
+    "group relative flex min-w-0 items-center gap-3 rounded-2xl transition-all duration-150",
+    "focus-visible:ring-accent-9 focus:outline-none focus-visible:ring-2",
+    active
+      ? "bg-accent-4/50 text-accent-11 font-medium"
+      : "text-gray-11/70 hover:bg-gray-4/50 hover:text-gray-12",
+    isCollapsed ? "h-12 w-full justify-center" : "h-11 px-4",
+    className
+  )
+
+  const content = (
+    <>
+      {/* Active indicator */}
+      {active && (
+        <div
+          className={cn(
+            "bg-accent-9 absolute rounded-full transition-all",
+            isCollapsed
+              ? "bottom-1 left-1/2 h-1.5 w-1.5 -translate-x-1/2"
+              : "top-1/2 left-0 h-5 w-[3px] -translate-y-1/2"
+          )}
+        />
+      )}
+
+      {icon && (
+        <span
+          className={cn(
+            "shrink-0 transition-colors duration-150",
+            isCollapsed || nested ? "[&>svg]:size-[18px]" : "[&>svg]:size-4",
+            active ? "text-accent-11" : "group-hover:text-gray-12"
+          )}
+        >
+          {icon}
+        </span>
+      )}
+
+      {!isCollapsed && (
+        <>
+          <span
+            className={cn(
+              "flex-1 truncate text-left text-xs uppercase",
+              nested && "text-xs capitalize"
+            )}
+          >
+            {children}
+          </span>
+          {badge}
+        </>
+      )}
+    </>
+  )
+
+  // Collapsed mode with tooltip
+  if (isCollapsed) {
+    const tooltipText = typeof children === "string" ? children : undefined
+
+    if (href) {
+      return (
+        <TooltipTrigger delay={0}>
+          <Focusable>
+            <a href={href} onClick={handleClick} className={baseStyles}>
+              {content}
+            </a>
+          </Focusable>
+          <Tooltip placement="right">{children}</Tooltip>
+        </TooltipTrigger>
+      )
+    }
+
+    return (
+      <Button
+        variant="ghost"
+        tooltipPlacement="right"
+        tooltip={tooltipText}
+        onClick={handleClick}
+        className={cn(baseStyles, "w-full")}
+      >
+        {content}
+      </Button>
+    )
+  }
+
+  // Normal mode
+  if (href) {
+    return (
+      <a href={href} onClick={handleClick} className={baseStyles}>
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button onClick={handleClick} className={cn(baseStyles, "w-full")}>
+      {content}
+    </button>
+  )
+}
+
+// Sidebar Divider
+export function SidebarSeparator({ className }: { className?: string }) {
+  const { sidebarState } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed"
+
+  return (
+    <div
+      className={cn(
+        "bg-gray-6/50",
+        isCollapsed ? "mx-auto my-1.5 h-px w-8" : "my-2 h-px",
+        className
+      )}
+    />
+  )
+}
+
+// Search box for sidebar
+export interface SidebarSearchProps {
+  placeholder?: string
+  shortcut?: string
+  onSearch?: (value: string) => void
+  className?: string
+}
+
+export function SidebarSearch({
+  placeholder = "Search",
+  shortcut = "⌘K",
+  onSearch,
+  className,
+}: SidebarSearchProps) {
+  const { sidebarState } = useDashboard()
+  const isCollapsed = sidebarState === "collapsed"
+
+  if (isCollapsed) {
+    return (
+      <div className="px-3 py-2">
+        <Button
+          mode="icon"
+          variant="ghost"
+          tooltip={`Search (${shortcut})`}
+          className={cn(
+            "flex h-12 w-full items-center justify-center rounded-2xl",
+            "text-gray-11 hover:bg-gray-4/50 hover:text-gray-12",
+            className
+          )}
+        >
+          <Search className="size-5" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("px-3 py-2", className)}>
+      <SearchInput
+        placeholder={placeholder}
+        onChange={(value) => onSearch?.(value)}
+        className="h-12 w-full rounded-2xl"
+      />
+    </div>
+  )
+}

package/src/components/DashboardLayout/index.ts

@@ -0,0 +1,33 @@
+export {
+  DashboardContent,
+  DashboardHeader,
+  DashboardLayout,
+  DashboardMain,
+  Sidebar,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarNav,
+  useDashboard,
+  type DashboardContentProps,
+  type DashboardHeaderProps,
+  type DashboardLayoutProps,
+  type DashboardMainProps,
+  type SidebarFooterProps,
+  type SidebarHeaderProps,
+  type SidebarNavProps,
+  type SidebarProps,
+} from "./DashboardLayout"
+
+export {
+  SidebarNavGroup,
+  SidebarNavItem,
+  SidebarNavSection,
+  SidebarSearch,
+  SidebarSeparator,
+  SidebarToggle,
+  type SidebarNavGroupProps,
+  type SidebarNavItemProps,
+  type SidebarNavSectionProps,
+  type SidebarSearchProps,
+  type SidebarToggleProps,
+} from "./SidebarNav"