init

frontend/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

frontend/hooks/use-sidebar.ts

@@ -0,0 +1,49 @@
+import { create } from "zustand";
+import { persist, createJSONStorage } from "zustand/middleware";
+import { produce } from "immer";
+
+type SidebarSettings = { disabled: boolean; isHoverOpen: boolean };
+type SidebarStore = {
+  isOpen: boolean;
+  isHover: boolean;
+  settings: SidebarSettings;
+  toggleOpen: () => void;
+  setIsOpen: (isOpen: boolean) => void;
+  setIsHover: (isHover: boolean) => void;
+  getOpenState: () => boolean;
+  setSettings: (settings: Partial<SidebarSettings>) => void;
+};
+
+export const useSidebar = create(
+  persist<SidebarStore>(
+    (set, get) => ({
+      isOpen: true,
+      isHover: false,
+      settings: { disabled: false, isHoverOpen: false },
+      toggleOpen: () => {
+        set({ isOpen: !get().isOpen });
+      },
+      setIsOpen: (isOpen: boolean) => {
+        set({ isOpen });
+      },
+      setIsHover: (isHover: boolean) => {
+        set({ isHover });
+      },
+      getOpenState: () => {
+        const state = get();
+        return state.isOpen || (state.settings.isHoverOpen && state.isHover);
+      },
+      setSettings: (settings: Partial<SidebarSettings>) => {
+        set(
+          produce((state: SidebarStore) => {
+            state.settings = { ...state.settings, ...settings };
+          })
+        );
+      }
+    }),
+    {
+      name: "sidebar",
+      storage: createJSONStorage(() => localStorage)
+    }
+  )
+);

frontend/hooks/use-store.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+/**
+ * This hook fix hydration when use persist to save hook data to localStorage
+ */
+export const useStore = <T, F>(
+  store: (callback: (state: T) => unknown) => unknown,
+  callback: (state: T) => F
+) => {
+  const result = store(callback) as F;
+  const [data, setData] = useState<F>();
+
+  useEffect(() => {
+    setData(result);
+  }, [result]);
+
+  return data;
+};