Add useful context

Lovable/Lovable Prompt.txt

@@ -1358,3 +1358,186 @@ Add appropriate comments for complex logic
 Follow project's naming conventions
 
 
+<useful-context>
+Here is some useful context that was retrieved from our knowledge base and that you may find useful:
+<light-mode>
+and
+</light-mode>
+
+<shadcn-sidebar>
+Here follows the documentation for the Shadcn Sidebar component, which you can use to add a sidebar to your Lovable project.
+If you use a sidebar, make sure that there's a way to collapse it or bring it back.
+
+# Usage
+
+app/layout.tsx
+
+```typescript
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+components/app-sidebar.tsx
+
+```typescript
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent>
+        <SidebarGroup />
+        <SidebarGroup />
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}
+```
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+### Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+
+app/layout.tsx
+
+```typescript
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+IMPORTANT: Make sure that the div that `SidebarProvider` wraps uses `w-full` to avoid layout issues, it won't stretch otherwise.
+
+```typescript
+<SidebarProvider>
+  <div className="min-h-screen flex w-full">
+    ...
+  </div>
+</SidebarProvider>
+```
+
+### Create a new sidebar component at `components/app-sidebar.tsx`.
+
+components/app-sidebar.tsx
+
+```typescript
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent />
+    </Sidebar>
+  )
+}
+```
+
+### Now, let's add a `SidebarMenu` to the sidebar.
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+components/app-sidebar.tsx
+
+```typescript
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+// Menu items.
+const items = [
+  {
+    title: "Home",
+    url: "#",
+    icon: Home,
+  },
+  {
+    title: "Inbox",
+    url: "#",
+    icon: Inbox,
+  },
+  {
+    title: "Calendar",
+    url: "#",
+    icon: Calendar,
+  },
+  {
+    title: "Search",
+    url: "#",
+    icon: Search,
+  },
+  {
+    title: "Settings",
+    url: "#",
+    icon: Settings,
+  },
+]
+
+export function AppSidebar() {
+  return (
+    <Sidebar>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <a href={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+    </Sidebar>
+  )
+}
+```
+
+</shadcn-sidebar>
+</useful-context>