refactor(api docks): added api docks back into the front end and prep for docusorus

frontend/src/components/Sidebar/sidebar.tsx

@@ -1,10 +1,14 @@
 import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { LaptopMinimal } from "lucide-react";
 import {
 	Sidebar,
 	SidebarContent,
-	SidebarHeader,
+	SidebarFooter,
 	SidebarMenu,
+	SidebarMenuButton,
 	SidebarMenuItem,
+	useSidebar,
 } from "@/components/ui/sidebar";
 import { useSession } from "@/lib/auth-client";
 import { getSettings } from "../../lib/queries/getSettings";
@@ -23,6 +27,7 @@ export function AppSidebar() {
 			openDock: ["read"],
 		}),
 	);
+	const { setOpen } = useSidebar();
 
 	// const { data: canReadWarehouse = false } = useQuery(
 	// 	permissionQuery({
@@ -36,7 +41,7 @@ export function AppSidebar() {
 			collapsible="offcanvas"
 			className="top-(--header-height) h-[calc(100svh-var(--header-height))]!"
 		>
-			<SidebarHeader>
+			<SidebarContent>
 				<SidebarMenu>
 					<SidebarMenuItem>
 						<SidebarContent>
@@ -64,7 +69,24 @@ export function AppSidebar() {
 						</SidebarContent>
 					</SidebarMenuItem>
 				</SidebarMenu>
-			</SidebarHeader>
+			</SidebarContent>
+			{session &&
+				(session.user.role === "admin" ||
+					session.user.role === "systemAdmin" ||
+					session.user.role === "manager") && (
+					<SidebarFooter>
+						<SidebarMenu>
+							<SidebarMenuItem>
+								<SidebarMenuButton asChild>
+									<Link to={"/apidocs"} onClick={() => setOpen(false)}>
+										<LaptopMinimal />
+										<span>Api docs</span>
+									</Link>
+								</SidebarMenuButton>
+							</SidebarMenuItem>
+						</SidebarMenu>
+					</SidebarFooter>
+				)}
 		</Sidebar>
 	);
 }