coder · BrunoQuaresma · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -420,10 +420,37 @@ export const AppRouter: FC = () => {
           />
         </Route>
 
-        <Route path="settings" element={<SettingsLayout />}>
-          <Route path="account" element={<AccountPage />} />
-          <Route path="security" element={<SecurityPage />} />
-          <Route path="ssh-keys" element={<SSHKeysPage />} />
+        <Route path="settings">
+          <Route
+            path="account"
+            element={
+              <AuthAndFrame>
+                <SettingsLayout>
+                  <AccountPage />
+                </SettingsLayout>
+              </AuthAndFrame>
+            }
+          />
+          <Route
+            path="security"
+            element={
+              <AuthAndFrame>
+                <SettingsLayout>
+                  <SecurityPage />
+                </SettingsLayout>
+              </AuthAndFrame>
+            }
+          />
+          <Route
+            path="ssh-keys"
+            element={
+              <AuthAndFrame>
+                <SettingsLayout>
+                  <SSHKeysPage />
+                </SettingsLayout>
+              </AuthAndFrame>
+            }
+          />
         </Route>
 
         <Route path="/@:username">

diff --git a/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx b/site/src/components/DeploySettingsLayout/DeploySettingsLayout.tsx
@@ -46,7 +46,7 @@ export const DeploySettingsLayout: React.FC<PropsWithChildren> = ({
 
   return (
     <Margins>
-      <Stack className={styles.wrapper} direction="row" spacing={5}>
+      <Stack className={styles.wrapper} direction="row" spacing={6}>
         <Sidebar />
         <main className={styles.content}>
           {deploymentConfig ? (

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -1,8 +1,8 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Brush from "@material-ui/icons/Brush"
 import LaunchOutlined from "@material-ui/icons/LaunchOutlined"
-import LockRounded from "@material-ui/icons/LockRounded"
-import Globe from "@material-ui/icons/Public"
+import LockRounded from "@material-ui/icons/LockOutlined"
+import Globe from "@material-ui/icons/PublicOutlined"
 import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
 import { GitIcon } from "components/Icons/GitIcon"
 import { Stack } from "components/Stack/Stack"
@@ -92,9 +92,9 @@ const useStyles = makeStyles((theme) => ({
   sidebarNavItem: {
     color: "inherit",
     display: "block",
-    fontSize: 16,
+    fontSize: 14,
     textDecoration: "none",
-    padding: theme.spacing(1.5, 1.5, 1.5, 3),
+    padding: theme.spacing(1.5, 1.5, 1.5, 2),
     borderRadius: theme.shape.borderRadius / 2,
     transition: "background-color 0.15s ease-in-out",
     marginBottom: 1,
@@ -117,7 +117,8 @@ const useStyles = makeStyles((theme) => ({
       left: 0,
       top: 0,
       backgroundColor: theme.palette.secondary.dark,
-      borderRadius: theme.shape.borderRadius,
+      borderTopLeftRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: theme.shape.borderRadius,
     },
   },
 

diff --git a/site/src/components/Section/Section.tsx b/site/src/components/Section/Section.tsx
@@ -1,7 +1,6 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import { FC } from "react"
-import { combineClasses } from "../../util/combineClasses"
 import { SectionAction } from "../SectionAction/SectionAction"
 
 type SectionLayout = "fixed" | "fluid"
@@ -31,7 +30,7 @@ export const Section: SectionFC = ({
 }) => {
   const styles = useStyles({ layout })
   return (
-    <section className={combineClasses([styles.root, className])}>
+    <section className={className}>
       <div className={styles.inner}>
         {(title || description) && (
           <div className={styles.header}>
@@ -60,33 +59,21 @@ export const Section: SectionFC = ({
 Section.Action = SectionAction
 
 const useStyles = makeStyles((theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-    boxShadow: theme.shadows[6],
-    marginBottom: theme.spacing(1),
-    padding: theme.spacing(6),
-    borderRadius: theme.shape.borderRadius,
-    border: `1px solid ${theme.palette.divider}`,
-
-    [theme.breakpoints.down("sm")]: {
-      padding: theme.spacing(4, 3, 4, 3),
-    },
-  },
   inner: ({ layout }: { layout: SectionLayout }) => ({
     maxWidth: layout === "fluid" ? "100%" : 500,
   }),
   alert: {
     marginBottom: theme.spacing(1),
   },
   header: {
-    marginBottom: theme.spacing(4),
+    marginBottom: theme.spacing(3),
     display: "flex",
     flexDirection: "row",
     justifyContent: "space-between",
   },
   description: {
     color: theme.palette.text.secondary,
     fontSize: 16,
-    marginTop: theme.spacing(2),
+    marginTop: theme.spacing(0.5),
   },
 }))
diff --git a/site/src/components/SettingsLayout/SettingsLayout.tsx b/site/src/components/SettingsLayout/SettingsLayout.tsx
@@ -1,38 +1,42 @@
-import Box from "@material-ui/core/Box"
-import { FC } from "react"
+import { makeStyles } from "@material-ui/core/styles"
+import { Sidebar } from "./Sidebar"
+import { Stack } from "components/Stack/Stack"
+import { FC, PropsWithChildren, Suspense } from "react"
 import { Helmet } from "react-helmet-async"
-import { Outlet } from "react-router-dom"
 import { pageTitle } from "../../util/page"
-import { AuthAndFrame } from "../AuthAndFrame/AuthAndFrame"
 import { Margins } from "../Margins/Margins"
-import { TabPanel } from "../TabPanel/TabPanel"
+import { useMe } from "hooks/useMe"
+import { Loader } from "components/Loader/Loader"
 
-export const Language = {
-  accountLabel: "Account",
-  securityLabel: "Security",
-  sshKeysLabel: "SSH keys",
-  settingsLabel: "Settings",
-}
-
-const menuItems = [
-  { label: Language.accountLabel, path: "/settings/account" },
-  { label: Language.securityLabel, path: "/settings/security" },
-  { label: Language.sshKeysLabel, path: "/settings/ssh-keys" },
-]
+export const SettingsLayout: FC<PropsWithChildren> = ({ children }) => {
+  const styles = useStyles()
+  const me = useMe()
 
-export const SettingsLayout: FC = () => {
   return (
-    <AuthAndFrame>
-      <Box display="flex" flexDirection="column">
-        <Helmet>
-          <title>{pageTitle("Settings")}</title>
-        </Helmet>
-        <Margins>
-          <TabPanel title={Language.settingsLabel} menuItems={menuItems}>
-            <Outlet />
-          </TabPanel>
-        </Margins>
-      </Box>
-    </AuthAndFrame>
+    <>
+      <Helmet>
+        <title>{pageTitle("Settings")}</title>
+      </Helmet>
+
+      <Margins>
+        <Stack className={styles.wrapper} direction="row" spacing={6}>
+          <Sidebar user={me} />
+          <Suspense fallback={<Loader />}>
+            <main className={styles.content}>{children}</main>
+          </Suspense>
+        </Stack>
+      </Margins>
+    </>
   )
 }
+
+const useStyles = makeStyles((theme) => ({
+  wrapper: {
+    padding: theme.spacing(6, 0),
+  },
+
+  content: {
+    maxWidth: 800,
+    width: "100%",
+  },
+}))
diff --git a/site/src/components/SettingsLayout/Sidebar.tsx b/site/src/components/SettingsLayout/Sidebar.tsx
@@ -0,0 +1,133 @@
+import { makeStyles } from "@material-ui/core/styles"
+import VpnKeyOutlined from "@material-ui/icons/VpnKeyOutlined"
+import { User } from "api/typesGenerated"
+import { Stack } from "components/Stack/Stack"
+import { UserAvatar } from "components/UserAvatar/UserAvatar"
+import { FC, ElementType, PropsWithChildren, ReactNode } from "react"
+import { NavLink } from "react-router-dom"
+import { combineClasses } from "util/combineClasses"
+import AccountIcon from "@material-ui/icons/Person"
+import SecurityIcon from "@material-ui/icons/LockOutlined"
+
+const SidebarNavItem: FC<
+  PropsWithChildren<{ href: string; icon: ReactNode }>
+> = ({ children, href, icon }) => {
+  const styles = useStyles()
+  return (
+    <NavLink
+      to={href}
+      className={({ isActive }) =>
+        combineClasses([
+          styles.sidebarNavItem,
+          isActive ? styles.sidebarNavItemActive : undefined,
+        ])
+      }
+    >
+      <Stack alignItems="center" spacing={1.5} direction="row">
+        {icon}
+        {children}
+      </Stack>
+    </NavLink>
+  )
+}
+
+const SidebarNavItemIcon: React.FC<{ icon: ElementType }> = ({
+  icon: Icon,
+}) => {
+  const styles = useStyles()
+  return <Icon className={styles.sidebarNavItemIcon} />
+}
+
+export const Sidebar: React.FC<{ user: User }> = ({ user }) => {
+  const styles = useStyles()
+
+  return (
+    <nav className={styles.sidebar}>
+      <Stack direction="row" alignItems="center" className={styles.userInfo}>
+        <UserAvatar username={user.username} avatarURL={user.avatar_url} />
+        <Stack spacing={0} className={styles.userData}>
+          <span className={styles.username}>{user.username}</span>
+          <span className={styles.email}>{user.email}</span>
+        </Stack>
+      </Stack>
+
+      <SidebarNavItem
+        href="../account"
+        icon={<SidebarNavItemIcon icon={AccountIcon} />}
+      >
+        Account
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="../security"
+        icon={<SidebarNavItemIcon icon={SecurityIcon} />}
+      >
+        Security
+      </SidebarNavItem>
+      <SidebarNavItem
+        href="../ssh-keys"
+        icon={<SidebarNavItemIcon icon={VpnKeyOutlined} />}
+      >
+        SSH Keys
+      </SidebarNavItem>
+    </nav>
+  )
+}
+
+const useStyles = makeStyles((theme) => ({
+  sidebar: {
+    width: 245,
+    flexShrink: 0,
+  },
+  sidebarNavItem: {
+    color: "inherit",
+    display: "block",
+    fontSize: 14,
+    textDecoration: "none",
+    padding: theme.spacing(1.5, 1.5, 1.5, 2),
+    borderRadius: theme.shape.borderRadius / 2,
+    transition: "background-color 0.15s ease-in-out",
+    marginBottom: 1,
+    position: "relative",
+
+    "&:hover": {
+      backgroundColor: theme.palette.action.hover,
+    },
+  },
+  sidebarNavItemActive: {
+    backgroundColor: theme.palette.action.hover,
+
+    "&:before": {
+      content: '""',
+      display: "block",
+      width: 3,
+      height: "100%",
+      position: "absolute",
+      left: 0,
+      top: 0,
+      backgroundColor: theme.palette.secondary.dark,
+      borderTopLeftRadius: theme.shape.borderRadius,
+      borderBottomLeftRadius: theme.shape.borderRadius,
+    },
+  },
+  sidebarNavItemIcon: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
+  },
+  userInfo: {
+    marginBottom: theme.spacing(2),
+  },
+  userData: {
+    overflow: "hidden",
+  },
+  username: {
+    fontWeight: 600,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  email: {
+    color: theme.palette.text.secondary,
+    fontSize: 12,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+}))
diff --git a/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx b/site/src/components/SettingsSecurityForm/SettingsSecurityForm.tsx
@@ -77,6 +77,9 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
           )}
           <TextField
             {...getFieldHelpers("old_password")}
+            InputLabelProps={{
+              shrink: true,
+            }}
             autoComplete="old_password"
             fullWidth
             label={Language.oldPasswordLabel}
@@ -85,6 +88,9 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
           />
           <TextField
             {...getFieldHelpers("password")}
+            InputLabelProps={{
+              shrink: true,
+            }}
             autoComplete="password"
             fullWidth
             label={Language.newPasswordLabel}
@@ -93,6 +99,9 @@ export const SecurityForm: React.FC<SecurityFormProps> = ({
           />
           <TextField
             {...getFieldHelpers("confirm_password")}
+            InputLabelProps={{
+              shrink: true,
+            }}
             autoComplete="confirm_password"
             fullWidth
             label={Language.confirmPasswordLabel}

diff --git a/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx b/site/src/pages/UserSettingsPage/AccountPage/AccountPage.tsx
@@ -19,7 +19,7 @@ export const AccountPage: React.FC = () => {
   }
 
   return (
-    <Section title={Language.title}>
+    <Section title={Language.title} description="Update your account info">
       <AccountForm
         editable={Boolean(canEditUsers)}
         email={me.email}