Function NavSidebar

app/src/components/nav/AppShell.tsx:38–179

()

const Divider = (props: BoxProps) => <Box h="1px" bgColor="gray.300" w="full" {...props} />;

const NavSidebar = () => {
  const user = useSession().data;
  const project = useSelectedProject().data;

  const sidebarExpanded = useAppStore((state) => state.sidebarExpanded);
  const setSidebarExpanded = useAppStore((state) => state.setSidebarExpanded);

  const isAdmin = useAccessCheck("requireIsAdmin").access;

  return (
    <VStack
      align="stretch"
      py={2}
      pb={0}
      height="100%"
      px={{ base: 2, md: sidebarExpanded ? 3 : 2 }}
      w={{ base: "56px", md: sidebarExpanded ? "220px" : "56px" }}
      transition="width 0.2s ease-in-out; padding 0.2s ease-in-out;"
      overflow="hidden"
      borderRightWidth={1}
      borderColor="gray.300"
    >
      <HStack
        as={Link}
        href="/"
        _hover={{ textDecoration: "none" }}
        spacing={{ base: 1, md: 0 }}
        mx={2}
        py={{ base: 1, md: 2 }}
        display={{ md: "none" }}
      >
        <Image src="/logo.svg" alt="" boxSize={6} mr={4} ml={0.5} />
      </HStack>
      <Divider display={{ md: "none" }} />

      <VStack align="flex-start" overflowY="auto" overflowX="hidden" flex={1}>
        {user != null && (
          <>
            <ProjectMenu displayProjectName={sidebarExpanded} />
            <Divider />
            <IconLink icon={IoStatsChartOutline} label="Request Logs" href="/request-logs" />
            <IconLink icon={AiOutlineDatabase} label="Datasets" href="/datasets" />
            <IconLink icon={AiOutlineThunderbolt} label="Fine Tunes" href="/fine-tunes" />
            <IconLink icon={FaBalanceScale} label="Evals" href="/evals" />
            {isAdmin && <IconLink icon={BsClipboard2Data} label="Monitors" href="/monitors" />}
            <VStack w="full" alignItems="flex-start" spacing={1} pt={8}>
              <Text
                pl={2}
                pb={2}
                fontSize="xs"
                fontWeight="bold"
                color="gray.500"
                h={6}
                display={{ base: "none", md: "flex" }}
              >
                {sidebarExpanded ? "CONFIGURATION" : ""}
              </Text>
              <IconLink icon={BsGear} label="Project Settings" href="/settings" />