layout for gluon pages

app/gluons/content-accordion/page.tsx

@@ -0,0 +1,58 @@
+import { 
+    Breadcrumb, 
+    BreadcrumbItem, 
+    BreadcrumbLink, 
+    BreadcrumbList, 
+    BreadcrumbSeparator 
+} from "@/components/ui/breadcrumb";
+import { 
+    Tabs, 
+    TabsContent, 
+    TabsList, 
+    TabsTrigger 
+} from "@/components/ui/tabs";
+import { Code } from "bright";
+
+const ContentAccordionPage = () => {
+    return (
+        <div>
+            <section className="w-full space-y-2">
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        <BreadcrumbItem>
+                            <BreadcrumbLink href="#">Docs</BreadcrumbLink>
+                        </BreadcrumbItem>
+                        <BreadcrumbSeparator />
+                        <BreadcrumbItem>
+                            <BreadcrumbLink href="#">Gluons</BreadcrumbLink>
+                        </BreadcrumbItem>
+                    </BreadcrumbList>
+                </Breadcrumb>
+                <h1 className="text-4xl font-semibold">ContentAccordion</h1>
+            </section>
+            <section className="flex h-full w-full py-10 m-auto items-center justify-start">
+                <Tabs defaultValue="preview" className="w-full">
+                    <TabsList>
+                        <TabsTrigger value="preview">Preview</TabsTrigger>
+                        <TabsTrigger value="code">Code</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="preview" className="w-full border rounded-md p-10">
+                        preview
+                    </TabsContent>
+                    <TabsContent value="code">
+                        <Code 
+                            lang="tsx"
+                            title="HoverGrid.tsx"
+                            lineNumbers
+                            className="w-full border rounded-md"
+                        >
+                            {`import React from "react";`}
+                        </Code>
+                    </TabsContent>
+                </Tabs>
+            </section>
+        </div>
+    )
+}
+
+export default ContentAccordionPage;

app/blocks/hover-grid/page.tsx → app/gluons/hover-grid/page.tsx

@@ -1,9 +1,28 @@
-import { Grid, GridCell } from "@/components/grid";
-import { HoverGrid, HoverGridCell, HoverGridContent, HoverGridDescription, HoverGridFooter, HoverGridHeader, HoverGridLeader, HoverGridTitle } from "@/components/hover-grid";
-import { ArrowUpRight } from "lucide-react";
+import { 
+    HoverGrid, 
+    HoverGridCell, 
+    HoverGridContent, 
+    HoverGridDescription, 
+    HoverGridFooter, 
+    HoverGridHeader, 
+    HoverGridLeader, 
+    HoverGridTitle 
+} from "@/components/gluons/hover-grid";
+import { 
+    Breadcrumb, 
+    BreadcrumbItem, 
+    BreadcrumbLink, 
+    BreadcrumbList, 
+    BreadcrumbSeparator 
+} from "@/components/ui/breadcrumb";
+import { 
+    Tabs, 
+    TabsContent, 
+    TabsList, 
+    TabsTrigger 
+} from "@/components/ui/tabs";
 import { Code } from "bright";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { ArrowUpRight } from "lucide-react";
 
 const HoverGridCode = 
 `import { 
@@ -89,20 +108,20 @@ export const HoverGridDemo = () => {
 
 const HoverGridPage = () => {
     return (
-        <div className="container">
-            <section className="w-full py-10">
+        <div>
+            <section className="w-full space-y-2">
                 <Breadcrumb>
                     <BreadcrumbList>
                         <BreadcrumbItem>
                             <BreadcrumbLink href="#">Docs</BreadcrumbLink>
                         </BreadcrumbItem>
                         <BreadcrumbSeparator />
                         <BreadcrumbItem>
-                            <BreadcrumbLink href="#">Components</BreadcrumbLink>
+                            <BreadcrumbLink href="#">Gluons</BreadcrumbLink>
                         </BreadcrumbItem>
                     </BreadcrumbList>
                 </Breadcrumb>
-                <h1 className="text-5xl font-semibold">HoverGrid</h1>
+                <h1 className="text-4xl font-semibold">HoverGrid</h1>
             </section>
             <section className="flex h-full w-full py-10 m-auto items-center justify-start">
                 <Tabs defaultValue="preview" className="w-full">

app/gluons/layout.tsx

@@ -0,0 +1,32 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "@/styles/globals.css";
+import { cn } from "@/lib/utils";
+import { ThemeProvider } from "@/components/providers/theme-provider";
+import { SiteHeader } from "@/components/site-header";
+import { Sidebar } from "@/components/sidebar";
+import { Container } from "@/components/container";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function BlocksLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <main>
+        <div className="pt-16 h-full flex flex-row gap-4">
+            <Sidebar />
+            <Container>
+                {children}
+            </Container>
+        </div>
+    </main>
+  );
+}

components/container.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useEffect } from "react";
+import { useMediaQuery } from "usehooks-ts";
+
+import { useSidebar } from "@/hooks/use-sidebar-store";
+import { cn } from "@/lib/utils";
+
+
+
+interface ContainerProps {
+    children: React.ReactNode;
+};
+
+export const Container = ({
+    children
+}: ContainerProps) => {
+    const matches = useMediaQuery("(max-width: 1024px)");
+    const { 
+        collapsed,
+        onCollapse,
+        onExpand, 
+    } = useSidebar((state) => state);
+
+    useEffect(() => {
+        if (matches) {
+            onCollapse();
+        } else {
+            onExpand();
+        }
+    }, [matches, onCollapse, onExpand]);
+
+    return (
+        <div className={cn(
+            "flex-1 p-8 overflow-auto",
+            collapsed ? "ml-0" : "lg:ml-48"
+        )}>
+            {children}
+        </div>
+    )
+};

components/sidebar/index.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+// BACKLOG: Use localStorage to store open/collapsed state of sidebar
+// import { useLocalStorage } from "usehooks-ts";
+// import { NavItem } from "./nav-item";
+import { Wrapper } from "./wrapper";
+// import { Toggle } from "./toggle";
+// import { Navigation } from "./navigation";
+// import { Footer } from "./footer";
+import { useTheme } from "next-themes";
+
+interface SidebarProps {
+    storageKey?: string;
+};
+
+export const Sidebar = ({
+    storageKey,
+}: SidebarProps) => {
+    const { theme } = useTheme();
+    return (
+        <Wrapper>
+            {/* <Toggle />
+            <Navigation />
+            <Footer /> */}
+            Aside
+        </Wrapper>
+    );
+};

components/sidebar/wrapper.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useSidebar } from "@/hooks/use-sidebar-store";
+
+interface WrapperProps {
+    children: React.ReactNode;
+};
+
+export const Wrapper = ({
+    children,
+}: WrapperProps) => {
+    const { collapsed } = useSidebar((state) => state);
+
+    return (
+        <aside
+            className={cn(
+                "fixed container py-8 left-0 flex flex-col w-48 h-full bg-background border-r",
+                collapsed && "hidden"
+            )}
+        >
+            {children}
+        </aside>
+    )
+};

components/site-header.tsx

@@ -2,9 +2,9 @@ import { ThemeToggle } from "@/components/theme-toggle"
 
 export const SiteHeader = () => {
     return (
-        <header className="sticky top-0 z-50 bg-background border-b">
+        <header className="fixed w-full top-0 z-50 bg-background border-b">
             <div className="container flex h-16 items-center justify-between space-x-4">
-                <div className="text-2xl">UI Library</div>
+                <div className="text-2xl">glui</div>
                 <ThemeToggle />
             </div>
         </header>

hooks/use-sidebar-store.ts

@@ -0,0 +1,13 @@
+import { create } from "zustand";
+
+interface SidebarStore {
+    collapsed: boolean;
+    onExpand: () => void;
+    onCollapse: () => void;
+};
+
+export const useSidebar = create<SidebarStore>((set) => ({
+    collapsed: false,
+    onExpand: () => set(() => ({ collapsed: false })),
+    onCollapse: () => set(() => ({ collapsed: true })),
+}));

package.json

@@ -58,8 +58,10 @@
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
     "vaul": "^0.9.0",
-    "zod": "^3.22.5"
+    "zod": "^3.22.5",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.3.3",