packages

packages/mantine/src/contexts/themedLayoutContext/IThemedLayoutContext.ts

@@ -0,0 +1,6 @@
+export interface IThemedLayoutContext {
+  siderCollapsed: boolean;
+  setSiderCollapsed: (visible: boolean) => void;
+  mobileSiderOpen: boolean;
+  setMobileSiderOpen: (visible: boolean) => void;
+}

packages/mantine/src/contexts/themedLayoutContext/index.tsx

@@ -0,0 +1,33 @@
+import React, { type ReactNode, useState } from "react";
+
+import type { IThemedLayoutContext } from "./IThemedLayoutContext";
+
+export const ThemedLayoutContext = React.createContext<IThemedLayoutContext>({
+  siderCollapsed: false,
+  mobileSiderOpen: false,
+  setSiderCollapsed: () => undefined,
+  setMobileSiderOpen: () => undefined,
+});
+
+export const ThemedLayoutContextProvider: React.FC<{
+  children: ReactNode;
+  initialSiderCollapsed?: boolean;
+}> = ({ children, initialSiderCollapsed }) => {
+  const [siderCollapsed, setSiderCollapsed] = useState(
+    initialSiderCollapsed ?? false,
+  );
+  const [mobileSiderOpen, setMobileSiderOpen] = useState(false);
+
+  return (
+    <ThemedLayoutContext.Provider
+      value={{
+        siderCollapsed,
+        mobileSiderOpen,
+        setSiderCollapsed,
+        setMobileSiderOpen,
+      }}
+    >
+      {children}
+    </ThemedLayoutContext.Provider>
+  );
+};