update

components/navigation.tsx

@@ -2,8 +2,9 @@
 
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { ChevronDown, ChevronRight } from 'lucide-react'
+import { ChevronDown, ChevronRight, Menu } from 'lucide-react'
 import { useEffect, useState } from "react"
+import { Button } from "@/components/ui/button"
 
 type NavItem = {
   name: string
@@ -20,18 +21,19 @@ type CategoryData = {
   [key: string]: SubCategory[]
 }
 
-export function Navigation() {
+export default function Component() {
   const [searchTerm, setSearchTerm] = useState("")
   const [activeCategory, setActiveCategory] = useState("all")
   const [activeSubCategory, setActiveSubCategory] = useState("all")
   const [data, setData] = useState<CategoryData>({})
   const [filteredItems, setFilteredItems] = useState<NavItem[]>([])
   const [expandedCategories, setExpandedCategories] = useState<string[]>([])
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
 
   useEffect(() => {
     async function loadData() {
       try {
-        const response = await fetch('/api/load-yaml-data');
+        const response = await fetch('https://aps.icu/api/load-yaml-data');
         const yamlData = await response.json();
         setData(yamlData);
       } catch (error) {
@@ -73,12 +75,20 @@ export function Navigation() {
   }
 
   return (
-    <div className="flex h-screen bg-gray-100 dark:bg-gray-900">
+    <div className="flex flex-col lg:flex-row h-screen bg-gray-100 dark:bg-gray-900">
+      <Button
+        className="lg:hidden fixed top-4 left-4 z-20"
+        size="icon"
+        variant="outline"
+        onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+      >
+        <Menu className="h-4 w-4" />
+      </Button>
       {/* Left Sidebar Navigation */}
-      <aside className="w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto">
+      <aside className={`w-full lg:w-64 bg-white dark:bg-gray-800 shadow-md overflow-y-auto h-64 lg:h-full ${isSidebarOpen ? 'block' : 'hidden'} lg:block fixed lg:static top-0 left-0 right-0 z-10`}>
         <ScrollArea className="h-full">
           <nav className="p-4">
-            <h2 className="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-200">APS NAV</h2>
+            <h2 className="text-lg font-semibold mb-4 text-gray-700 dark:text-gray-200">分类</h2>
             <button
               onClick={() => {
                 setActiveCategory("all")
@@ -124,11 +134,11 @@ export function Navigation() {
       </aside>
 
       {/* Main Content */}
-      <main className="flex-1 overflow-y-auto p-8">
+      <main className="flex-1 overflow-y-auto p-4 lg:p-8">
         {/* Search Bar */}
-        <div className="mb-8">
+        <div className="mb-4 lg:mb-8">
           <Input
-            className="w-full max-w-md mx-auto"
+            className="w-full max-w-full lg:max-w-md mx-auto"
             placeholder="搜索项目..."
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
@@ -136,7 +146,7 @@ export function Navigation() {
         </div>
 
         {/* Items Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-6">
           {filteredItems.map((item) => (
             <a
               key={item.name}
@@ -145,7 +155,7 @@ export function Navigation() {
               rel="noopener noreferrer"
               className="block overflow-hidden rounded-lg border bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-md transition-all hover:shadow-lg p-6"
             >
-              <h3 className="text-lg font-semibold mb-2">{item.name}</h3>
+              <h3 className="text-base lg:text-lg font-semibold mb-2">{item.name}</h3>
               <p className="text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
             </a>
           ))}

components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-scroll-area": "^1.2.1",
+        "@radix-ui/react-slot": "^1.1.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "js-yaml": "^4.1.0",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "js-yaml": "^4.1.0",