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

app/src/state/persist.ts

@@ -1,13 +0,0 @@
-import { PersistOptions } from "zustand/middleware/persist";
-import { State } from "./store";
-
-export const stateToPersist = {
-  selectedProjectId: null as string | null,
-};
-
-export const persistOptions: PersistOptions<State, typeof stateToPersist> = {
-  name: "persisted-app-store",
-  partialize: (state) => ({
-    selectedProjectId: state.selectedProjectId,
-  }),
-};

app/src/state/store.ts

@@ -1,13 +1,11 @@
 import { type StateCreator, create } from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { persist } from "zustand/middleware";
 import { createSelectors } from "./createSelectors";
 import {
   type SharedVariantEditorSlice,
   createVariantEditorSlice,
 } from "./sharedVariantEditor.slice";
 import { type APIClient } from "~/utils/api";
-import { persistOptions, stateToPersist } from "./persist";
 
 export type State = {
   drawerOpen: boolean;
@@ -25,11 +23,7 @@ export type SliceCreator<T> = StateCreator<State, [["zustand/immer", never]], []
 export type SetFn = Parameters<SliceCreator<unknown>>[0];
 export type GetFn = Parameters<SliceCreator<unknown>>[1];
 
-const useBaseStore = create<
+const useBaseStore = create<State, [["zustand/immer", never]]>(
-  State,
-  [["zustand/persist", typeof stateToPersist], ["zustand/immer", never]]
->(
-  persist(
   immer((set, get, ...rest) => ({
     api: null,
     setApi: (api) =>
@@ -53,8 +47,6 @@ const useBaseStore = create<
         state.selectedProjectId = id;
       }),
   })),
-    persistOptions,
-  ),
 );
 
 export const useAppStore = createSelectors(useBaseStore);