diff --git a/apps/dokploy/components/layouts/side.tsx b/apps/dokploy/components/layouts/side.tsx index 7a083167..fba01cfc 100644 --- a/apps/dokploy/components/layouts/side.tsx +++ b/apps/dokploy/components/layouts/side.tsx @@ -1,5 +1,5 @@ "use client"; - +import { useState, useEffect } from "react"; import { Activity, AudioWaveform, @@ -46,6 +46,7 @@ import { import { Separator } from "@/components/ui/separator"; import { Sidebar, + SIDEBAR_COOKIE_NAME, SidebarContent, SidebarFooter, SidebarGroup, @@ -369,6 +370,19 @@ function SidebarLogo() { } export default function Page({ children }: Props) { + const [defaultOpen, setDefaultOpen] = useState( + undefined, + ); + + useEffect(() => { + const cookieValue = document.cookie + .split("; ") + .find((row) => row.startsWith(`${SIDEBAR_COOKIE_NAME}=`)) + ?.split("=")[1]; + + setDefaultOpen(cookieValue === undefined ? true : cookieValue === "true"); + }, []); + const router = useRouter(); const pathname = usePathname(); const currentPath = router.pathname; @@ -445,6 +459,13 @@ export default function Page({ children }: Props) { return ( { + setDefaultOpen(open); + + document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}`; + }} style={ { "--sidebar-width": "19.5rem", diff --git a/apps/dokploy/components/ui/sidebar.tsx b/apps/dokploy/components/ui/sidebar.tsx index 24c80914..40f84873 100644 --- a/apps/dokploy/components/ui/sidebar.tsx +++ b/apps/dokploy/components/ui/sidebar.tsx @@ -17,7 +17,7 @@ import { import { useIsMobile } from "@/hooks/use-mobile"; import { cn } from "@/lib/utils"; -const SIDEBAR_COOKIE_NAME = "sidebar:state"; +export const SIDEBAR_COOKIE_NAME = "sidebar:state"; const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7; const SIDEBAR_WIDTH = "16rem"; const SIDEBAR_WIDTH_MOBILE = "18rem";