Remove AccountLayout section, create SidebarMenu component

makeswift · Jan 21, 2025 · 72043bb · 72043bb
1 parent c8da4d8
commit 72043bb
Show file tree

Hide file tree

Showing 19 changed files with 148 additions and 114 deletions.
diff --git a/apps/web/vibes/soul/docs/account-layout.mdx b/apps/web/vibes/soul/docs/account-layout.mdx
diff --git a/apps/web/vibes/soul/docs/sticky-sidebar-layout.mdx b/apps/web/vibes/soul/docs/sticky-sidebar-layout.mdx
@@ -0,0 +1,5 @@
+---
+title: Sticky Sidebar Layout
+preview: sticky-sidebar-layout-example
+previewSize: lg
+---
diff --git a/apps/web/vibes/soul/examples.ts b/apps/web/vibes/soul/examples.ts
@@ -13,11 +13,11 @@ export const examples = [
     component: lazy(() => import('./examples/primitives/accordions')),
   },
   {
-    name: 'account-layout-example',
+    name: 'sticky-sidebar-layout-example',
     dependencies: [],
     registryDependencies: [],
-    files: ['examples/sections/account-layout/index.tsx'],
-    component: lazy(() => import('./examples/sections/account-layout')),
+    files: ['examples/sections/sticky-sidebar-layout/index.tsx'],
+    component: lazy(() => import('./examples/sections/sticky-sidebar-layout')),
   },
   {
     name: 'account-settings-section-example',

diff --git a/apps/web/vibes/soul/examples/sections/account-layout/index.tsx b/apps/web/vibes/soul/examples/sections/account-layout/index.tsx
diff --git a/apps/web/vibes/soul/examples/sections/account-settings-section/index.tsx b/apps/web/vibes/soul/examples/sections/account-settings-section/index.tsx
@@ -1,5 +1,6 @@
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { AccountSettingsSection } from '@/vibes/soul/sections/account-settings-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 import { changePasswordAction, updateAccountAction } from './actions';
 
@@ -11,12 +12,12 @@ const links = [
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <AccountSettingsSection
         account={{ firstName: '', lastName: '', email: '' }}
         changePasswordAction={changePasswordAction}
         updateAccountAction={updateAccountAction}
       />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/address-list-section/index.tsx b/apps/web/vibes/soul/examples/sections/address-list-section/index.tsx
@@ -1,6 +1,7 @@
 import { Field, FieldGroup } from '@/vibes/soul/primitives/dynamic-form/schema';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { Address, AddressListSection } from '@/vibes/soul/sections/address-list-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 import { addressAction } from './actions';
 
@@ -109,13 +110,13 @@ const fields: Array<Field | FieldGroup<Field>> = [
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <AddressListSection
         addressAction={addressAction}
         addresses={addresses}
         defaultAddress={{ id: '1' }}
         fields={fields}
       />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-details-section/electric.tsx b/apps/web/vibes/soul/examples/sections/order-details-section/electric.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderDetailsSection } from '@/vibes/soul/sections/order-details-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Electric');
 
@@ -95,15 +96,15 @@ const order = {
 };
 
 const links = [
-  { href: '#', label: 'Orders' },
-  { href: '#', label: 'Addresses' },
-  { href: '#', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderDetailsSection order={order} prevHref="#" />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-details-section/luxury.tsx b/apps/web/vibes/soul/examples/sections/order-details-section/luxury.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderDetailsSection } from '@/vibes/soul/sections/order-details-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Luxury');
 
@@ -95,15 +96,15 @@ const order = {
 };
 
 const links = [
-  { href: '#', label: 'Orders' },
-  { href: '#', label: 'Addresses' },
-  { href: '#', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderDetailsSection order={order} prevHref="#" />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-details-section/warm.tsx b/apps/web/vibes/soul/examples/sections/order-details-section/warm.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderDetailsSection } from '@/vibes/soul/sections/order-details-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Warm');
 
@@ -95,15 +96,15 @@ const order = {
 };
 
 const links = [
-  { href: '#', label: 'Orders' },
-  { href: '#', label: 'Addresses' },
-  { href: '#', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderDetailsSection order={order} prevHref="#" />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-list-section/electric.tsx b/apps/web/vibes/soul/examples/sections/order-list-section/electric.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderListSection } from '@/vibes/soul/sections/order-list-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Electric');
 
@@ -56,15 +57,15 @@ const orders = [
 ];
 
 const links = [
-  { href: '/preview/soul/order-list-section-electric-example', label: 'Orders' },
-  { href: '/preview/soul/address-list-section-example', label: 'Addresses' },
-  { href: '/preview/soul/account-settings-section-example', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderListSection orders={orders} paginationInfo={{ startCursor: '1', endCursor: '5' }} />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-list-section/luxury.tsx b/apps/web/vibes/soul/examples/sections/order-list-section/luxury.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderListSection } from '@/vibes/soul/sections/order-list-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Luxury');
 
@@ -56,15 +57,15 @@ const orders = [
 ];
 
 const links = [
-  { href: '#', label: 'Orders' },
-  { href: '#', label: 'Addresses' },
-  { href: '#', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderListSection orders={orders} paginationInfo={{ startCursor: '1', endCursor: '5' }} />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/order-list-section/warm.tsx b/apps/web/vibes/soul/examples/sections/order-list-section/warm.tsx
@@ -1,6 +1,7 @@
 import { getProducts } from '@/vibes/soul/data';
-import { AccountLayout } from '@/vibes/soul/sections/account-layout';
 import { OrderListSection } from '@/vibes/soul/sections/order-list-section';
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
 
 const products = await getProducts('Warm');
 
@@ -56,15 +57,15 @@ const orders = [
 ];
 
 const links = [
-  { href: '#', label: 'Orders' },
-  { href: '#', label: 'Addresses' },
-  { href: '#', label: 'Account' },
+  { href: '#a', label: 'Orders' },
+  { href: '#b', label: 'Addresses' },
+  { href: '#c', label: 'Account' },
 ];
 
 export default function Preview() {
   return (
-    <AccountLayout links={links}>
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
       <OrderListSection orders={orders} paginationInfo={{ startCursor: '1', endCursor: '5' }} />
-    </AccountLayout>
+    </StickySidebarLayout>
   );
 }
diff --git a/apps/web/vibes/soul/examples/sections/sticky-sidebar-layout/index.tsx b/apps/web/vibes/soul/examples/sections/sticky-sidebar-layout/index.tsx
@@ -0,0 +1,16 @@
+import { SidebarMenu } from '@/vibes/soul/sections/sidebar-menu';
+import { StickySidebarLayout } from '@/vibes/soul/sections/sticky-sidebar-layout';
+
+const links = [
+  { href: '/preview/soul/sticky-sidebar-layout-example/Electric#a', label: 'Orders' },
+  { href: '/preview/soul/sticky-sidebar-layout-example/Electric#b', label: 'Addresses' },
+  { href: '/preview/soul/sticky-sidebar-layout-example/Electric#c', label: 'Account' },
+];
+
+export default function Preview() {
+  return (
+    <StickySidebarLayout sidebar={<SidebarMenu links={links} />} sidebarSize="small">
+      Put some stuff here!
+    </StickySidebarLayout>
+  );
+}
diff --git a/apps/web/vibes/soul/navigation.ts b/apps/web/vibes/soul/navigation.ts
@@ -155,12 +155,6 @@ export const navigation = [
   {
     title: 'Sections',
     pages: [
-      {
-        title: 'Account Layout',
-        slug: 'account-layout',
-        file: 'docs/account-layout.mdx',
-        component: 'account-layout',
-      },
       {
         title: 'Account Settings Section',
         slug: 'account-settings-section',
@@ -281,6 +275,12 @@ export const navigation = [
         file: 'docs/slideshow.mdx',
         component: 'slideshow',
       },
+      {
+        title: 'Sticky Sidebar Layout',
+        slug: 'sticky-sidebar-layout',
+        file: 'docs/sticky-sidebar-layout.mdx',
+        component: 'sticky-sidebar-layout',
+      },
       {
         title: 'Subscribe',
         slug: 'subscribe',

diff --git a/apps/web/vibes/soul/sections.ts b/apps/web/vibes/soul/sections.ts
@@ -2,10 +2,10 @@ import { Components } from '@/vibes/schema';
 
 export const sections = [
   {
-    name: 'account-layout',
+    name: 'sticky-sidebar-layout',
     dependencies: ['clsx'],
     registryDependencies: [],
-    files: ['sections/account-layout/index.tsx'],
+    files: ['sections/sticky-sidebar-layout/index.tsx'],
   },
   {
     name: 'account-settings-section',

diff --git a/apps/web/vibes/soul/sections/account-layout/index.tsx b/apps/web/vibes/soul/sections/account-layout/index.tsx