Navbar-update (#366)

Made Navbar responsive and updated styles to match Figma designs

src/components/Navbar/Navbar.stories.tsx

@@ -21,20 +21,14 @@ const LoggedInUser = {
 
 export const LoggedIn: Story = {
   args: {
-    links: ExampleLinks,
-    user: LoggedInUser
+    links: ExampleLinks
   }
 };
 
 export const LoggedOut: Story = {
-  args: {
-    links: ExampleLinks,
-    user: { loginHref: '#' }
-  }
+  args: {}
 };
 
 export const NoUser: Story = {
-  args: {
-    links: ExampleLinks
-  }
+  args: {}
 };

src/components/Navbar/Navbar.tsx

@@ -1,4 +1,3 @@
-import type { JSXElement } from '~/src/types/jsxElement';
 import CFPBLogo from '../../assets/images/cfpb-logo.png';
 import Link from '../Link/Link';
 import './navbar.less';
@@ -35,68 +34,33 @@ const Links = ({
 
 interface NavbarProperties {
   links?: JSX.Element[];
-  user?: User;
   href?: string;
 }
 
-export interface User {
-  name?: string;
-  loginHref?: string;
-  logoutHref?: string;
-}
-
-interface UserActionsProperties {
-  user?: User;
-}
-
-const UserActions = ({ user }: UserActionsProperties): JSXElement => {
-  if (!user) return null;
-
-  if (!user.name)
-    return (
-      <div className='user-actions'>
-        <Link href={user.loginHref} className='nav-item login'>
-          LOGIN
-        </Link>
-      </div>
-    );
-
-  return (
-    <div className='user-actions'>
-      <span className='nav-item username'>{user.name}</span>
-      <Link href={user.logoutHref} className='nav-item logout'>
-        LOGOUT
-      </Link>
-    </div>
-  );
-};
-
-export default function Navbar({
-  links,
-  user,
-  href
-}: NavbarProperties): JSX.Element {
+export default function Navbar({ links, href }: NavbarProperties): JSX.Element {
   return (
     <div className='o-header_content'>
       <div className='navbar wrapper wrapper__match-content'>
         <CfpbLogo href={href} />
         <div className='nav-items'>
           <Links elements={links} />
-          <UserActions user={user} />
         </div>
       </div>
     </div>
   );
 }
 
 export const ExampleLinks: JSX.Element[] = [
-  <Link href='/' className='nav-item' key='home'>
-    HOME
+  <Link className='nav-item' key='home'>
+    Home
+  </Link>,
+  <Link className='nav-item active' key='filing'>
+    Filing
   </Link>,
-  <Link href='/filing' className='nav-item selected' key='filing'>
-    FILING HOME
+  <Link className='nav-item' key='profile'>
+    John Sample
   </Link>,
-  <Link href='/datasets' className='nav-item' key='dataset'>
-    DATASETS
+  <Link className='nav-item' key='logout'>
+    LOG OUT
   </Link>
 ];

src/components/Navbar/navbar.less

@@ -1,49 +1,99 @@
 @import (reference) '/src/assets/styles/_shared.less';
 
+@breakpoint: 56.3125em;
+
 .navbar {
   display: flex;
-  flex-flow: row;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
+  flex-direction: column;
+  align-items: flex-start;
+  font-size: 16px;
   padding-bottom: @space-sm;
 
+  @media (min-width: @breakpoint) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .o-header_logo {
+      min-width: 237px;
+    }
+  }
+
   .nav-items {
     display: flex;
-    flex-flow: row;
-  }
+    flex-direction: column;
+    width: 100%;
 
-  .nav-item {
-    margin-right: @space-xl;
-    letter-spacing: unit((1px / @base-font-size-px), em);
+    @media (min-width: @breakpoint) {
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+
+    .links {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      a {
+        cursor: pointer;
+      }
+      .a-btn {
+        font-weight: 400;
+      }
+      .a-btn__link {
+        text-decoration: none;
+      }
+
+      @media (min-width: @breakpoint) {
+        flex-direction: row;
+        justify-content: flex-end;
+        width: auto;
+      }
+    }
+
+    .links > *:first-child {
+      border-top: 1px dashed @pacific-90;
+      @media (min-width: @breakpoint) {
+        border-top: none;
+      }
+    }
+
+    .links > *:last-child {
+      margin-right: 0;
+    }
   }
 
-  .user-actions :last-child {
+  .nav-item {
     margin-right: 0;
-  }
+    letter-spacing: unit((1px / @base-font-size-px), em);
+    padding: 10px 0;
 
-  .a-link {
-    color: @gray-dark;
-    font-weight: 600;
+    @media (min-width: @breakpoint) {
+      margin-right: @space-xl;
+      padding: 0;
+    }
   }
 
-  .a-link:not(.o-header_logo):hover {
+  .a-link:not(.o-header_logo) {
     color: @pacific-90;
     border-bottom: 1px dashed;
   }
 
-  .a-link:focus {
-    color: @pacific-90;
-  }
-
-  .a-link.selected {
-    border-bottom: 3px solid @gray-dark;
+  .a-link:not(.o-header_logo):hover,
+  .a-link:not(.o-header_logo).active {
+    border-bottom: 1px solid @pacific-90;
   }
 
   .username {
+    color: @pacific-90;
     font-size: unit((16px / @base-font-size-px), em);
-    margin-right: @space-xl;
+    margin-right: 0;
     font-weight: 400;
     line-height: unit((22px / @base-font-size-px), em);
+    border-bottom: 1px dashed;
+
+    @media (min-width: @breakpoint) {
+      margin-right: @space-xl;
+    }
   }
 }

src/components/PageHeader/header.less

@@ -3,17 +3,11 @@
   position: relative;
   z-index: 10;
   background-color: #ffffff;
-  
+
   &.bottom-border {
     border-bottom: 5px solid #20aa3f;
   }
 }
-
-@media only all and (min-width: 63.8125em) {
-  .o-header {
-    min-width: 1021px;
-  }
-}
 .o-header_content {
   position: relative;
 }
@@ -63,7 +57,7 @@
 }
 .o-header_logo-img {
   height: 34px;
-  width: auto;
+  width: 100%;
   margin-top: 10px;
   margin-bottom: 10px;
   vertical-align: middle;
@@ -99,5 +93,3 @@
 .print .o-header_logo {
   margin-left: 15px !important;
 }
-
-