feat: add top-level nav styles (#883)

code-asher · web-flow · commit fe23dcd3fcb3 · 2022-04-06T13:12:37.000-05:00
Partially addresses #701.
diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
@@ -1,7 +1,8 @@
-import Button from "@material-ui/core/Button"
-import { makeStyles } from "@material-ui/core/styles"
+import List from "@material-ui/core/List"
+import ListItem from "@material-ui/core/ListItem"
+import { fade, makeStyles } from "@material-ui/core/styles"
 import React from "react"
-import { Link } from "react-router-dom"
+import { NavLink } from "react-router-dom"
 import { UserResponse } from "../../api/types"
 import { Logo } from "../Icons"
 import { UserDropdown } from "./UserDropdown"
@@ -14,29 +15,34 @@ export interface NavbarViewProps {
 export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut }) => {
   const styles = useStyles()
   return (
-    <div className={styles.root}>
-      <div className={styles.fixed}>
-        <Link to="/">
-          <Button className={styles.logo} variant="text">
-            <Logo fill="white" opacity={1} />
-          </Button>
-        </Link>
-      </div>
+    <nav className={styles.root}>
+      <List className={styles.fixed}>
+        <ListItem className={styles.item}>
+          <NavLink className={styles.logo} to="/">
+            <Logo fill="white" opacity={1} width={125} />
+          </NavLink>
+        </ListItem>
+        <ListItem button className={styles.item}>
+          <NavLink className={styles.link} to="/templates">
+            Templates
+          </NavLink>
+        </ListItem>
+      </List>
       <div className={styles.fullWidth} />
       <div className={styles.fixed}>{user && <UserDropdown user={user} onSignOut={onSignOut} />}</div>
-    </div>
+    </nav>
   )
 }
 
 const useStyles = makeStyles((theme) => ({
   root: {
     position: "relative",
     display: "flex",
-    flex: "0",
+    flex: 0,
     flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
-    height: "56px",
+    height: 56,
     background: theme.palette.navbar.main,
     marginTop: 0,
     transition: "margin 150ms ease",
@@ -46,24 +52,60 @@ const useStyles = makeStyles((theme) => ({
     borderBottom: `1px solid #383838`,
   },
   fixed: {
-    flex: "0",
+    flex: 0,
+    display: "flex",
+    padding: 0,
   },
   fullWidth: {
-    flex: "1",
+    flex: 1,
   },
   logo: {
-    flex: "0",
-    height: "56px",
+    alignItems: "center",
+    display: "flex",
+    height: 56,
     paddingLeft: theme.spacing(4),
     paddingRight: theme.spacing(2),
-    borderRadius: 0,
     "& svg": {
-      display: "block",
       width: 125,
     },
   },
   title: {
-    flex: "1",
+    flex: 1,
     textAlign: "center",
   },
+  item: {
+    padding: 0,
+  },
+  link: {
+    alignItems: "center",
+    color: "#A7A7A7",
+    display: "flex",
+    fontSize: 16,
+    height: 56,
+    padding: `0 ${theme.spacing(3)}px`,
+    textDecoration: "none",
+    transition: "background-color 0.3s ease",
+
+    "&:hover": {
+      backgroundColor: fade(theme.palette.primary.light, 0.1),
+    },
+
+    // NavLink adds this class when the current route matches.
+    "&.active": {
+      position: "relative",
+      color: theme.palette.primary.contrastText,
+
+      "&::before": {
+        content: `"{"`,
+        left: 10,
+        position: "absolute",
+      },
+
+      "&::after": {
+        content: `"}"`,
+        position: "absolute",
+        right: 10,
+      },
+    },
+  },
 }))
