refactor: guide atoms (#2196)

packages/component/src/components/app-sidebar/index.jotai.ts

@@ -1,7 +1,8 @@
 import { atomWithStorage } from 'jotai/utils';
 
+export const APP_SIDEBAR_OPEN = 'app-sidebar-open';
 export const appSidebarOpenAtom = atomWithStorage(
-  'app-sidebar-open',
+  APP_SIDEBAR_OPEN,
   undefined as boolean | undefined
 );
 export const appSidebarWidthAtom = atomWithStorage(

packages/component/src/components/app-sidebar/index.tsx

@@ -21,7 +21,11 @@ import {
   sidebarButtonStyle,
   sidebarFloatMaskStyle,
 } from './index.css';
-import { appSidebarOpenAtom, appSidebarWidthAtom } from './index.jotai';
+import {
+  APP_SIDEBAR_OPEN,
+  appSidebarOpenAtom,
+  appSidebarWidthAtom,
+} from './index.jotai';
 
 export { appSidebarOpenAtom };
 
@@ -41,7 +45,10 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
     }, [setOpen]);
 
     useEffect(() => {
-      if (open === undefined) {
+      if (
+        open === undefined &&
+        localStorage.getItem(APP_SIDEBAR_OPEN) === null
+      ) {
         // give the initial value,
         // so that the sidebar can be closed on mobile by default
         const { matches } = window.matchMedia(