@eggspot/ui 0.0.0

package/src/components/DashboardLayout/DashboardLayout.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@eggspot/ui/components/Resizable"
+import { ScrollArea } from "@eggspot/ui/components/ScrollArea"
+import { cn } from "@eggspot/ui/lib/utils"
+import type { ImperativePanelHandle } from "react-resizable-panels"
+
+// Context for sidebar state
+interface DashboardContextValue {
+  sidebarState: "expanded" | "collapsed"
+  setSidebarState: (state: "expanded" | "collapsed") => void
+  toggleSidebar: () => void
+  isMobile: boolean
+  expandedGroups: string[]
+  toggleGroup: (title: string) => void
+  activePath: string
+  setActivePath: (path: string) => void
+  /** Currently open flyout group (for collapsed sidebar) */
+  flyoutGroup: string | null
+  setFlyoutGroup: (group: string | null) => void
+  closeFlyout: () => void
+  /** Sidebar bounding rect for flyout positioning */
+  sidebarRect: DOMRect | null
+  /** @deprecated Use sidebarRect.width instead */
+  sidebarWidth: number
+  setSidebarRect: (rect: DOMRect | null) => void
+}
+
+const DashboardContext = React.createContext<DashboardContextValue | null>(null)
+
+export function useDashboard() {
+  const context = React.useContext(DashboardContext)
+  if (!context) {
+    throw new Error("useDashboard must be used within a DashboardLayout")
+  }
+  return context
+}
+
+export interface DashboardLayoutProps {
+  children: React.ReactNode
+  /** Default sidebar size as percentage (default: 14) */
+  defaultSidebarSize?: number
+  /** Minimum sidebar size as percentage (default: 5) */
+  minSidebarSize?: number
+  /** Maximum sidebar size as percentage (default: 20) */
+  maxSidebarSize?: number
+  /** Collapsed sidebar size as percentage (default: 5) */
+  collapsedSidebarSize?: number
+  /** Size threshold to switch to collapsed mode (default: 8) */
+  collapseThreshold?: number
+  /** Default expanded nav groups */
+  defaultExpandedGroups?: string[]
+  /** Current active path for highlighting */
+  activePath?: string
+  className?: string
+}
+
+export function DashboardLayout({
+  children,
+  defaultSidebarSize = 14,
+  minSidebarSize = 5,
+  maxSidebarSize = 20,
+  collapsedSidebarSize = 5,
+  collapseThreshold = 7,
+  defaultExpandedGroups = [],
+  activePath: initialActivePath = "/",
+  className,
+}: DashboardLayoutProps) {
+  const [sidebarState, setSidebarState] = React.useState<
+    "expanded" | "collapsed"
+  >("expanded")
+  const [isMobile, setIsMobile] = React.useState(false)
+  const [expandedGroups, setExpandedGroups] = React.useState<string[]>(
+    defaultExpandedGroups
+  )
+  const [activePath, setActivePath] = React.useState(initialActivePath)
+  const [flyoutGroup, setFlyoutGroup] = React.useState<string | null>(null)
+  const [sidebarRect, setSidebarRect] = React.useState<DOMRect | null>(null)
+  const sidebarPanelRef = React.useRef<ImperativePanelHandle>(null)
+
+  const closeFlyout = React.useCallback(() => setFlyoutGroup(null), [])
+
+  const toggleSidebar = React.useCallback(() => {
+    const panel = sidebarPanelRef.current
+    if (!panel) return
+
+    if (panel.isCollapsed()) {
+      panel.expand()
+    } else {
+      panel.collapse()
+    }
+  }, [])
+
+  const toggleGroup = React.useCallback((title: string) => {
+    setExpandedGroups((prev) =>
+      prev.includes(title) ? prev.filter((g) => g !== title) : [...prev, title]
+    )
+  }, [])
+
+  React.useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768)
+    checkMobile()
+    window.addEventListener("resize", checkMobile)
+    return () => window.removeEventListener("resize", checkMobile)
+  }, [])
+
+  const handleResize = React.useCallback(
+    (size: number) => {
+      const newState = size <= collapseThreshold ? "collapsed" : "expanded"
+      setSidebarState(newState)
+      if (newState === "expanded") {
+        setFlyoutGroup(null)
+      }
+    },
+    [collapseThreshold]
+  )
+
+  const sidebar = React.Children.toArray(children).find(
+    (child) => React.isValidElement(child) && child.type === Sidebar
+  )
+  const content = React.Children.toArray(children).find(
+    (child) => React.isValidElement(child) && child.type === DashboardContent
+  )
+
+  return (
+    <DashboardContext.Provider
+      value={{
+        sidebarState,
+        setSidebarState,
+        toggleSidebar,
+        isMobile,
+        expandedGroups,
+        toggleGroup,
+        activePath,
+        setActivePath,
+        flyoutGroup,
+        setFlyoutGroup,
+        closeFlyout,
+        sidebarRect,
+        sidebarWidth: sidebarRect?.width ?? 0,
+        setSidebarRect,
+      }}
+    >
+      <div className={cn("bg-gray-1 h-full", className)}>
+        <ResizablePanelGroup direction="horizontal" className="h-full">
+          <ResizablePanel
+            ref={sidebarPanelRef}
+            order={1}
+            defaultSize={defaultSidebarSize}
+            minSize={minSidebarSize}
+            maxSize={maxSidebarSize}
+            collapsible
+            collapsedSize={collapsedSidebarSize}
+            onResize={handleResize}
+          >
+            {sidebar}
+          </ResizablePanel>
+
+          <ResizableHandle />
+
+          <ResizablePanel
+            order={2}
+            defaultSize={100 - defaultSidebarSize}
+            minSize={60}
+          >
+            {content}
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </DashboardContext.Provider>
+  )
+}
+
+// Sidebar Component
+export interface SidebarProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function Sidebar({ children, className }: SidebarProps) {
+  const { sidebarState, setSidebarRect } = useDashboard()
+  const sidebarRef = React.useRef<HTMLDivElement>(null)
+
+  // Update sidebar rect on resize and scroll
+  React.useEffect(() => {
+    const element = sidebarRef.current
+    if (!element) return
+
+    const updateRect = () => {
+      setSidebarRect(element.getBoundingClientRect())
+    }
+
+    const observer = new ResizeObserver(() => {
+      updateRect()
+    })
+
+    observer.observe(element)
+    updateRect()
+
+    // Also listen for scroll events in case sidebar moves
+    window.addEventListener("scroll", updateRect, true)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener("scroll", updateRect, true)
+    }
+  }, [setSidebarRect])
+
+  return (
+    <div
+      ref={sidebarRef}
+      className={cn(
+        "flex h-full flex-col overflow-hidden",
+        "from-gray-2 to-gray-1 bg-linear-to-b",
+        className
+      )}
+      data-state={sidebarState}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Sidebar Header (Logo area)
+export interface SidebarHeaderProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SidebarHeader({ children, className }: SidebarHeaderProps) {
+  const { sidebarState } = useDashboard()
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center p-4 pb-0",
+        sidebarState === "collapsed"
+          ? "flex-col justify-center gap-2 px-3 pt-4"
+          : "justify-between",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Sidebar Nav Container
+export interface SidebarNavProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SidebarNav({ children, className }: SidebarNavProps) {
+  return (
+    <ScrollArea
+      className={cn(
+        "min-h-0 flex-1 overflow-hidden",
+        "[&>[data-slot=scroll-area-viewport]>div]:!block",
+        className
+      )}
+    >
+      <nav className="px-3 py-2">
+        <div className="space-y-2">{children}</div>
+      </nav>
+    </ScrollArea>
+  )
+}
+
+// Sidebar Footer (pinned to bottom)
+export interface SidebarFooterProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function SidebarFooter({ children, className }: SidebarFooterProps) {
+  const { sidebarState } = useDashboard()
+
+  return (
+    <div
+      className={cn(
+        "border-gray-6/50 mt-auto shrink-0 border-t p-3",
+        sidebarState === "collapsed" && "py-3",
+        className
+      )}
+    >
+      <div className="space-y-1.5">{children}</div>
+    </div>
+  )
+}
+
+// Dashboard Content Area
+export interface DashboardContentProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function DashboardContent({
+  children,
+  className,
+}: DashboardContentProps) {
+  return (
+    <div
+      className={cn(
+        "bg-gray-1 flex h-full flex-col overflow-hidden",
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Dashboard Header (in main content area)
+export interface DashboardHeaderProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+export function DashboardHeader({ children, className }: DashboardHeaderProps) {
+  return (
+    <header
+      className={cn(
+        "border-gray-6 flex h-14 shrink-0 items-center justify-between border-b px-4",
+        className
+      )}
+    >
+      {children}
+    </header>
+  )
+}
+
+// Dashboard Main Content
+export interface DashboardMainProps {
+  children: React.ReactNode
+  className?: string
+}
+
+export function DashboardMain({ children, className }: DashboardMainProps) {
+  return (
+    <main className={cn("flex-1 overflow-auto", className)}>{children}</main>
+  )
+}