feat: update layout

Author: hoangdevnull

apps/web/src/stories/layout.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import type { Meta, StoryFn } from '@storybook/react';
-import { CalendarIcon, Sidebar, type SidebarProps } from '@var-ui/core';
+import { CalendarIcon, Layout, Sidebar } from '@var-ui/core';
 import {
   Award01Icon,
   CoinsStacked03Icon,
@@ -17,9 +17,58 @@ import {
 
 const meta: Meta = {
   title: 'Components/Layout',
-  component: Sidebar,
+  component: Layout,
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    expandOnHover: {
+      description: ' Expand sidebar on hover',
+      control: {
+        type: 'boolean',
+      },
+    },
+    sidebarWidth: {
+      description: 'Sidebar width',
+      control: {
+        type: 'number',
+      },
+    },
+    active: {
+      description: 'Controllable Active item',
+      control: {
+        type: 'text',
+      },
+    },
+    defaultActive: {
+      description: 'Uncontrollable Default active item',
+      control: {
+        type: 'text',
+      },
+    },
+    onActiveChange: {
+      description: 'Callback when active item changes',
+      control: {
+        type: 'object',
+      },
+    },
+    open: {
+      description: 'Controllable Open sidebar',
+      control: {
+        type: 'text',
+      },
+    },
+    defaultOpen: {
+      description: 'Uncontrollable Default Open sidebar',
+      control: {
+        type: 'text',
+      },
+    },
+    onOpenChange: {
+      description: 'Callback when open sidebar changes',
+      control: {
+        type: 'object',
+      },
+    },
+  },
   args: {},
 };
 
@@ -160,54 +209,61 @@ const links = [
   },
 ];
 
-const DefaultTemplate: StoryFn<SidebarProps> = ({ ...args }) => {
+const DefaultTemplate: StoryFn<typeof Layout> = ({ ...args }) => {
   return (
-    <div className="bg-background-secondary relative min-h-[50vh]">
-      <Sidebar {...args}>
-        <Sidebar.Head>
-          <Sidebar.Head.Toggle />
+    <div className="bg-background-secondary border-border relative min-h-[50vh] border">
+      <Layout>
+        <Sidebar className="border-border border" {...args}>
+          <Sidebar.Head>
+            <Sidebar.Head.Toggle />
 
-          <Sidebar.Head.Logo>
-            <Logo />
-          </Sidebar.Head.Logo>
-          <Sidebar.Head.Title>Excellent in Every Block</Sidebar.Head.Title>
-        </Sidebar.Head>
+            <Sidebar.Head.Logo>
+              <Logo />
+            </Sidebar.Head.Logo>
+            <Sidebar.Head.Title>Excellent in Every Block</Sidebar.Head.Title>
+          </Sidebar.Head>
+
+          <Sidebar.Body>
+            {links.map((link) => (
+              <Sidebar.Body.Section key={link.title}>
+                <Sidebar.Body.Title>{link.title}</Sidebar.Body.Title>
+                <Sidebar.Body.List>
+                  {link.routes.map((item) => {
+                    if (item?.dropdowns) {
+                      return (
+                        <Sidebar.Body.List.Dropdown key={item.label} icon={item.icon} label={item.label}>
+                          {item.dropdowns.map((child) => (
+                            <Link passHref legacyBehavior href={child.href} key={child.value}>
+                              <Sidebar.Body.List.Item value={child.value} key={child.value} label={child.label} />
+                            </Link>
+                          ))}
+                        </Sidebar.Body.List.Dropdown>
+                      );
+                    }
 
-        <Sidebar.Body>
-          {links.map((link) => (
-            <Sidebar.Body.Section key={link.title}>
-              <Sidebar.Body.Title>{link.title}</Sidebar.Body.Title>
-              <Sidebar.Body.List>
-                {link.routes.map((item) => {
-                  if (item?.dropdowns) {
                     return (
-                      <Sidebar.Body.List.Dropdown key={item.label} icon={item.icon} label={item.label}>
-                        {item.dropdowns.map((child) => (
-                          <Link passHref legacyBehavior href={child.href} key={child.value}>
-                            <Sidebar.Body.List.Item value={child.value} key={child.value} label={child.label} />
-                          </Link>
-                        ))}
-                      </Sidebar.Body.List.Dropdown>
+                      <Link passHref legacyBehavior href={item.href} key={item.value}>
+                        <Sidebar.Body.List.Item
+                          value={item.value}
+                          key={item.value}
+                          icon={item.icon}
+                          label={item.label}
+                        />
+                      </Link>
                     );
-                  }
-
-                  return (
-                    <Link passHref legacyBehavior href={item.href} key={item.value}>
-                      <Sidebar.Body.List.Item value={item.value} key={item.value} icon={item.icon} label={item.label} />
-                    </Link>
-                  );
-                })}
-              </Sidebar.Body.List>
-            </Sidebar.Body.Section>
-          ))}
-        </Sidebar.Body>
+                  })}
+                </Sidebar.Body.List>
+              </Sidebar.Body.Section>
+            ))}
+          </Sidebar.Body>
 
-        <Sidebar.Footer>Footer</Sidebar.Footer>
-      </Sidebar>
+          <Sidebar.Footer>Footer</Sidebar.Footer>
+        </Sidebar>
 
-      <main className="ml-20">Main Page</main>
+        <Layout.Content>Main Page</Layout.Content>
+      </Layout>
     </div>
   );
 };
 
-export const Default: StoryFn<typeof Sidebar> = DefaultTemplate.bind({});
+export const Default: StoryFn<typeof Layout> = DefaultTemplate.bind({});