fix(site): fixsidebar styles (#10891)

site/src/components/SettingsLayout/Sidebar.tsx

@@ -26,7 +26,6 @@ export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
         title={user.username}
         subtitle={user.email}
       />
-      ;
       <SidebarNavItem href="account" icon={AccountIcon}>
         Account
       </SidebarNavItem>

site/src/components/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,45 @@
+import { Sidebar, SidebarHeader, SidebarNavItem } from "./Sidebar";
+import type { Meta, StoryObj } from "@storybook/react";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
+import FingerprintOutlinedIcon from "@mui/icons-material/FingerprintOutlined";
+import AccountIcon from "@mui/icons-material/Person";
+import ScheduleIcon from "@mui/icons-material/EditCalendarOutlined";
+import SecurityIcon from "@mui/icons-material/LockOutlined";
+
+const meta: Meta<typeof Sidebar> = {
+  title: "components/Sidebar",
+  component: Sidebar,
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <Sidebar>
+        <SidebarHeader
+          avatar={<UserAvatar username="Jon" />}
+          title="Jon"
+          subtitle="jon@coder.com"
+        />
+        <SidebarNavItem href="account" icon={AccountIcon}>
+          Account
+        </SidebarNavItem>
+        <SidebarNavItem href="schedule" icon={ScheduleIcon}>
+          Schedule
+        </SidebarNavItem>
+        <SidebarNavItem href="security" icon={SecurityIcon}>
+          Security
+        </SidebarNavItem>
+        <SidebarNavItem href="ssh-keys" icon={FingerprintOutlinedIcon}>
+          SSH Keys
+        </SidebarNavItem>
+        <SidebarNavItem href="tokens" icon={VpnKeyOutlined}>
+          Tokens
+        </SidebarNavItem>
+      </Sidebar>
+    ),
+  },
+};

site/src/components/Sidebar/Sidebar.tsx

@@ -29,7 +29,13 @@ export const SidebarHeader: FC<SidebarHeaderProps> = ({
   return (
     <Stack direction="row" alignItems="center" css={styles.info}>
       {avatar}
-      <div css={styles.data}>
+      <div
+        css={{
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
         {linkTo ? (
           <Link css={styles.title} to={linkTo}>
             {title}
@@ -80,9 +86,7 @@ const styles = {
     ...(theme.typography.body2 as CSSObject),
     marginBottom: 16,
   }),
-  data: {
-    overflow: "hidden",
-  },
+
   title: (theme) => ({
     fontWeight: 600,
     overflow: "hidden",