feat: working drawer

betagouv · Jun 10, 2024 · d1b37d4 · d1b37d4
1 parent e3ceab2
commit d1b37d4
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 81 deletions.
diff --git a/packages/frontend/panda.config.ts b/packages/frontend/panda.config.ts
@@ -24,6 +24,11 @@ export default defineConfig({
     "#fr-header-mobile-overlay-button-close": {
       mt: "10px !important",
     },
+    "@media (min-width: 48em)": {
+      ".fr-modal__body": {
+        maxHeight: "100vh !important",
+      },
+    },
   },
   theme: {
     extend: {

diff --git a/packages/frontend/src/components/Drawer.tsx b/packages/frontend/src/components/Drawer.tsx
diff --git a/packages/frontend/src/features/menu/Menu.tsx b/packages/frontend/src/features/menu/Menu.tsx
@@ -7,12 +7,13 @@ import { useEffect } from "react";
 
 export const Menu = ({ headerRef }: { headerRef: React.RefObject<HTMLElement> }) => {
   const headerBody = headerRef.current?.getElementsByClassName("fr-header__body-row")?.[0];
-
-  useEffect(() => {
-    setTimeout(() => {
-      drawerMenu.open();
-    }, 1000);
-  }, []);
+  // console.log("menu");
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     console.log("open drawer menu");
+  //     drawerMenu.open();
+  //   }, 1000);
+  // }, []);
 
   if (!headerBody) return null;
 
@@ -22,8 +23,6 @@ export const Menu = ({ headerRef }: { headerRef: React.RefObject<HTMLElement> })
         title=""
         className={css({
           display: "flex",
-          justifyContent: "flex-start !important",
-          alignItems: "flex-end !important",
           width: "100%",
           height: "100%",
           "& .fr-container": {
@@ -33,6 +32,7 @@ export const Menu = ({ headerRef }: { headerRef: React.RefObject<HTMLElement> })
             p: 0,
           },
           "& .fr-grid-row": {
+            justifyContent: "flex-end !important",
             height: "100%",
             maxHeight: "100%",
             p: 0,

diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
diff --git a/packages/frontend/src/features/menu/MyAccountMenu.tsx b/packages/frontend/src/features/menu/MyAccountMenu.tsx
@@ -9,25 +9,32 @@ import { Status } from "#components/SyncForm";
 import { RouteApi, getRouteApi } from "@tanstack/react-router";
 import { useIsDesktop } from "../../hooks/useIsDesktop";
 import { createModal } from "@codegouvfr/react-dsfr/Modal";
+import { drawerMenu } from "./MenuDrawer";
+import { useIsModalOpen } from "@codegouvfr/react-dsfr/Modal/useIsModalOpen";
+
 export const MyAccountMenu = () => {
+  const [menu, setMenu] = useState<NestedMenu>("main");
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
   return (
     <>
       <styled.div hideBelow="lg">
-        <Popover.Root positioning={{ placement: "bottom-end" }}>
-          <Popover.Trigger asChild>
-            <Flex alignItems="center">
-              <Status className={css({ display: "flex", alignItems: "center", fontSize: "10px" })} />
+        <Flex alignItems="center">
+          <Status className={css({ display: "flex", alignItems: "center", fontSize: "10px" })} />
+          <Popover.Root positioning={{ placement: "bottom-end" }}>
+            <Popover.Trigger asChild>
               <Button className={css({ ml: "16px", mb: "0" })} priority="tertiary" iconId="fr-icon-account-circle-fill">
                 Mon compte
               </Button>
-            </Flex>
-          </Popover.Trigger>
-          <Popover.Positioner>
-            <Popover.Content borderRadius="0">
-              <MyAccountMenuActions />
-            </Popover.Content>
-          </Popover.Positioner>
-        </Popover.Root>
+            </Popover.Trigger>
+            <Popover.Positioner>
+              <Popover.Content borderRadius="0">
+                <MyAccountMenuActions />
+              </Popover.Content>
+            </Popover.Positioner>
+          </Popover.Root>
+        </Flex>
       </styled.div>
       <styled.div hideFrom="lg">
         {/* @ts-ignore */}
@@ -66,6 +73,21 @@ export const MyAccountMenuActions = () => {
   const [menu, setMenu] = useState<NestedMenu>("main");
   const isDesktop = useIsDesktop();
 
+  const isModalOpen = useIsModalOpen(drawerMenu, {
+    onConceal: () => setMenu("main"),
+  });
+
+  useIsModalOpen(menuModal, {
+    onConceal: () => setMenu("main"),
+  });
+
+  const hookSetMenu = (menu: NestedMenu) => {
+    if (menu !== "main") {
+      drawerMenu.open();
+    } else drawerMenu.close();
+    setMenu(menu);
+  };
+
   const logout = useLogout();
   const deleteLocalData = () => {
     if (electric.isConnected) electric.disconnect();
@@ -78,16 +100,18 @@ export const MyAccountMenuActions = () => {
     { text: "Partage des CR", onClick: () => {}, disabled: true },
     { text: "Clauses départementales", onClick: () => {}, disabled: true },
     { text: "Clauses nationales", onClick: () => {}, disabled: true },
-    { text: "Assistance technique", onClick: () => setMenu("help") },
+    { text: "Assistance technique", onClick: () => hookSetMenu("help") },
     { text: "Se déconnecter", onClick: logout },
   ];
 
-  if (isDesktop && menu !== "main")
-    return (
-      <styled.div position="fixed" top="0" right="0" bottom="0" w="500px" h="100vh" bgColor="red">
-        salut
-      </styled.div>
-    );
+  if (isDesktop && menu !== "main") {
+    return null;
+  }
+  // return (
+  //   <styled.div position="fixed" top="0" right="0" bottom="0" w="500px" h="100vh" bgColor="red" isolation={"isolate"}>
+  //     salut
+  //   </styled.div>
+  // );
 
   if (menu === "help") {
     return (
@@ -105,6 +129,7 @@ export const MyAccountMenuActions = () => {
       {actions.map(({ text, onClick, disabled }, index) => (
         <>
           <Button
+            className={css({ w: "100%" })}
             type="button"
             disabled={disabled}
             priority="tertiary no outline"