refactor: Make the navbar wider (#5689)

BrunoQuaresma · web-flow · commit f5a7538637b5 · 2023-01-12T16:34:56.000Z
diff --git a/site/src/components/NavbarView/NavbarView.test.tsx b/site/src/components/NavbarView/NavbarView.test.tsx
@@ -20,21 +20,6 @@ describe("NavbarView", () => {
     process.env = env
   })
 
-  it("renders content", async () => {
-    // When
-    render(
-      <NavbarView
-        user={MockUser}
-        onSignOut={noop}
-        canViewAuditLog
-        canViewDeployment
-      />,
-    )
-
-    // Then
-    await screen.findAllByText("Coder", { exact: false })
-  })
-
   it("workspaces nav link has the correct href", async () => {
     render(
       <NavbarView
diff --git a/site/src/components/NavbarView/NavbarView.tsx b/site/src/components/NavbarView/NavbarView.tsx
@@ -4,13 +4,13 @@ import List from "@material-ui/core/List"
 import ListItem from "@material-ui/core/ListItem"
 import { makeStyles } from "@material-ui/core/styles"
 import MenuIcon from "@material-ui/icons/Menu"
+import { CoderIcon } from "components/Icons/CoderIcon"
 import { useState } from "react"
 import { NavLink, useLocation } from "react-router-dom"
 import { colors } from "theme/colors"
 import * as TypesGen from "../../api/typesGenerated"
-import { containerWidth, navHeight, sidePadding } from "../../theme/constants"
+import { navHeight } from "../../theme/constants"
 import { combineClasses } from "../../util/combineClasses"
-import { Logo } from "../Icons/Logo"
 import { UserDropdown } from "../UserDropdown/UsersDropdown"
 
 export interface NavbarViewProps {
@@ -114,11 +114,13 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
         >
           <div className={styles.drawer}>
             <div className={styles.drawerHeader}>
-              {logo_url ? (
-                <img src={logo_url} alt="Custom Logo" />
-              ) : (
-                <Logo fill="white" opacity={1} width={125} />
-              )}
+              <div className={combineClasses([styles.logo, styles.drawerLogo])}>
+                {logo_url ? (
+                  <img src={logo_url} alt="Custom Logo" />
+                ) : (
+                  <CoderIcon />
+                )}
+              </div>
             </div>
             <NavItems
               canViewAuditLog={canViewAuditLog}
@@ -131,7 +133,7 @@ export const NavbarView: React.FC<React.PropsWithChildren<NavbarViewProps>> = ({
           {logo_url ? (
             <img src={logo_url} alt="Custom Logo" />
           ) : (
-            <Logo fill="white" opacity={1} width={125} />
+            <CoderIcon fill="white" opacity={1} width={125} />
           )}
         </NavLink>
 
@@ -159,20 +161,13 @@ const useStyles = makeStyles((theme) => ({
   root: {
     height: navHeight,
     background: theme.palette.background.paper,
-    "@media (display-mode: standalone)": {
-      borderTop: `1px solid ${theme.palette.divider}`,
-    },
     borderBottom: `1px solid ${theme.palette.divider}`,
-    transition: "margin 150ms ease",
   },
   wrapper: {
     position: "relative",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center",
-    margin: "0 auto",
-    maxWidth: containerWidth,
-    padding: `0 ${sidePadding}px`,
     [theme.breakpoints.up("md")]: {
       justifyContent: "flex-start",
     },
@@ -195,6 +190,7 @@ const useStyles = makeStyles((theme) => ({
     },
   },
   profileButton: {
+    paddingRight: theme.spacing(2),
     [theme.breakpoints.up("md")]: {
       marginLeft: "auto",
     },
@@ -208,13 +204,19 @@ const useStyles = makeStyles((theme) => ({
     alignItems: "center",
     display: "flex",
     height: navHeight,
-    paddingRight: theme.spacing(4),
+    color: theme.palette.text.primary,
+    padding: theme.spacing(2),
     // svg is for the Coder logo, img is for custom images
     "& svg, & img": {
-      width: 109,
-      maxHeight: `calc(${navHeight}px)`,
+      width: "100%",
+      height: "100%",
+      objectFit: "contain",
     },
   },
+  drawerLogo: {
+    padding: 0,
+    maxHeight: theme.spacing(5),
+  },
   title: {
     flex: 1,
     textAlign: "center",
@@ -238,26 +240,8 @@ const useStyles = makeStyles((theme) => ({
 
     // NavLink adds this class when the current route matches.
     "&.active": {
-      position: "relative",
       color: theme.palette.text.primary,
       fontWeight: "bold",
-
-      "&::before": {
-        content: `" "`,
-        left: 0,
-        width: 2,
-        height: "100%",
-        background: theme.palette.secondary.dark,
-        position: "absolute",
-
-        [theme.breakpoints.up("md")]: {
-          bottom: 0,
-          left: theme.spacing(3),
-          width: `calc(100% - 2 * ${theme.spacing(3)}px)`,
-          right: theme.spacing(3),
-          height: 2,
-        },
-      },
     },
 
     [theme.breakpoints.up("md")]: {
