chore: update pnpm-lock.yaml to reflect lockfile v6, update dependencies versions, and remove redundant nested dependency details

frontend/src/components/app-sidebar.tsx

@@ -16,8 +16,10 @@ import {
 	TrendingUp,
 	User as UserIcon,
 } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 import * as React from "react";
 import { ModeToggle } from "@/components/mode-toggle";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
@@ -47,6 +49,8 @@ import {
 	SidebarMenuSub,
 	SidebarMenuSubButton,
 	SidebarMenuSubItem,
+	SidebarRail,
+	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { useAuth } from "@/providers/auth-provider";
 import { CategoryService } from "@/services/category.service";
@@ -74,19 +78,43 @@ export function AppSidebar() {
 	const pathname = usePathname();
 	const searchParams = useSearchParams();
 	const { user, logout, isAuthenticated } = useAuth();
+	const { resolvedTheme } = useTheme();
 	const [categories, setCategories] = React.useState<Category[]>([]);
+	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
+		setMounted(true);
 		CategoryService.getAll().then(setCategories).catch(console.error);
 	}, []);
 
+	const logoSrc = React.useMemo(() => {
+		if (!mounted) return "/memegoat-color.svg";
+		return resolvedTheme === "dark"
+			? "/memegoat-white.svg"
+			: "/memegoat-black.svg";
+	}, [resolvedTheme, mounted]);
+
 	return (
 		<Sidebar collapsible="icon">
-			<SidebarHeader className="flex items-center justify-center py-4">
-				<Link href="/" className="flex items-center gap-2 font-bold text-xl">
-					<div className="bg-primary text-primary-foreground p-1 rounded">🐐</div>
-					<span className="group-data-[collapsible=icon]:hidden">MemeGoat</span>
+			<SidebarHeader className="flex flex-row items-center justify-between py-4 group-data-[collapsible=icon]:justify-center">
+				<Link
+					href="/"
+					className="flex items-center gap-2 font-bold text-xl overflow-hidden"
+				>
+					<div className="p-1 rounded shrink-0">
+						<Image
+							src={logoSrc}
+							alt="MemeGoat Logo"
+							width={32}
+							height={32}
+							className="w-8 h-8"
+						/>
+					</div>
+					<span className="group-data-[collapsible=icon]:hidden whitespace-nowrap">
+						MemeGoat
+					</span>
 				</Link>
+				<SidebarTrigger className="hidden md:flex group-data-[collapsible=icon]:hidden" />
 			</SidebarHeader>
 			<SidebarContent>
 				<SidebarGroup>
@@ -305,6 +333,7 @@ export function AppSidebar() {
 					</SidebarMenuItem>
 				</SidebarMenu>
 			</SidebarFooter>
+			<SidebarRail />
 		</Sidebar>
 	);
 }