Forked chat

2026-09-09 19:22:56 +00:00
parent addda6f54f
commit f2140c19b7
87 changed files with 8129 additions and 0 deletions
--- a/components/hamburger-menu.tsx
+++ b/components/hamburger-menu.tsx
@@ -0,0 +1,168 @@
+"use client"
+
+import { useState } from "react"
+import { Menu, X, ChevronDown, ChevronRight, Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import type { MenuItem } from "@/types/menu"
+
+interface HamburgerMenuProps {
+  menuItems: MenuItem[]
+  onMenuItemClick?: (item: MenuItem) => void
+  onMenuItemToggle?: (itemId: string) => void
+  transitionDuration?: string
+}
+
+interface MenuItemComponentProps {
+  item: MenuItem
+  onItemClick?: (item: MenuItem) => void
+  onItemToggle?: (itemId: string) => void
+  transitionDuration: string
+  depth?: number
+}
+
+function MenuItemComponent({ item, onItemClick, onItemToggle, transitionDuration, depth = 0 }: MenuItemComponentProps) {
+  if (item.isVisible === false) return null
+
+  const hasChildren = item.children && item.children.length > 0
+  const isExpanded = item.isExpanded || false
+  const paddingLeft = depth * 16 + 16 // 16px base + 16px per depth level
+
+  const handleClick = () => {
+    if (item.disabled) return
+
+    if (hasChildren) {
+      onItemToggle?.(item.id)
+    } else if (item.onClick) {
+      item.onClick()
+      onItemClick?.(item)
+    }
+  }
+
+  return (
+    <div className="w-full">
+      <button
+        onClick={handleClick}
+        disabled={item.disabled}
+        className={`
+          w-full flex items-center gap-2 py-2 px-4 text-left text-sm
+          hover:bg-muted/50 transition-colors duration-150
+          ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          ${item.isActive ? "bg-primary/20 border-l-2 border-primary" : ""}
+          ${item.isSelected ? "bg-accent" : ""}
+        `}
+        style={{ paddingLeft: `${paddingLeft}px` }}
+      >
+        {hasChildren && (
+          <div className="flex-shrink-0">
+            {isExpanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+          </div>
+        )}
+
+        {!hasChildren && <div className="w-3" />}
+
+        {item.icon && <div className="flex-shrink-0">{item.icon}</div>}
+
+        <span className="flex-1 truncate">{item.label}</span>
+
+        {item.isChecked && <Check className="h-3 w-3 flex-shrink-0" />}
+
+        {item.isLoading && (
+          <div className="h-3 w-3 flex-shrink-0 animate-spin rounded-full border border-current border-t-transparent" />
+        )}
+      </button>
+
+      {hasChildren && (
+        <div
+          className="overflow-hidden"
+          style={{
+            height: isExpanded ? "auto" : "0px",
+            transition: `height ${transitionDuration} ease-in-out`,
+          }}
+        >
+          <div
+            className="transition-opacity"
+            style={{
+              opacity: isExpanded ? 1 : 0,
+              transition: `opacity ${transitionDuration} ease-in-out`,
+            }}
+          >
+            {item.children?.map((child) => (
+              <MenuItemComponent
+                key={child.id}
+                item={child}
+                onItemClick={onItemClick}
+                onItemToggle={onItemToggle}
+                transitionDuration={transitionDuration}
+                depth={depth + 1}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function HamburgerMenu({
+  menuItems,
+  onMenuItemClick,
+  onMenuItemToggle,
+  transitionDuration = "300ms",
+}: HamburgerMenuProps) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen)
+  }
+
+  const handleMenuItemClick = (item: MenuItem) => {
+    onMenuItemClick?.(item)
+    // Close menu after clicking a leaf item (no children)
+    if (!item.children || item.children.length === 0) {
+      setIsOpen(false)
+    }
+  }
+
+  return (
+    <>
+      <Button variant="ghost" size="sm" onClick={toggleMenu} className="mr-2">
+        <Menu className="h-4 w-4" />
+      </Button>
+
+      {/* Overlay */}
+      {isOpen && <div className="fixed inset-0 bg-black/20 z-40" onClick={() => setIsOpen(false)} />}
+
+      {/* Menu Panel */}
+      <div
+        className={`
+          fixed top-0 left-0 h-full bg-background border-r shadow-lg z-50
+          transition-transform ease-in-out
+        `}
+        style={{
+          width: "280px",
+          transform: isOpen ? "translateX(0)" : "translateX(-100%)",
+          transition: `transform ${transitionDuration} ease-in-out`,
+        }}
+      >
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">Menu</h2>
+          <Button variant="ghost" size="sm" onClick={() => setIsOpen(false)}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <div className="overflow-y-auto h-full pb-16">
+          {menuItems.map((item) => (
+            <MenuItemComponent
+              key={item.id}
+              item={item}
+              onItemClick={handleMenuItemClick}
+              onItemToggle={onMenuItemToggle}
+              transitionDuration={transitionDuration}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}