fix: menu

Fix menu not closing
igeligel · Feb 16, 2025 · 18bf3ec · 18bf3ec
1 parent 1f82733
commit 18bf3ec
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/src/chakra-starter/application-ui/sidebar-with-header/MenuItem.tsx b/src/chakra-starter/application-ui/sidebar-with-header/MenuItem.tsx
@@ -9,6 +9,7 @@ import { MenuItemWrapper } from "./MenuItemWrapper";
 export type MenuItemProps = {
   title: string;
   icon: IconType;
+  isIconSelected?: boolean;
   onClick?: () => void;
   href?: string;
   isActive?: boolean;
@@ -22,7 +23,11 @@ const MenuItemContent: React.FC<MenuItemProps> = (props) => {
       color={"gray.500"}
     >
       <Box display={"flex"} alignItems={"center"}>
-        <Icon as={props.icon} strokeWidth={"3px"} />
+        <Icon
+          as={props.icon}
+          color={props.isIconSelected ? "green.500" : undefined}
+          strokeWidth={"3px"}
+        />
         <Text fontSize="sm" marginLeft={"2"} fontWeight={"semibold"}>
           {props.title}
         </Text>

diff --git a/src/chakra-starter/application-ui/sidebar-with-header/UserMenu.tsx b/src/chakra-starter/application-ui/sidebar-with-header/UserMenu.tsx
@@ -8,8 +8,10 @@ import { FiBriefcase, FiSettings, FiUsers } from "react-icons/fi";
 import { MenuItem } from "./MenuItem";
 import { MenuItemPopover } from "./MenuItemPopover";
 import { UserMenuOfficeSelector } from "./UserMenuOfficeSelector";
+import { useMenuStore } from "./menuStore";
 
 const AccountSubMenu = () => {
+  const { setIsAccountMenuOpen } = useMenuStore();
   const t = useTranslations("AppMenu");
   const onLogoutClick = async () => {
     signOut({
@@ -24,6 +26,9 @@ const AccountSubMenu = () => {
         width={"100%"}
         textDecoration={"none"}
         _hover={{ textDecoration: "none" }}
+        onClick={() => {
+          setIsAccountMenuOpen(false);
+        }}
       >
         <MenuItem title={t("labelSettings")} icon={FiBriefcase} />
       </Link>
@@ -43,6 +48,9 @@ type Props = {
 
 export const UserMenu = ({ isUserAdmin }: Props) => {
   const t = useTranslations("AppMenu");
+
+  const { isAccountMenuOpen, setIsAccountMenuOpen } = useMenuStore();
+
   return (
     <Box width={"100%"}>
       <VStack spacing={"0.5"} marginTop={"2"}>
@@ -63,6 +71,10 @@ export const UserMenu = ({ isUserAdmin }: Props) => {
           title={t("labelAccount")}
           icon={FiSettings}
           submenu={<AccountSubMenu />}
+          controlled={{
+            isOpen: isAccountMenuOpen,
+            setIsOpen: setIsAccountMenuOpen,
+          }}
         />
       </VStack>
     </Box>

diff --git a/src/chakra-starter/application-ui/sidebar-with-header/UserMenuOfficeSelectorList.tsx b/src/chakra-starter/application-ui/sidebar-with-header/UserMenuOfficeSelectorList.tsx
@@ -1,9 +1,10 @@
 import { VStack } from "@chakra-ui/react";
 import { Office } from "@prisma/client";
-import { FiBriefcase } from "react-icons/fi";
+import { FiBriefcase, FiCheckCircle } from "react-icons/fi";
 
 import { trpc } from "../../../utils/trpc";
 import { MenuItem } from "./MenuItem";
+import { useMenuStore } from "./menuStore";
 
 type UserMenuOfficeSelectorListProps = {
   offices: Office[];
@@ -12,8 +13,11 @@ type UserMenuOfficeSelectorListProps = {
 export const UserMenuOfficeSelectorList = (
   props: UserMenuOfficeSelectorListProps,
 ) => {
+  const { setIsOfficeSelectorOpen, setIsOfficeSelectorHighlighted } =
+    useMenuStore();
   const utils = trpc.useUtils();
   const { offices } = props;
+  const userQuery = trpc.user.get.useQuery();
   const updateSelectedOfficeMutation =
     trpc.user.selectCurrentOffice.useMutation();
 
@@ -25,13 +29,18 @@ export const UserMenuOfficeSelectorList = (
             id: office.id,
           });
           utils.invalidate();
+          setIsOfficeSelectorHighlighted(false);
+          setIsOfficeSelectorOpen(false);
         };
 
+        const isOfficeSelected = userQuery.data?.currentOfficeId === office.id;
+
         return (
           <MenuItem
             key={office.id}
             title={office.name}
-            icon={FiBriefcase}
+            isIconSelected={isOfficeSelected}
+            icon={isOfficeSelected ? FiCheckCircle : FiBriefcase}
             onClick={updateSelectedOffice}
           />
         );

diff --git a/src/chakra-starter/application-ui/sidebar-with-header/menuStore.tsx b/src/chakra-starter/application-ui/sidebar-with-header/menuStore.tsx
@@ -9,6 +9,8 @@ interface MenuState {
   setIsOfficeSelectorHighlighted: (
     newIsOfficeSelectorHighlighted: boolean,
   ) => void;
+  isAccountMenuOpen: boolean;
+  setIsAccountMenuOpen: (newIsAccountMenuOpen: boolean) => void;
 }
 
 export const useMenuStore = create<MenuState>((set) => ({
@@ -30,4 +32,7 @@ export const useMenuStore = create<MenuState>((set) => ({
         isOfficeSelectorHighlighted: newIsOfficeSelectorHighlighted,
       };
     }),
+  isAccountMenuOpen: false,
+  setIsAccountMenuOpen: (newIsAccountMenuOpen) =>
+    set({ isAccountMenuOpen: newIsAccountMenuOpen }),
 }));