migrating frame names a little bit.

HolodexNet · Oct 17, 2023 · 4f984a3 · 4f984a3
1 parent 03c6370
commit 4f984a3
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
@@ -1,26 +1,28 @@
+import { toggleSidebarAtom } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Button } from "@/shadcn/ui/button";
 import { userAtom } from "@/store/auth";
 import { useAtom, useAtomValue } from "jotai";
+import { useSetAtom } from "jotai/react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-interface HeaderProps {
-  onClick: () => void;
+interface HeaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>{
   id: string;
 }
 
-export function Header({ onClick, id }: HeaderProps) {
+export function Header({ id }: HeaderProps) {
   const { t } = useTranslation();
   const [dark, toggle] = useAtom(darkAtom);
   const user = useAtomValue(userAtom);
+  const frameToggleSidebar = useSetAtom(toggleSidebarAtom);
 
   return (
     <header
       id={id}
       className="sticky top-0 z-40 flex items-center gap-4 bg-base-2 px-8"
     >
-      <Button size="icon-lg" variant="ghost" onClick={onClick}>
+      <Button size="icon-lg" variant="ghost" onClick={frameToggleSidebar}>
         <div className="i-heroicons:bars-3 rounded-md p-3" />
       </Button>
       <div className="justify-start py-1 pl-3 text-xl">Hololive</div>

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -6,9 +6,10 @@ import {
   isFloatingAtom,
   isMobileAtom,
   onResizeAtom,
-  sidebarOpenAtom,
+  toggleSidebarAtom,
   sidebarShouldBeFullscreenAtom,
-  toggleAtom,
+  openSidebarAtom,
+  isSidebarOpenAtom,
 } from "@/hooks/useFrame";
 import { useAtomValue, useSetAtom } from "jotai/react";
 import { darkAtom } from "@/hooks/useTheme";
@@ -22,7 +23,7 @@ import { Loading } from "../common/Loading";
 
 export function Frame() {
   const location = useLocation();
-  const toggle = useSetAtom(toggleAtom);
+  const toggle = useSetAtom(toggleSidebarAtom);
   const resize = useSetAtom(onResizeAtom);
   const dark = useAtomValue(darkAtom);
   const org = useAtomValue(orgAtom);
@@ -33,7 +34,7 @@ export function Frame() {
   }, []);
 
   const floating = useAtomValue(isFloatingAtom);
-  const open = useAtomValue(sidebarOpenAtom);
+  const open = useAtomValue(isSidebarOpenAtom);
   const isMobile = useAtomValue(isMobileAtom);
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
   console.log(fs);
@@ -55,7 +56,7 @@ export function Frame() {
       <aside className="z-50 border-r border-r-base">
         <Sidebar id="sidebar" onClose={toggle} />
       </aside>
-      <Header onClick={toggle} id="header" />
+      <Header "id="header/>
       <main className="">
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Suspense fallback={<Loading size="xl" />}>

diff --git a/packages/react/src/hooks/useFrame.ts b/packages/react/src/hooks/useFrame.ts
@@ -20,7 +20,7 @@ export const isMobileAtom = atom(
   (get) => get(sidebarShouldBeFullscreenAtom) //&& /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 );
 
-export const sidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
+export const isSidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
 
 export const onResizeAtom = atom(
   null,
@@ -30,9 +30,9 @@ export const onResizeAtom = atom(
     set(sidebarShouldBeFullscreenAtom, width < FooterSizeBreak);
     if (width < MobileSizeBreak) {
       console.log("closing")
-      set(sidebarOpenAtom, false)
+      set(isSidebarOpenAtom, false)
     } else {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom))
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom))
     }
   }
 );
@@ -42,38 +42,38 @@ export const onNavigateAtom = atom(
   (get, set, pageIsFullscreen: boolean) => {
     const currentFullscreenStatus = get(pageIsFullscreenAtom);
     if (currentFullscreenStatus !== pageIsFullscreen && pageIsFullscreen) {
-      set(sidebarOpenAtom, false);
+      set(isSidebarOpenAtom, false);
     }
     else if (currentFullscreenStatus !== pageIsFullscreen && !pageIsFullscreen) {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom));
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom));
     }
     if (currentFullscreenStatus !== pageIsFullscreen) {
       set(pageIsFullscreenAtom, pageIsFullscreen);
     }
   }
 );
 
-export const toggleAtom = atom(
+export const toggleSidebarAtom = atom(
   null,
   (get, set) => {
-    const currentOpenStatus = get(sidebarOpenAtom);
-    set(sidebarOpenAtom, !currentOpenStatus);
+    const currentOpenStatus = get(isSidebarOpenAtom);
+    set(isSidebarOpenAtom, !currentOpenStatus);
     set(sidebarPrefOpenAtom, !currentOpenStatus);
   }
 );
 
-export const openAtom = atom(
+export const openSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, true);
+    set(isSidebarOpenAtom, true);
     set(sidebarPrefOpenAtom, true);
   }
 );
 
-export const closeAtom = atom(
+export const closeSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, false);
+    set(isSidebarOpenAtom, false);
     set(sidebarPrefOpenAtom, false);
   }
 );