refactor(sidebar): split nav views and add router decorator

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/stories/sidebar.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { AppSidebar } from '@/components/sidebar/app-sidebar.view';
+import { NavUserSkeleton } from '@/components/sidebar/nav-user.skeletion';
+import { NavUserView } from '@/components/sidebar/nav-user.view';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { navData } from '@/lib/navData';
+import { user } from './exampleUser';
+
+const meta = {
+  title: 'Navigation/Sidebar',
+  component: AppSidebar,
+  decorators: [
+    Story => (
+      <SidebarProvider
+        style={
+          {
+            '--sidebar-width': 'calc(var(--spacing) * 72)',
+            '--header-height': 'calc(var(--spacing) * 12)',
+          } as React.CSSProperties
+        }
+      >
+        <Story />
+      </SidebarProvider>
+    ),
+  ],
+} satisfies Meta<typeof AppSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    navData,
+    footerWidget: <NavUserView user={user} />,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    navData,
+    footerWidget: <NavUserSkeleton />,
+  },
+};