(feat): more improvements

(feat): bump version

apps/showcase/src/App.tsx

@@ -1,14 +1,32 @@
 import { useState } from "react";
+import { Blocks, Home, Palette, Settings } from "lucide-react";
 import {
   Button,
+  LoadingScreen,
   OnboardingFlow,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarProvider,
   ThemeCustomizer,
   ThemeOnboardingPage,
   type OnboardingStep,
 } from "@methanium/ui";
 
+const navigation = [
+  { label: "Banana", icon: Home, variant: "default" },
+  { label: "Orange", icon: Blocks, variant: "subtleDefault" },
+  { label: "Apple", icon: Palette, variant: "outline" },
+  { label: "Kiwi", icon: Settings, variant: "secondary" },
+] as const;
+
 export default function App() {
   const [showOnboarding, setShowOnboarding] = useState(false);
+  const [showLoading, setShowLoading] = useState(false);
   const [onboardingThemeId, setOnboardingThemeId] = useState<string | null>(
     null,
   );
@@ -43,14 +61,61 @@ export default function App() {
       </div>
     );
 
-  return (
-    <main className="mx-auto flex max-w-[1500px] flex-col gap-7 p-5 md:p-10">
-      <div>
-        <Button variant="subtleDefault" onClick={() => setShowOnboarding(true)}>
-          Open onboarding
+  if (showLoading)
+    return (
+      <div className="relative">
+        <LoadingScreen
+          noProgress
+          title="Loading screen"
+          description="Blalblblalbalbl"
+        />
+        <Button
+          className="fixed top-4 left-4 z-50"
+          variant="outline"
+          onClick={() => setShowLoading(false)}
+        >
+          Hide loading screen
         </Button>
       </div>
-      <ThemeCustomizer />
-    </main>
+    );
+
+  return (
+    <SidebarProvider>
+      <Sidebar collapsible="none" className="h-auto! min-h-svh self-stretch">
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu className="gap-5">
+                {navigation.map(({ label, icon: Icon, variant }) => (
+                  <SidebarMenuItem key={label}>
+                    <Button variant={variant} className="w-full justify-start">
+                      <Icon />
+                      <span>{label}</span>
+                    </Button>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+
+      <SidebarInset>
+        <div className="mx-auto flex w-full max-w-[1500px] flex-col gap-7 p-5 md:p-10">
+          <div className="flex flex-wrap gap-2">
+            <Button
+              variant="subtleDefault"
+              onClick={() => setShowOnboarding(true)}
+            >
+              Open onboarding
+            </Button>
+            <Button variant="outline" onClick={() => setShowLoading(true)}>
+              Toggle loading screen
+            </Button>
+          </div>
+          <ThemeCustomizer />
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
   );
 }