Use PageHeaderContainer for all breadcrumbs

app/src/components/nav/AppShell.tsx

@@ -12,7 +12,7 @@ import {
 } from "@chakra-ui/react";
 import Head from "next/head";
 import Link from "next/link";
-import { BsGithub, BsPersonCircle } from "react-icons/bs";
+import { BsGearFill, BsGithub, BsPersonCircle } from "react-icons/bs";
 import { RiDatabase2Line, RiFlaskLine } from "react-icons/ri";
 import { signIn, useSession } from "next-auth/react";
 import UserMenu from "./UserMenu";
@@ -76,6 +76,21 @@ const NavSidebar = () => {
           </NavSidebarOption>
         )}
       </VStack>
+      <VStack w="full" alignItems="flex-start" spacing={0}>
+        <Text
+          pl={2}
+          pb={2}
+          fontSize="xs"
+          fontWeight="bold"
+          color="gray.500"
+          display={{ base: "none", md: "flex" }}
+        >
+          CONFIGURATION
+        </Text>
+        <NavSidebarOption activeHrefPattern="/settings">
+          <IconLink icon={BsGearFill} label="Project Settings" href="/settings" />
+        </NavSidebarOption>
+      </VStack>
       {user && <UserMenu user={user} borderColor={"gray.200"} />}
       <Divider />
       <VStack spacing={0} align="center">

app/src/components/nav/PageHeaderContainer.tsx

@@ -0,0 +1,15 @@
+import { Flex, type FlexProps } from "@chakra-ui/react";
+
+const PageHeaderContainer = (props: FlexProps) => {
+  return <Flex
+    px={8}
+    py={2}
+    w="full"
+    direction={{ base: "column", sm: "row" }}
+    alignItems={{ base: "flex-start", sm: "center" }}
+    justifyContent="space-between"
+    {...props}
+  />;
+};
+
+export default PageHeaderContainer;

app/src/components/nav/UserMenu.tsx

@@ -8,7 +8,6 @@ import {
   PopoverTrigger,
   PopoverContent,
   Link,
-  useColorMode,
   type StackProps,
 } from "@chakra-ui/react";
 import { type Session } from "next-auth";
@@ -17,7 +16,6 @@ import { BsBoxArrowRight, BsChevronRight, BsPersonCircle } from "react-icons/bs"
 import NavSidebarOption from "./NavSidebarOption";
 
 export default function UserMenu({ user, ...rest }: { user: Session } & StackProps) {
-  const { colorMode } = useColorMode();
 
   const profileImage = user.user.image ? (
     <Image src={user.user.image} alt="profile picture" boxSize={8} borderRadius="50%" />
@@ -28,39 +26,28 @@ export default function UserMenu({ user, ...rest }: { user: Session } & StackPro
   return (
     <>
       <Popover placement="right">
-        <VStack w="full" alignItems="flex-start" spacing={0} {...rest}>
-          <Text
-            pl={2}
-            pb={2}
-            fontSize="xs"
-            fontWeight="bold"
-            color="gray.500"
-            display={{ base: "none", md: "flex" }}
-          >
-            ACCOUNT
-          </Text>
-          <PopoverTrigger>
-            <NavSidebarOption>
-              <HStack
-                // Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
-                py={2}
-                px={1}
-                spacing={3}
-              >
-                {profileImage}
-                <VStack spacing={0} align="start" flex={1} flexShrink={1}>
-                  <Text fontWeight="bold" fontSize="sm">
-                    {user.user.name}
-                  </Text>
-                  <Text color="gray.500" fontSize="xs">
-                    {/* {user.user.email} */}
-                  </Text>
-                </VStack>
-                <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
-              </HStack>
-            </NavSidebarOption>
-          </PopoverTrigger>
-        </VStack>
+        <PopoverTrigger>
+          <NavSidebarOption>
+            <HStack
+              // Weird values to make mobile look right; can clean up when we make the sidebar disappear on mobile
+              py={2}
+              px={1}
+              spacing={3}
+              {...rest}
+            >
+              {profileImage}
+              <VStack spacing={0} align="start" flex={1} flexShrink={1}>
+                <Text fontWeight="bold" fontSize="sm">
+                  {user.user.name}
+                </Text>
+                <Text color="gray.500" fontSize="xs">
+                  {/* {user.user.email} */}
+                </Text>
+              </VStack>
+              <Icon as={BsChevronRight} boxSize={4} color="gray.500" />
+            </HStack>
+          </NavSidebarOption>
+        </PopoverTrigger>
         <PopoverContent _focusVisible={{ boxShadow: "unset", outline: "unset" }} maxW="200px">
           <VStack align="stretch" spacing={0}>
             {/* sign out */}