feat(dashboard-v2): make top navigation bar responsive

packages/dashboard-v2/src/components/NavBar/NavBar.js

@@ -1,21 +1,78 @@
+import { Link } from "gatsby";
 import styled from "styled-components";
 
+import { screen } from "../../lib/cssHelpers";
+import { DropdownMenu, DropdownMenuLink } from "../DropdownMenu";
+import { CogIcon, LockClosedIcon, SkynetLogoIcon } from "../Icons";
 import { PageContainer } from "../PageContainer";
 
+import { NavBarLink, NavBarSection } from ".";
+
 const NavBarContainer = styled.div.attrs({
   className: `grid sticky top-0 bg-white`,
 })``;
 
 const NavBarBody = styled.nav.attrs({
-  className: "grid h-[80px] font-sans font-light text-sm",
+  className: "grid font-sans font-light text-xs sm:text-sm",
 })`
+  height: 100px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 60px 40px;
+  grid-template-areas:
+    "logo dropdown"
+    "navigation navigation";
+
+  ${screen(
+    "sm",
+    `
+    height: 80px;
     grid-template-columns: auto max-content 1fr;
+    grid-template-areas: "logo navigation dropdown";
+    grid-template-rows: auto;
+  `
+  )}
+
+  .navigation-area {
+    grid-area: navigation;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .logo-area {
+    grid-area: logo;
+    justify-content: start;
+  }
+
+  .dropdown-area {
+    grid-area: dropdown;
+  }
 `;
 
-export const NavBar = (props) => (
+export const NavBar = () => (
   <NavBarContainer>
-    <PageContainer>
-      <NavBarBody {...props} />
+    <PageContainer className="px-0">
+      <NavBarBody>
+        <NavBarSection className="logo-area pl-2 pr-4 md:px-0 md:w-[110px] justify-center sm:justify-start">
+          <SkynetLogoIcon size={48} />
+        </NavBarSection>
+        <NavBarSection className="navigation-area border-t border-palette-100">
+          <NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
+            Dashboard
+          </NavBarLink>
+          <NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
+            Files
+          </NavBarLink>
+          <NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
+            Payments
+          </NavBarLink>
+        </NavBarSection>
+        <NavBarSection className="dropdown-area justify-end">
+          <DropdownMenu title="My account">
+            <DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
+            <DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
+          </DropdownMenu>
+        </NavBarSection>
+      </NavBarBody>
     </PageContainer>
   </NavBarContainer>
 );

packages/dashboard-v2/src/components/NavBar/NavBarLink.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 export const NavBarLink = styled.a.attrs(({ active }) => ({
   className: `
-    min-w-[168px]
+    sm:min-w-[133px] lg:min-w-[168px]
     flex h-full items-center justify-center
     border-x border-x-palette-100 border-b-2
     text-palette-600 transition-colors hover:bg-palette-100/50

packages/dashboard-v2/src/components/PageContainer/PageContainer.js

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 export const PageContainer = styled.div.attrs({
-  className: `mx-auto w-page md:w-page-md lg:w-page-lg xl:w-page-xl`,
+  className: `mx-auto w-page lg:w-page-lg xl:w-page-xl px-2 md:px-16 lg:px-0`,
 })``;
 
 PageContainer.propTypes = {

packages/dashboard-v2/src/layouts/DashboardLayout.js

@@ -1,50 +1,23 @@
 import * as React from "react";
-import { Link } from "gatsby";
-
 import styled from "styled-components";
-import { DropdownMenu, DropdownMenuLink } from "../components/DropdownMenu";
+
 import { PageContainer } from "../components/PageContainer";
-import { CogIcon, SkynetLogoIcon, LockClosedIcon } from "../components/Icons";
-import { NavBar, NavBarLink, NavBarSection } from "../components/Navbar";
+import { NavBar } from "../components/Navbar";
 import { Footer } from "../components/Footer";
 
 const Layout = styled.div.attrs({
-  className: "h-screen overflow-hidden",
+  className: "min-h-screen overflow-hidden",
 })`
   background-image: url(/images/dashboard-bg.svg);
-  background-position: -300px -280px;
-
-  .navbar {
-    grid-template-columns: auto max-content 1fr;
-  }
+  background-position: center -280px;
+  background-repeat: no-repeat;
 `;
 
 const DashboardLayout = ({ children }) => {
   return (
     <>
       <Layout>
-        <NavBar className="navbar">
-          <NavBarSection className="w-[110px] justify-start">
-            <SkynetLogoIcon size={48} />
-          </NavBarSection>
-          <NavBarSection>
-            <NavBarLink to="/" as={Link} activeClassName="!border-b-primary">
-              Dashboard
-            </NavBarLink>
-            <NavBarLink to="/files" as={Link} activeClassName="!border-b-primary">
-              Files
-            </NavBarLink>
-            <NavBarLink to="/payments" as={Link} activeClassName="!border-b-primary">
-              Payments
-            </NavBarLink>
-          </NavBarSection>
-          <NavBarSection className="justify-end">
-            <DropdownMenu title="My account">
-              <DropdownMenuLink href="/settings" icon={CogIcon} label="Settings" />
-              <DropdownMenuLink href="/logout" icon={LockClosedIcon} label="Log out" />
-            </DropdownMenu>
-          </NavBarSection>
-        </NavBar>
+        <NavBar />
         <PageContainer>
           <main className="mt-14">{children}</main>
         </PageContainer>