Refactor: move AppShell to global layout, add breadcrumbs, and restructure profile routes

src/components/layout/main-layout.tsx

@@ -0,0 +1,66 @@
+import { AppShell, Burger, Group, useMantineColorScheme } from "@mantine/core";
+import type React from "react";
+import { Header } from "@/components/header";
+import { Sidebar } from "@/components/sidebar";
+import { useSidebarFullscreen } from "@/hooks/use-sidebar-fullscreen";
+
+interface MainLayoutProps {
+	children: React.ReactNode;
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+	const {
+		opened,
+		toggleMobile,
+		sidebarCollapsed,
+		toggleSidebar,
+		handleMainClick,
+	} = useSidebarFullscreen();
+	const { colorScheme } = useMantineColorScheme();
+
+	const headerBgColor = colorScheme === "dark" ? "#11192D" : "#19355E";
+	const navbarBgColor = colorScheme === "dark" ? "#11192D" : "white";
+	const mainBgColor = colorScheme === "dark" ? "#11192D" : "#edf3f8ff";
+
+	return (
+		<AppShell
+			header={{ height: 60 }}
+			navbar={{
+				width: 300,
+				breakpoint: "sm",
+				collapsed: { mobile: !opened, desktop: sidebarCollapsed },
+			}}
+			padding="md"
+		>
+			<AppShell.Header bg={headerBgColor}>
+				<Group h="100%" px="md">
+					<Burger
+						opened={opened}
+						onClick={toggleMobile}
+						hiddenFrom="sm"
+						size="sm"
+					/>
+					<Header onSidebarToggle={toggleSidebar} />
+				</Group>
+			</AppShell.Header>
+
+			<AppShell.Navbar
+				p="md"
+				bg={navbarBgColor}
+				style={{ display: "flex", flexDirection: "column" }}
+			>
+				<div style={{ flex: 1, overflowY: "auto" }}>
+					<Sidebar />
+				</div>
+			</AppShell.Navbar>
+
+			<AppShell.Main
+				bg={mainBgColor}
+				onClick={handleMainClick}
+				style={{ cursor: sidebarCollapsed ? "default" : "pointer" }}
+			>
+				{children}
+			</AppShell.Main>
+		</AppShell>
+	);
+}