basic layout

ekilie · Nov 30, 2024 · dfb5df2 · dfb5df2
1 parent 7717168
commit dfb5df2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/website/app/docs/layout.tsx b/website/app/docs/layout.tsx
@@ -8,7 +8,7 @@ interface DocsLayoutProps {
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="flex min-h-screen">
-      <aside className="fixed left-0 top-0 z-30 h-screen w-[250px] border-r bg-background">
+      <aside className="fixed left-0 top-0 z-30 h-screen w-[350px] border-r bg-background">
         <ScrollArea className="h-full">
           <Sidebar />
         </ScrollArea>

diff --git a/website/components/docs/sidebar.tsx b/website/components/docs/sidebar.tsx
@@ -5,27 +5,32 @@ import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { Search } from "@/components/docs/search"
-import { FileText, BookOpen, HelpCircle, Github } from 'lucide-react'
+import { FileText, BookOpen, HelpCircle, Github,ArrowDownToLine } from 'lucide-react'
 
 const navigation = [
+  {
+    name: "Installation",
+    href: "#installation",
+    icon: ArrowDownToLine,
+  },
   {
     name: "Documentation",
-    href: "/docs",
+    href: "#docs",
     icon: FileText,
   },
   {
     name: "Tutorial",
-    href: "/docs/tutorial",
+    href: "#tutorial",
     icon: BookOpen,
   },
   {
-    name: "Support",
-    href: "/docs/support",
+    name: "Sponsor",
+    href: "#sponsor",
     icon: HelpCircle,
   },
   {
     name: "Repository",
-    href: "https://github.com/yourusername/vintlang",
+    href: "https://github.com/ekilie/vint-lang",
     icon: Github,
   },
 ]
@@ -34,17 +39,16 @@ export function Sidebar() {
   const pathname = usePathname()
 
   return (
-    <div className="flex h-full flex-col px-4 py-6">
+    <div className="flex h-full flex-col px-6 py-8">
       <div className="mb-8">
         <Link href="/" className="flex items-center space-x-2">
-          <span className="text-2xl font-bold">Jōtai</span>
-          <span className="text-xl">状態</span>
+          <span className="text-8xl text-neutral-300 font-bold">Vint</span>
         </Link>
         <p className="mt-1 text-sm text-muted-foreground">
           Primitive and flexible state management for React
         </p>
       </div>
-      <Search />
+      {/* <Search /> */}
       <nav className="mt-4 flex-1">
         {navigation.map((item) => {
           const isActive = pathname === item.href
@@ -53,7 +57,7 @@ export function Sidebar() {
               key={item.name}
               variant={isActive ? "secondary" : "ghost"}
               className={cn(
-                "mb-1 w-full justify-start",
+                "mb-1 w-full justify-start shadow-lg",
                 isActive ? "bg-accent" : "hover:bg-accent/50"
               )}
               asChild