Sidebar styling

Unify the menu styles between the UserMenu and ProjectMenu

app/src/components/nav/NavSidebarOption.tsx

@@ -1,11 +1,10 @@
-import { Box, type BoxProps } from "@chakra-ui/react";
+import { Box, type BoxProps, forwardRef } from "@chakra-ui/react";
 import { useRouter } from "next/router";
 
-const NavSidebarOption = ({
+const NavSidebarOption = forwardRef<
-  activeHrefPattern,
+  { activeHrefPattern?: string; disableHoverEffect?: boolean } & BoxProps,
-  disableHoverEffect,
+  "div"
-  ...props
+>(({ activeHrefPattern, disableHoverEffect, ...props }, ref) => {
-}: { activeHrefPattern?: string; disableHoverEffect?: boolean } & BoxProps) => {
   const router = useRouter();
   const isActive = activeHrefPattern && router.pathname.startsWith(activeHrefPattern);
   return (
@@ -18,10 +17,13 @@ const NavSidebarOption = ({
       cursor="pointer"
       borderRadius={4}
       {...props}
+      ref={ref}
     >
       {props.children}
     </Box>
   );
-};
+});
+
+NavSidebarOption.displayName = "NavSidebarOption";
 
 export default NavSidebarOption;

app/src/components/nav/ProjectMenu.tsx

@@ -15,8 +15,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
-import { AiFillCaretDown } from "react-icons/ai";
+import { BsChevronRight, BsGear, BsPlus } from "react-icons/bs";
-import { BsGear, BsPlus } from "react-icons/bs";
 import { type Project } from "@prisma/client";
 
 import { useAppStore } from "~/state/store";
@@ -68,14 +67,9 @@ export default function ProjectMenu() {
       >
         PROJECT
       </Text>
-      <NavSidebarOption>
+      <Popover placement="right" isOpen={popover.isOpen} onClose={popover.onClose} closeOnBlur>
-        <Popover
-          placement="bottom-start"
-          isOpen={popover.isOpen}
-          onClose={popover.onClose}
-          closeOnBlur
-        >
         <PopoverTrigger>
+          <NavSidebarOption>
             <HStack w="full" onClick={popover.onToggle}>
               <Flex
                 p={1}
@@ -92,15 +86,11 @@ export default function ProjectMenu() {
               <Text fontSize="sm" display={{ base: "none", md: "block" }} py={1} flex={1}>
                 {selectedProject?.name}
               </Text>
-              <Icon as={AiFillCaretDown} boxSize={3} size="xs" color="gray.500" mr={2} />
+              <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
             </HStack>
+          </NavSidebarOption>
         </PopoverTrigger>
-          <PopoverContent
+        <PopoverContent _focusVisible={{ outline: "unset" }} ml={-1}>
-            _focusVisible={{ boxShadow: "unset" }}
-            minW={0}
-            borderColor="blue.400"
-            w="full"
-          >
           <VStack alignItems="flex-start" spacing={2} py={4} px={2}>
             <Text color="gray.500" fontSize="xs" fontWeight="bold" pb={1}>
               PROJECTS
@@ -131,7 +121,6 @@ export default function ProjectMenu() {
           </VStack>
         </PopoverContent>
       </Popover>
-      </NavSidebarOption>
     </VStack>
   );
 }

app/src/components/nav/UserMenu.tsx

@@ -9,7 +9,6 @@ import {
   PopoverContent,
   Link,
   type StackProps,
-  Box,
 } from "@chakra-ui/react";
 import { type Session } from "next-auth";
 import { signOut } from "next-auth/react";
@@ -27,7 +26,6 @@ export default function UserMenu({ user, ...rest }: { user: Session } & StackPro
     <>
       <Popover placement="right">
         <PopoverTrigger>
-          <Box>
           <NavSidebarOption>
             <HStack
               // Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
@@ -48,9 +46,8 @@ export default function UserMenu({ user, ...rest }: { user: Session } & StackPro
               <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
             </HStack>
           </NavSidebarOption>
-          </Box>
         </PopoverTrigger>
-        <PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }} maxW="200px">
+        <PopoverContent _focusVisible={{ outline: "unset" }} ml={-1}>
           <VStack align="stretch" spacing={0}>
             {/* sign out */}
             <HStack