From 74f26e71bd237daf2055657dccfb2b007283d62a Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Mon, 4 Apr 2022 21:55:57 +0000
Subject: [PATCH 1/2] feat: add projects link to the top nav

Partially addresses #701.
---
 site/src/components/Navbar/NavbarView.tsx | 84 +++++++++++++++++------
 1 file changed, 63 insertions(+), 21 deletions(-)

diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index 8e1d1d26a68c9..1b95295f62ea0 100644
--- 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,17 +15,22 @@ 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="/projects">
+            Projects
+          </NavLink>
+        </ListItem>
+      </List>
       <div className={styles.fullWidth} />
       <div className={styles.fixed}>{user && <UserDropdown user={user} onSignOut={onSignOut} />}</div>
-    </div>
+    </nav>
   )
 }
 
@@ -32,11 +38,11 @@ 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,
+      },
+    },
+  },
 }))

From 5ba5339ed2cee13dbd9dc05b5f291975e32ac5f1 Mon Sep 17 00:00:00 2001
From: Asher <ash@coder.com>
Date: Wed, 6 Apr 2022 18:01:34 +0000
Subject: [PATCH 2/2] Rename projects navbar item to templates

---
 site/src/components/Navbar/NavbarView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/components/Navbar/NavbarView.tsx b/site/src/components/Navbar/NavbarView.tsx
index 1b95295f62ea0..728179c529ea0 100644
--- a/site/src/components/Navbar/NavbarView.tsx
+++ b/site/src/components/Navbar/NavbarView.tsx
@@ -23,8 +23,8 @@ export const NavbarView: React.FC<NavbarViewProps> = ({ user, onSignOut }) => {
           </NavLink>
         </ListItem>
         <ListItem button className={styles.item}>
-          <NavLink className={styles.link} to="/projects">
-            Projects
+          <NavLink className={styles.link} to="/templates">
+            Templates
           </NavLink>
         </ListItem>
       </List>