expose sidebars sizing, v0.1.4

src/contexts/LeftMenuContext.tsx

@@ -18,6 +18,13 @@ const SIDEBAR_MIN_WIDTH = 220;
 const SIDEBAR_MAX_WIDTH = 420;
 const SIDEBAR_COLLAPSED_WIDTH = 56;
 
+export type LeftMenuSizing = {
+    defaultWidth?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    collapsedWidth?: number;
+};
+
 export type LeftMenuRenderState = {
     collapsed: boolean;
     mobileOpen: boolean;
@@ -53,10 +60,40 @@ type LeftMenuProviderProps = {
     children: ReactNode;
     defaultContent: LeftMenuContent;
     closeOnPathname?: string;
+    sizing?: LeftMenuSizing;
 };
 
 const LeftMenuContext = createContext<LeftMenuContextValue | undefined>(undefined);
 
+function readSizingValue(value: number | undefined, fallback: number): number {
+    if (!Number.isFinite(value) || value == null || value <= 0) {
+        return fallback;
+    }
+
+    return value;
+}
+
+function resolveLeftMenuSizing(sizing: LeftMenuSizing | undefined) {
+    const requestedMinWidth = readSizingValue(sizing?.minWidth, SIDEBAR_MIN_WIDTH);
+    const requestedMaxWidth = readSizingValue(sizing?.maxWidth, SIDEBAR_MAX_WIDTH);
+    const minWidth = Math.min(requestedMinWidth, requestedMaxWidth);
+    const maxWidth = Math.max(requestedMinWidth, requestedMaxWidth);
+    const requestedDefaultWidth = readSizingValue(sizing?.defaultWidth, SIDEBAR_DEFAULT_WIDTH);
+    const defaultWidth = Math.min(maxWidth, Math.max(minWidth, requestedDefaultWidth));
+    const requestedCollapsedWidth = readSizingValue(
+        sizing?.collapsedWidth,
+        SIDEBAR_COLLAPSED_WIDTH,
+    );
+    const collapsedWidth = Math.min(minWidth, requestedCollapsedWidth);
+
+    return {
+        defaultWidth,
+        minWidth,
+        maxWidth,
+        collapsedWidth,
+    };
+}
+
 function readStoredCollapsed(): boolean {
     if (!globalThis.window) {
         return false;
@@ -69,7 +106,9 @@ export function LeftMenuProvider({
     children,
     defaultContent,
     closeOnPathname,
+    sizing,
 }: Readonly<LeftMenuProviderProps>) {
+    const { defaultWidth, minWidth, maxWidth, collapsedWidth } = resolveLeftMenuSizing(sizing);
     const [collapsed, setCollapsed] = useState<boolean>(() => readStoredCollapsed());
     const [mobileOpen, setMobileOpen] = useState(false);
     const [content, setContent] = useState<LeftMenuContent>(defaultContent);
@@ -162,9 +201,9 @@ export function LeftMenuProvider({
 
     const { width, startResize } = useSidePanelMachine({
         storageKey: SIDEBAR_WIDTH_KEY,
-        defaultWidth: SIDEBAR_DEFAULT_WIDTH,
-        minWidth: SIDEBAR_MIN_WIDTH,
-        maxWidth: SIDEBAR_MAX_WIDTH,
+        defaultWidth,
+        minWidth,
+        maxWidth,
         resizeAxis: 'from-left',
         resizingBodyClass: 'auth-sidebar-resizing',
         isOpen: mobileOpen,
@@ -177,9 +216,9 @@ export function LeftMenuProvider({
 
     const desktopMenuStyle = useMemo<LeftMenuStyle>(
         () => ({
-            '--auth-sidebar-width': `${collapsed ? SIDEBAR_COLLAPSED_WIDTH : width}px`,
+            '--auth-sidebar-width': `${collapsed ? collapsedWidth : width}px`,
         }),
-        [collapsed, width],
+        [collapsed, collapsedWidth, width],
     );
 
     const value = useMemo<LeftMenuContextValue>(