From 7afc5045c850e1c33dd2c571464a03e3644c275d Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Mon, 13 Apr 2020 03:43:51 -0400
Subject: [PATCH 01/15] checkpoint

---
 packages/frontend/pages/_app.tsx |  6 +++
 packages/frontend/pages/new.tsx  | 72 ++++++++++++++++++++++++++++++++
 packages/frontend/theme.css      |  5 +++
 3 files changed, 83 insertions(+)
 create mode 100644 packages/frontend/pages/new.tsx
 create mode 100644 packages/frontend/theme.css

diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index 421c470..56f4f1f 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -10,6 +10,8 @@ import CoinsContainer from "../containers/Coins";
 import VaultsContainer from "../containers/Vaults";
 import Head from "next/head";
 
+import "../theme.css";
+
 const customTheme = {
   ...theme,
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
@@ -65,6 +67,10 @@ function MyApp({ Component, pageProps }: AppProps) {
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta property="og:url" content="https://dedge.exchange" />
+            <link
+              href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap"
+              rel="stylesheet"
+            ></link>
             <script
               dangerouslySetInnerHTML={{
                 __html: `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
diff --git a/packages/frontend/pages/new.tsx b/packages/frontend/pages/new.tsx
new file mode 100644
index 0000000..5b72eab
--- /dev/null
+++ b/packages/frontend/pages/new.tsx
@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+`;
+
+const NavBar = styled.div`
+  background: var(--bg);
+  text-align: right;
+  // height: 100vh;
+  width: 256px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const Logo = styled.div`
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 24px;
+  font-weight: 300;
+  color: var(--highlight);
+  text-transform: uppercase;
+  letter-spacing: 4px;
+  margin-right: -4px;
+
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+`;
+
+const Separator = styled.hr`
+  border: 1px solid #666;
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+`;
+
+const NavItem = styled.div`
+  cursor: pointer;
+  color: ${(p) => (p.active ? `white` : `#666`)};
+  margin-bottom: 2rem;
+
+  &:hover {
+    color: var(--highlight);
+  }
+`;
+
+const Content = styled.div`
+  background: var(--dark-bg);
+  flex: 1;
+`;
+
+const Home = () => {
+  return (
+    <Container>
+      <NavBar>
+        <Logo>Dedge</Logo>
+
+        <NavItem active>Dashboard</NavItem>
+        <NavItem>Swap Tokens</NavItem>
+        <NavItem>Import Positions</NavItem>
+        <NavItem>Exit Positions</NavItem>
+      </NavBar>
+      <Content>
+        <h1>Hello</h1>
+      </Content>
+    </Container>
+  );
+};
+
+export default Home;
diff --git a/packages/frontend/theme.css b/packages/frontend/theme.css
new file mode 100644
index 0000000..630154c
--- /dev/null
+++ b/packages/frontend/theme.css
@@ -0,0 +1,5 @@
+:root {
+  --bg: #1c232a;
+  --dark-bg: #141A1F;
+  --highlight: #fe921f;
+}

From 311c4aafabcadbf39b9a3bb69814b8c6ab49324d Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Mon, 13 Apr 2020 04:01:45 -0400
Subject: [PATCH 02/15] checkpoint

---
 packages/frontend/pages/new.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/pages/new.tsx b/packages/frontend/pages/new.tsx
index 5b72eab..e391f19 100644
--- a/packages/frontend/pages/new.tsx
+++ b/packages/frontend/pages/new.tsx
@@ -24,18 +24,13 @@ const Logo = styled.div`
   color: var(--highlight);
   text-transform: uppercase;
   letter-spacing: 4px;
-  margin-right: -4px;
+  margin-right: -6px;
+  text-shadow: 0px 0px 12px rgba(254, 146, 31, 0.4);
 
   margin-top: 1rem;
   margin-bottom: 2rem;
 `;
 
-const Separator = styled.hr`
-  border: 1px solid #666;
-  margin-top: 4rem;
-  margin-bottom: 4rem;
-`;
-
 const NavItem = styled.div`
   cursor: pointer;
   color: ${(p) => (p.active ? `white` : `#666`)};
@@ -61,9 +56,28 @@ const Home = () => {
         <NavItem>Swap Tokens</NavItem>
         <NavItem>Import Positions</NavItem>
         <NavItem>Exit Positions</NavItem>
+        <NavItem>Info</NavItem>
       </NavBar>
       <Content>
         <h1>Hello</h1>
+
+        <table style={{ width: `100%` }}>
+          <tr>
+            <th>Firstname</th>
+            <th>Lastname</th>
+            <th>Age</th>
+          </tr>
+          <tr>
+            <td>Jill</td>
+            <td>Smith</td>
+            <td>50</td>
+          </tr>
+          <tr>
+            <td>Eve</td>
+            <td>Jackson</td>
+            <td>94</td>
+          </tr>
+        </table>
       </Content>
     </Container>
   );

From 84c30a76db3d4658a74548453b9ace8a42ade4b6 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Mon, 13 Apr 2020 04:19:58 -0400
Subject: [PATCH 03/15] status bar

---
 packages/frontend/pages/new.tsx | 26 +++++++++++++++++++++++++-
 packages/frontend/theme.css     |  4 ++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/pages/new.tsx b/packages/frontend/pages/new.tsx
index e391f19..1fb0fa0 100644
--- a/packages/frontend/pages/new.tsx
+++ b/packages/frontend/pages/new.tsx
@@ -46,6 +46,24 @@ const Content = styled.div`
   flex: 1;
 `;
 
+const PositionStatus = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 2rem;
+  background: #0a0d10;
+`;
+
+const Status = ({ label, percent = false, value }) => {
+  const valText = percent ? `${value}%` : `$${value}`;
+  return (
+    <div style={{ color: `white`, width: `120px` }}>
+      <div style={{  fontSize: "2rem", textAlign: `right` }}>{valText}</div>
+      <div style={{ color: `var(--highlight)`, textAlign: `right`, fontSize: `12px` }}>{label}</div>
+    </div>
+  );
+};
+
 const Home = () => {
   return (
     <Container>
@@ -59,7 +77,13 @@ const Home = () => {
         <NavItem>Info</NavItem>
       </NavBar>
       <Content>
-        <h1>Hello</h1>
+        <PositionStatus>
+          <Status label="Supply Balance" value="123.00" />
+          <Status label="Borrow Balance" value="123.00" />
+          <Status label="Borrow Percent" value="123" percent />
+          <Status label="ETH Price" value="123.00" />
+          <Status label="Liquidation Price" value="123.00" />
+        </PositionStatus>
 
         <table style={{ width: `100%` }}>
           <tr>
diff --git a/packages/frontend/theme.css b/packages/frontend/theme.css
index 630154c..8f4de6d 100644
--- a/packages/frontend/theme.css
+++ b/packages/frontend/theme.css
@@ -3,3 +3,7 @@
   --dark-bg: #141A1F;
   --highlight: #fe921f;
 }
+
+html {
+  background: var(--dark-bg);
+}

From 57fc5e8dcedfc01219e3650abe17fa37a2f1f880 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Mon, 13 Apr 2020 04:22:32 -0400
Subject: [PATCH 04/15] make cooler

---
 packages/frontend/pages/new.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/pages/new.tsx b/packages/frontend/pages/new.tsx
index 1fb0fa0..e767896 100644
--- a/packages/frontend/pages/new.tsx
+++ b/packages/frontend/pages/new.tsx
@@ -59,7 +59,7 @@ const Status = ({ label, percent = false, value }) => {
   return (
     <div style={{ color: `white`, width: `120px` }}>
       <div style={{  fontSize: "2rem", textAlign: `right` }}>{valText}</div>
-      <div style={{ color: `var(--highlight)`, textAlign: `right`, fontSize: `12px` }}>{label}</div>
+      <div style={{ textTransform: `uppercase`,color: `var(--highlight)`, textAlign: `right`, fontSize: `12px` }}>{label}</div>
     </div>
   );
 };
@@ -71,6 +71,7 @@ const Home = () => {
         <Logo>Dedge</Logo>
 
         <NavItem active>Dashboard</NavItem>
+        <NavItem>Automate</NavItem>
         <NavItem>Swap Tokens</NavItem>
         <NavItem>Import Positions</NavItem>
         <NavItem>Exit Positions</NavItem>

From 9ac926f4efeea60efadf23b6ad4c401a9a80f1ab Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Tue, 14 Apr 2020 23:20:10 -0400
Subject: [PATCH 05/15] add useMedia hook

---
 packages/frontend/package-lock.json | 5 +++++
 packages/frontend/package.json      | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
index c20be90..f364706 100644
--- a/packages/frontend/package-lock.json
+++ b/packages/frontend/package-lock.json
@@ -8582,6 +8582,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-media": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-media/-/use-media-1.4.0.tgz",
+      "integrity": "sha512-XsgyUAf3nhzZmEfhc5MqLHwyaPjs78bgytpVJ/xDl0TF4Bptf3vEpBNBBT/EIKOmsOc8UbuECq3mrP3mt1QANA=="
+    },
     "use-subscription": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/use-subscription/-/use-subscription-1.1.1.tgz",
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index fe55b98..a5e1750 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -22,7 +22,8 @@
     "react-dom": "^16.13.1",
     "rimble-ui": "^0.13.1",
     "styled-components": "^5.0.1",
-    "unstated-next": "^1.1.0"
+    "unstated-next": "^1.1.0",
+    "use-media": "^1.4.0"
   },
   "devDependencies": {
     "@types/node": "^13.9.2",

From 2107feb068b6c3a18003a9f2bad9fbc60c02a470 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Tue, 14 Apr 2020 23:20:45 -0400
Subject: [PATCH 06/15] add new layout feature module + new pages

---
 packages/frontend/features/layout/Appbar.tsx  | 117 ++++++++++++++++++
 .../frontend/features/layout/AppbarLayout.tsx |  33 +++++
 packages/frontend/features/layout/Layout.tsx  |  14 +++
 packages/frontend/features/layout/PAGES.ts    |   8 ++
 packages/frontend/features/layout/Sidebar.tsx |  61 +++++++++
 .../features/layout/SidebarLayout.tsx         |  44 +++++++
 .../frontend/features/layout/useScreenSize.ts |  11 ++
 packages/frontend/pages/_app.tsx              |   2 +
 packages/frontend/pages/dashboard.tsx         |   9 ++
 packages/frontend/pages/swap-tokens.tsx       |   9 ++
 10 files changed, 308 insertions(+)
 create mode 100644 packages/frontend/features/layout/Appbar.tsx
 create mode 100644 packages/frontend/features/layout/AppbarLayout.tsx
 create mode 100644 packages/frontend/features/layout/Layout.tsx
 create mode 100644 packages/frontend/features/layout/PAGES.ts
 create mode 100644 packages/frontend/features/layout/Sidebar.tsx
 create mode 100644 packages/frontend/features/layout/SidebarLayout.tsx
 create mode 100644 packages/frontend/features/layout/useScreenSize.ts
 create mode 100644 packages/frontend/pages/dashboard.tsx
 create mode 100644 packages/frontend/pages/swap-tokens.tsx

diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
new file mode 100644
index 0000000..52b1e5b
--- /dev/null
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -0,0 +1,117 @@
+import Router from "next/router";
+import styled from "styled-components";
+import { useState } from "react";
+import { pages } from "./PAGES";
+
+const Container = styled.div`
+  color: white;
+  background: var(--bg);
+  height: 72px;
+  box-shadow: 0 6px 6px 0px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  position: relative;
+`;
+
+const LogoText = styled.div`
+  color: var(--highlight);
+  text-shadow: 0px 0px 12px rgba(254, 146, 31, 0.4);
+
+  font-family: IBM Plex Sans, Roboto, Sans-Serif;
+  font-size: 32px;
+  font-weight: 200;
+  text-transform: uppercase;
+  letter-spacing: 4px;
+
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(calc(-50% + 4px), -50%);
+`;
+
+const MenuButton = styled.div`
+  color: #aaa;
+  font-size: 24px;
+  padding: 12px;
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translate(-12px, -50%);
+  cursor: pointer;
+`;
+
+const Menu = styled.div`
+  width: 90%;
+  height: 100vh;
+  background: var(--dark-bg);
+  position: fixed;
+  z-index: 1;
+  left: ${(p) => (p.isOpen ? `0` : `-100%`)};
+  transition: left 200ms ease-in-out;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+const Overlay = styled.div`
+  pointer-events: none;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  z-index: 1;
+  opacity: ${(p) => (p.show ? `1` : `0`)};
+  transition: opacity 200ms ease-in-out;
+`;
+
+const CloseButton = styled.div`
+  color: white;
+  font-size: 24px;
+  padding: 12px 16px;
+  position: absolute;
+  right: 12px;
+  top: 12px;
+  cursor: pointer;
+`;
+
+const MenuItem = styled.div`
+  font-family: IBM Plex Sans;
+  text-transform: uppercase;
+  font-weight: 200;
+  letter-spacing: 4px;
+  color: ${(p) => (p.active ? `var(--highlight)` : `#999`)};
+  text-align: center;
+  margin-bottom: 3rem;
+  font-size: 18px;
+  cursor: pointer;
+`;
+
+const Appbar = ({ activePage }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const openMenu = () => setIsOpen(true);
+  const closeMenu = () => setIsOpen(false);
+  return (
+    <>
+      <Container>
+        <LogoText>Dedge</LogoText>
+        <MenuButton onClick={openMenu}>☰</MenuButton>
+      </Container>
+      <Overlay show={isOpen} />
+      <Menu isOpen={isOpen}>
+        <CloseButton onClick={closeMenu}>✕</CloseButton>
+        {pages.map((page) => (
+          <MenuItem
+            key={page.id}
+            active={page.id === activePage}
+            onClick={() => Router.push(`/${page.id}`)}
+          >
+            {page.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default Appbar;
diff --git a/packages/frontend/features/layout/AppbarLayout.tsx b/packages/frontend/features/layout/AppbarLayout.tsx
new file mode 100644
index 0000000..da3b14a
--- /dev/null
+++ b/packages/frontend/features/layout/AppbarLayout.tsx
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import Appbar from "./Appbar";
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  background: var(--dark-bg);
+  display: flex;
+  flex-direction: column;
+`;
+
+const StatusBar = styled.div`
+  background: black;
+  color: #fab127;
+`;
+
+const Content = styled.div`
+  background red;
+  overflow: auto;
+  flex: 1;
+`;
+
+const AppbarLayout = ({ children, activePage }) => {
+  return (
+    <Container>
+      <Appbar activePage={activePage} />
+      <StatusBar>status bar</StatusBar>
+      <Content>{children}</Content>
+    </Container>
+  );
+};
+
+export default AppbarLayout;
diff --git a/packages/frontend/features/layout/Layout.tsx b/packages/frontend/features/layout/Layout.tsx
new file mode 100644
index 0000000..804420e
--- /dev/null
+++ b/packages/frontend/features/layout/Layout.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import useScreenSize from "./useScreenSize";
+import AppbarLayout from "./AppbarLayout";
+import SidebarLayout from "./SidebarLayout";
+
+const Layout = ({ children, activePage }) => {
+  const { isMobile } = useScreenSize();
+  if (isMobile) {
+    return <AppbarLayout activePage={activePage}>{children}</AppbarLayout>;
+  }
+  return <SidebarLayout activePage={activePage}>{children}</SidebarLayout>;
+};
+
+export default Layout;
diff --git a/packages/frontend/features/layout/PAGES.ts b/packages/frontend/features/layout/PAGES.ts
new file mode 100644
index 0000000..9f3742f
--- /dev/null
+++ b/packages/frontend/features/layout/PAGES.ts
@@ -0,0 +1,8 @@
+export const pages = [
+  { label: "Dashboard", id: "dashboard" },
+  { label: "Automate", id: "automate" },
+  { label: "Swap Tokens", id: "swap-tokens" },
+  { label: "Import Positions", id: "import-positions" },
+  { label: "Exit Positions", id: "exit-positions" },
+  { label: "Info", id: "info" },
+];
diff --git a/packages/frontend/features/layout/Sidebar.tsx b/packages/frontend/features/layout/Sidebar.tsx
new file mode 100644
index 0000000..016f6f3
--- /dev/null
+++ b/packages/frontend/features/layout/Sidebar.tsx
@@ -0,0 +1,61 @@
+import Router from "next/router";
+import styled from "styled-components";
+import useScreenSize from "./useScreenSize";
+import { pages } from "./PAGES";
+
+const Container = styled.div`
+  background: var(--bg);
+  width: ${(p) => p.width};
+  height: 100%;
+
+  text-align: right;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+
+const LogoText = styled.div`
+  font-family: IBM Plex Sans, sans-serif;
+  font-size: 24px;
+  font-weight: 300;
+  color: var(--highlight);
+  text-transform: uppercase;
+  letter-spacing: 4px;
+  margin-right: -6px;
+  text-shadow: 0px 0px 12px rgba(254, 146, 31, 0.4);
+
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+`;
+
+const NavItem = styled.div`
+  cursor: pointer;
+  color: ${(p) => (p.active ? `white` : `#666`)};
+  margin-bottom: 2rem;
+
+  &:hover {
+    color: var(--highlight);
+  }
+`;
+
+const Sidebar = ({ activePage }) => {
+  const { isTablet } = useScreenSize();
+  return (
+    <Container width={isTablet ? `180px` : `256px`}>
+      <LogoText>Dedge</LogoText>
+
+      {pages.map((page) => (
+        <NavItem
+          key={page.id}
+          active={activePage === page.id}
+          onClick={() => Router.push(`/${page.id}`)}
+        >
+          {page.label}
+        </NavItem>
+      ))}
+    </Container>
+  );
+};
+
+export default Sidebar;
diff --git a/packages/frontend/features/layout/SidebarLayout.tsx b/packages/frontend/features/layout/SidebarLayout.tsx
new file mode 100644
index 0000000..625a7cc
--- /dev/null
+++ b/packages/frontend/features/layout/SidebarLayout.tsx
@@ -0,0 +1,44 @@
+import styled from "styled-components";
+import Sidebar from "./Sidebar";
+
+const Container = styled.div`
+  width: 100%;
+  height: 100vh;
+  background: var(--dark-bg);
+  display: flex;
+`;
+
+const StatusBar = styled.div`
+  background: black;
+  color: #fab127;
+`;
+
+const Main = styled.div`
+  background blue;
+  height: 100%;
+  flex: 1;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+`;
+
+const Content = styled.div`
+  background red;
+  flex: 1;
+  overflow: auto;
+`;
+
+const SidebarLayout = ({ children, activePage }) => {
+  return (
+    <Container>
+      <Sidebar activePage={activePage} />
+      <Main>
+        <StatusBar>Statusbar</StatusBar>
+        <Content>{children}</Content>
+      </Main>
+    </Container>
+  );
+};
+
+export default SidebarLayout;
diff --git a/packages/frontend/features/layout/useScreenSize.ts b/packages/frontend/features/layout/useScreenSize.ts
new file mode 100644
index 0000000..c14db80
--- /dev/null
+++ b/packages/frontend/features/layout/useScreenSize.ts
@@ -0,0 +1,11 @@
+import { useMedia } from "use-media";
+
+const useScreenSize = () => {
+  const isDesktop = useMedia({ minWidth: "1200px" });
+  const isTablet = useMedia({ minWidth: "600px" }) && !isDesktop;
+  const isMobile = !isDesktop && !isTablet;
+
+  return { isDesktop, isTablet, isMobile };
+};
+
+export default useScreenSize;
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index 56f4f1f..539a330 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -67,6 +67,8 @@ function MyApp({ Component, pageProps }: AppProps) {
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta property="og:url" content="https://dedge.exchange" />
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
             <link
               href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap"
               rel="stylesheet"
diff --git a/packages/frontend/pages/dashboard.tsx b/packages/frontend/pages/dashboard.tsx
new file mode 100644
index 0000000..444f03f
--- /dev/null
+++ b/packages/frontend/pages/dashboard.tsx
@@ -0,0 +1,9 @@
+import Layout from "../features/layout/Layout";
+
+const Dashboard = () => {
+  return <Layout activePage="dashboard">
+    <h1>I am the Dashboard!!!</h1>
+  </Layout>
+};
+
+export default Dashboard;
diff --git a/packages/frontend/pages/swap-tokens.tsx b/packages/frontend/pages/swap-tokens.tsx
new file mode 100644
index 0000000..82b773d
--- /dev/null
+++ b/packages/frontend/pages/swap-tokens.tsx
@@ -0,0 +1,9 @@
+import Layout from "../features/layout/Layout";
+
+const SwapTokens = () => {
+  return <Layout activePage="swap-tokens">
+    <h1>I am the Swap Tokens page!!!</h1>
+  </Layout>
+};
+
+export default SwapTokens;

From 8cadb63bc118d9d779f2d7131bba2babaf7a5ffa Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Tue, 14 Apr 2020 23:38:47 -0400
Subject: [PATCH 07/15] add status bar component

---
 .../frontend/features/layout/AppbarLayout.tsx |  9 ++----
 .../features/layout/SidebarLayout.tsx         | 11 ++-----
 .../features/status-bar/StatusBar.tsx         | 30 +++++++++++++++++++
 3 files changed, 34 insertions(+), 16 deletions(-)
 create mode 100644 packages/frontend/features/status-bar/StatusBar.tsx

diff --git a/packages/frontend/features/layout/AppbarLayout.tsx b/packages/frontend/features/layout/AppbarLayout.tsx
index da3b14a..4b8dd4d 100644
--- a/packages/frontend/features/layout/AppbarLayout.tsx
+++ b/packages/frontend/features/layout/AppbarLayout.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import Appbar from "./Appbar";
+import StatusBar from "../status-bar/StatusBar";
 
 const Container = styled.div`
   width: 100%;
@@ -9,13 +10,7 @@ const Container = styled.div`
   flex-direction: column;
 `;
 
-const StatusBar = styled.div`
-  background: black;
-  color: #fab127;
-`;
-
 const Content = styled.div`
-  background red;
   overflow: auto;
   flex: 1;
 `;
@@ -24,7 +19,7 @@ const AppbarLayout = ({ children, activePage }) => {
   return (
     <Container>
       <Appbar activePage={activePage} />
-      <StatusBar>status bar</StatusBar>
+      <StatusBar />
       <Content>{children}</Content>
     </Container>
   );
diff --git a/packages/frontend/features/layout/SidebarLayout.tsx b/packages/frontend/features/layout/SidebarLayout.tsx
index 625a7cc..d42143c 100644
--- a/packages/frontend/features/layout/SidebarLayout.tsx
+++ b/packages/frontend/features/layout/SidebarLayout.tsx
@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import Sidebar from "./Sidebar";
+import StatusBar from "../status-bar/StatusBar";
 
 const Container = styled.div`
   width: 100%;
@@ -8,23 +9,15 @@ const Container = styled.div`
   display: flex;
 `;
 
-const StatusBar = styled.div`
-  background: black;
-  color: #fab127;
-`;
-
 const Main = styled.div`
-  background blue;
   height: 100%;
   flex: 1;
   overflow: auto;
-
   display: flex;
   flex-direction: column;
 `;
 
 const Content = styled.div`
-  background red;
   flex: 1;
   overflow: auto;
 `;
@@ -34,7 +27,7 @@ const SidebarLayout = ({ children, activePage }) => {
     <Container>
       <Sidebar activePage={activePage} />
       <Main>
-        <StatusBar>Statusbar</StatusBar>
+        <StatusBar />
         <Content>{children}</Content>
       </Main>
     </Container>
diff --git a/packages/frontend/features/status-bar/StatusBar.tsx b/packages/frontend/features/status-bar/StatusBar.tsx
new file mode 100644
index 0000000..5133121
--- /dev/null
+++ b/packages/frontend/features/status-bar/StatusBar.tsx
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import useScreenSize from "../layout/useScreenSize";
+
+const Container = styled.div`
+  width: 100%;
+  height: ${(p) => (p.small ? `72px` : `120px`)};
+  color: white;
+  background: black;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  max-width: 1200px;
+  height: 100%;
+  margin: auto;
+  padding: 12px;
+`;
+
+const StatusBar = () => {
+  const { isMobile } = useScreenSize();
+  return (
+    <Container small={isMobile}>
+      <Content>
+        <h1>Status Here</h1>
+      </Content>
+    </Container>
+  );
+};
+
+export default StatusBar;

From 7b1806c1220777feba9fcb4360ebc175b7563289 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 01:05:50 -0400
Subject: [PATCH 08/15] allow close menu on overlay click

---
 packages/frontend/features/layout/Appbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
index 52b1e5b..26ce25a 100644
--- a/packages/frontend/features/layout/Appbar.tsx
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -55,7 +55,7 @@ const Menu = styled.div`
 `;
 
 const Overlay = styled.div`
-  pointer-events: none;
+  pointer-events: ${(p) => (p.show ? `unset` : `none`)};
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.5);
@@ -97,7 +97,7 @@ const Appbar = ({ activePage }) => {
         <LogoText>Dedge</LogoText>
         <MenuButton onClick={openMenu}>☰</MenuButton>
       </Container>
-      <Overlay show={isOpen} />
+      <Overlay show={isOpen} onClick={closeMenu} />
       <Menu isOpen={isOpen}>
         <CloseButton onClick={closeMenu}>✕</CloseButton>
         {pages.map((page) => (

From 0864eacf6555aff1437cbefb3d031d8c3305a4fb Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 01:48:47 -0400
Subject: [PATCH 09/15] redirect index page to dashboard

---
 packages/frontend/pages/index.tsx | 66 +++----------------------------
 1 file changed, 6 insertions(+), 60 deletions(-)

diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index 2de12fc..b19aa02 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -1,61 +1,7 @@
-// import Connection from "../containers/Connection";
-// import DACProxy from "../containers/DACProxy";
+export async function getServerSideProps(ctx) {
+  ctx.res.writeHead(302, { location: "/dashboard" });
+  ctx.res.end();
+}
 
-import Head from "next/head";
-
-import Layout from "../features/common/Layout";
-import Topbar from "../features/topbar/Topbar";
-import Content from "../features/common/Content";
-
-import Dashboard from "../features/dashboard/Dashboard";
-
-const Home = () => {
-  // const { signer, error, connect } = Connection.useContainer();
-  // const { proxyAddress } = DACProxy.useContainer();
-
-  // // no connection yet or have not looked up proxyAddress yet
-  // if (!signer || proxyAddress === null) {
-  //   return (
-  //     <Layout>
-  //       <Content>
-  //         <PleaseConnect connect={connect} error={error} />
-  //       </Content>
-  //     </Layout>
-  //   );
-  // }
-
-  // // user does not have a proxyAddress with us
-  // if (
-  //   proxyAddress === "0x0000000000000000000000000000000000000000"
-  // ) {
-  //   return (
-  //     <Layout>
-  //       <Topbar />
-  //       <Content>
-  //         <PleaseProxy />
-  //       </Content>
-  //     </Layout>
-  //   );
-  // }
-
-  // user has a proxyAddress, they are good to go
-  return (
-    <>
-      <Head>
-        <title>Dedge.exchange</title>
-        <meta name="description" content="Swap your debt AND collateral positions from Compound Finance!"/>
-        <meta name="keywords" content="Ethereum, DeFI, debt and collateral swapper, makerdao, compound finance"/>
-        <link rel="shortcut icon" href="/favicon.ico" />
-      </Head>
-
-      <Layout>
-        <Topbar />
-        <Content>
-          <Dashboard />
-        </Content>
-      </Layout>
-    </>
-  );
-};
-
-export default Home;
+function Page({ data }) {}
+export default Page;

From 7820d838c175328c968f41eb33b6603fa6f82236 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 01:49:05 -0400
Subject: [PATCH 10/15] remove experimental page

---
 packages/frontend/pages/new.tsx | 111 --------------------------------
 1 file changed, 111 deletions(-)
 delete mode 100644 packages/frontend/pages/new.tsx

diff --git a/packages/frontend/pages/new.tsx b/packages/frontend/pages/new.tsx
deleted file mode 100644
index e767896..0000000
--- a/packages/frontend/pages/new.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import styled from "styled-components";
-
-const Container = styled.div`
-  width: 100%;
-  height: 100vh;
-  display: flex;
-`;
-
-const NavBar = styled.div`
-  background: var(--bg);
-  text-align: right;
-  // height: 100vh;
-  width: 256px;
-  padding: 24px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-`;
-
-const Logo = styled.div`
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 24px;
-  font-weight: 300;
-  color: var(--highlight);
-  text-transform: uppercase;
-  letter-spacing: 4px;
-  margin-right: -6px;
-  text-shadow: 0px 0px 12px rgba(254, 146, 31, 0.4);
-
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-`;
-
-const NavItem = styled.div`
-  cursor: pointer;
-  color: ${(p) => (p.active ? `white` : `#666`)};
-  margin-bottom: 2rem;
-
-  &:hover {
-    color: var(--highlight);
-  }
-`;
-
-const Content = styled.div`
-  background: var(--dark-bg);
-  flex: 1;
-`;
-
-const PositionStatus = styled.div`
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  padding: 2rem;
-  background: #0a0d10;
-`;
-
-const Status = ({ label, percent = false, value }) => {
-  const valText = percent ? `${value}%` : `$${value}`;
-  return (
-    <div style={{ color: `white`, width: `120px` }}>
-      <div style={{  fontSize: "2rem", textAlign: `right` }}>{valText}</div>
-      <div style={{ textTransform: `uppercase`,color: `var(--highlight)`, textAlign: `right`, fontSize: `12px` }}>{label}</div>
-    </div>
-  );
-};
-
-const Home = () => {
-  return (
-    <Container>
-      <NavBar>
-        <Logo>Dedge</Logo>
-
-        <NavItem active>Dashboard</NavItem>
-        <NavItem>Automate</NavItem>
-        <NavItem>Swap Tokens</NavItem>
-        <NavItem>Import Positions</NavItem>
-        <NavItem>Exit Positions</NavItem>
-        <NavItem>Info</NavItem>
-      </NavBar>
-      <Content>
-        <PositionStatus>
-          <Status label="Supply Balance" value="123.00" />
-          <Status label="Borrow Balance" value="123.00" />
-          <Status label="Borrow Percent" value="123" percent />
-          <Status label="ETH Price" value="123.00" />
-          <Status label="Liquidation Price" value="123.00" />
-        </PositionStatus>
-
-        <table style={{ width: `100%` }}>
-          <tr>
-            <th>Firstname</th>
-            <th>Lastname</th>
-            <th>Age</th>
-          </tr>
-          <tr>
-            <td>Jill</td>
-            <td>Smith</td>
-            <td>50</td>
-          </tr>
-          <tr>
-            <td>Eve</td>
-            <td>Jackson</td>
-            <td>94</td>
-          </tr>
-        </table>
-      </Content>
-    </Container>
-  );
-};
-
-export default Home;

From ce545026807489b0a42225dfa7628fed02c61c49 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 01:51:12 -0400
Subject: [PATCH 11/15] add status bar for mobile and wide screens

---
 packages/frontend/features/layout/Appbar.tsx  |  2 +-
 packages/frontend/features/layout/Sidebar.tsx |  2 +-
 .../features/status-bar/MobileStatusBar.tsx   | 98 +++++++++++++++++++
 .../features/status-bar/StatusBar.tsx         | 39 +++-----
 .../features/status-bar/WideStatusBar.tsx     | 88 +++++++++++++++++
 packages/frontend/pages/_app.tsx              | 13 ++-
 packages/frontend/pages/dashboard.tsx         | 12 ++-
 packages/frontend/pages/index.tsx             |  2 +-
 packages/frontend/pages/swap-tokens.tsx       | 11 ++-
 9 files changed, 231 insertions(+), 36 deletions(-)
 create mode 100644 packages/frontend/features/status-bar/MobileStatusBar.tsx
 create mode 100644 packages/frontend/features/status-bar/WideStatusBar.tsx

diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
index 26ce25a..b9d888e 100644
--- a/packages/frontend/features/layout/Appbar.tsx
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -103,7 +103,7 @@ const Appbar = ({ activePage }) => {
         {pages.map((page) => (
           <MenuItem
             key={page.id}
-            active={page.id === activePage}
+            active={`/${page.id}` === activePage}
             onClick={() => Router.push(`/${page.id}`)}
           >
             {page.label}
diff --git a/packages/frontend/features/layout/Sidebar.tsx b/packages/frontend/features/layout/Sidebar.tsx
index 016f6f3..3ef36ee 100644
--- a/packages/frontend/features/layout/Sidebar.tsx
+++ b/packages/frontend/features/layout/Sidebar.tsx
@@ -48,7 +48,7 @@ const Sidebar = ({ activePage }) => {
       {pages.map((page) => (
         <NavItem
           key={page.id}
-          active={activePage === page.id}
+          active={activePage === `/${page.id}`}
           onClick={() => Router.push(`/${page.id}`)}
         >
           {page.label}
diff --git a/packages/frontend/features/status-bar/MobileStatusBar.tsx b/packages/frontend/features/status-bar/MobileStatusBar.tsx
new file mode 100644
index 0000000..bc0cb15
--- /dev/null
+++ b/packages/frontend/features/status-bar/MobileStatusBar.tsx
@@ -0,0 +1,98 @@
+import styled from "styled-components";
+import { useState } from "react";
+
+const Container = styled.div`
+  width: 100%;
+  height: 72px;
+  background: black;
+  position: relative;
+`;
+
+const Content = styled.div`
+  background black;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: ${(p) => (p.isOpen ? `216px` : `72px`)};
+  overflow: hidden;
+  transition: height 200ms ease-in-out;
+  position: relative;
+`;
+
+const StatusItem = styled.div`
+  height: 72px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+`;
+const Value = styled.div`
+  color: white;
+`;
+const Label = styled.div`
+  color: var(--highlight);
+  font-size: 12px;
+`;
+
+const TriangleIndicator = styled.div`
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  color: rgba(255, 255, 255, 0.15);
+  font-size: 24px;
+  transform: ${(p) =>
+    p.invert ? "rotate(-180deg) translateX(50%)" : "translateX(-50%)"};
+`;
+
+const Status = ({ label, value, percent = false }) => {
+  const valueStr = percent
+    ? `${parseFloat(value).toFixed(2)}%`
+    : `$${parseFloat(value).toFixed(2)}`;
+  return (
+    <StatusItem>
+      <Value>{valueStr}</Value>
+      <Label>{label}</Label>
+    </StatusItem>
+  );
+};
+
+const LastUpdate = ({ lastUpdated }) => {
+  const valueStr = "23 seconds ago";
+  return (
+    <StatusItem>
+      <Value>{valueStr}</Value>
+      <Label>Last Updated</Label>
+    </StatusItem>
+  );
+};
+
+const MobileStatusBar = ({ statusData }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleOpen = () => setIsOpen(!isOpen);
+
+  const {
+    supplyBalance,
+    borrowBalance,
+    borrowPercent,
+    liquidationPrice,
+    ethPrice,
+    lastUpdated,
+  } = statusData;
+  return (
+    <Container>
+      <Content isOpen={isOpen} onClick={toggleOpen}>
+        <Status label="Supply Balance" value={supplyBalance} />
+        <Status label="Borrow Balance" value={borrowBalance} />
+
+        <Status label="Borrow Percent" value={borrowPercent} percent />
+        <Status label="Liquidation Price" value={liquidationPrice} />
+
+        <Status label="ETH Price" value={ethPrice} />
+        <LastUpdate lastUpdated={lastUpdated} />
+
+        <TriangleIndicator invert={isOpen}>▾</TriangleIndicator>
+      </Content>
+    </Container>
+  );
+};
+
+export default MobileStatusBar;
diff --git a/packages/frontend/features/status-bar/StatusBar.tsx b/packages/frontend/features/status-bar/StatusBar.tsx
index 5133121..d289076 100644
--- a/packages/frontend/features/status-bar/StatusBar.tsx
+++ b/packages/frontend/features/status-bar/StatusBar.tsx
@@ -1,30 +1,23 @@
-import styled from "styled-components";
 import useScreenSize from "../layout/useScreenSize";
+import MobileStatusBar from "./MobileStatusBar";
+import WideStatusBar from "./WideStatusBar";
 
-const Container = styled.div`
-  width: 100%;
-  height: ${(p) => (p.small ? `72px` : `120px`)};
-  color: white;
-  background: black;
-`;
+const StatusBar = () => {
+  const { isMobile, isTablet } = useScreenSize();
 
-const Content = styled.div`
-  width: 100%;
-  max-width: 1200px;
-  height: 100%;
-  margin: auto;
-  padding: 12px;
-`;
+  const statusData = {
+    supplyBalance: 14242.13,
+    borrowBalance: 5242.12,
+    borrowPercent: 0.52, // 52%
+    liquidationPrice: 123.32,
+    ethPrice: 152.08,
+    lastUpdated: new Date(1586928677168),
+  };
 
-const StatusBar = () => {
-  const { isMobile } = useScreenSize();
-  return (
-    <Container small={isMobile}>
-      <Content>
-        <h1>Status Here</h1>
-      </Content>
-    </Container>
-  );
+  if (isMobile || isTablet) {
+    return <MobileStatusBar statusData={statusData} />;
+  }
+  return <WideStatusBar statusData={statusData} />;
 };
 
 export default StatusBar;
diff --git a/packages/frontend/features/status-bar/WideStatusBar.tsx b/packages/frontend/features/status-bar/WideStatusBar.tsx
new file mode 100644
index 0000000..458a480
--- /dev/null
+++ b/packages/frontend/features/status-bar/WideStatusBar.tsx
@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import { useState } from "react";
+
+const Container = styled.div`
+  width: 100%;
+  height: 120px;
+  background: black;
+  position: relative;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  max-width: 1200px;
+  height: 100%;
+  margin: auto;
+  // border: 1px solid red;
+  padding: 12px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+`;
+
+const StatusItem = styled.div`
+  height: 72px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  // border: 1px solid yellow;
+  flex: 1;
+`;
+const Value = styled.div`
+  color: white;
+  font-size: 24px;
+`;
+const Label = styled.div`
+  color: var(--highlight);
+  font-size: 12px;
+`;
+
+const Status = ({ label, value, percent = false }) => {
+  const valueStr = percent
+    ? `${parseFloat(value).toFixed(2)}%`
+    : `$${parseFloat(value).toFixed(2)}`;
+  return (
+    <StatusItem>
+      <Value>{valueStr}</Value>
+      <Label>{label}</Label>
+    </StatusItem>
+  );
+};
+
+const LastUpdate = ({ lastUpdated }) => {
+  const valueStr = "23 seconds ago";
+  return (
+    <StatusItem>
+      <Value>{valueStr}</Value>
+      <Label>Last Updated</Label>
+    </StatusItem>
+  );
+};
+
+const WideStatusBar = ({ statusData }) => {
+  const {
+    supplyBalance,
+    borrowBalance,
+    borrowPercent,
+    liquidationPrice,
+    ethPrice,
+    lastUpdated,
+  } = statusData;
+  return (
+    <Container>
+      <Content>
+        <Status label="Supply Balance" value={supplyBalance} />
+        <Status label="Borrow Balance" value={borrowBalance} />
+
+        <Status label="Borrow Percent" value={borrowPercent} percent />
+        <Status label="Liquidation Price" value={liquidationPrice} />
+
+        <Status label="ETH Price" value={ethPrice} />
+        <LastUpdate lastUpdated={lastUpdated} />
+      </Content>
+    </Container>
+  );
+};
+
+export default WideStatusBar;
diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx
index 539a330..4cea569 100644
--- a/packages/frontend/pages/_app.tsx
+++ b/packages/frontend/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { AppProps } from "next/app";
 import { BaseStyles, theme, ToastMessage } from "rimble-ui";
 import { ThemeProvider, withTheme } from "styled-components";
+import { useRouter } from "next/router";
 
 import Connection from "../containers/Connection";
 import Contracts from "../containers/Contracts";
@@ -11,6 +12,7 @@ import VaultsContainer from "../containers/Vaults";
 import Head from "next/head";
 
 import "../theme.css";
+import Layout from "../features/layout/Layout";
 
 const customTheme = {
   ...theme,
@@ -32,6 +34,8 @@ const WithProviders = ({ children }) => (
 );
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  console.log(router.pathname);
   return (
     <ThemeProvider theme={customTheme}>
       <BaseStyles>
@@ -67,7 +71,10 @@ function MyApp({ Component, pageProps }: AppProps) {
             />
             <meta name="twitter:card" content="summary_large_image" />
             <meta property="og:url" content="https://dedge.exchange" />
-            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+            <meta
+              name="viewport"
+              content="width=device-width, initial-scale=1.0"
+            />
 
             <link
               href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap"
@@ -82,7 +89,9 @@ function MyApp({ Component, pageProps }: AppProps) {
               }}
             />
           </Head>
-          <Component {...pageProps} />
+          <Layout activePage={router.pathname}>
+            <Component {...pageProps} />
+          </Layout>
         </WithProviders>
       </BaseStyles>
     </ThemeProvider>
diff --git a/packages/frontend/pages/dashboard.tsx b/packages/frontend/pages/dashboard.tsx
index 444f03f..917cb45 100644
--- a/packages/frontend/pages/dashboard.tsx
+++ b/packages/frontend/pages/dashboard.tsx
@@ -1,9 +1,13 @@
-import Layout from "../features/layout/Layout";
-
 const Dashboard = () => {
-  return <Layout activePage="dashboard">
+  return <>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
     <h1>I am the Dashboard!!!</h1>
-  </Layout>
+  </>
 };
 
 export default Dashboard;
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index b19aa02..34145d6 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -3,5 +3,5 @@ export async function getServerSideProps(ctx) {
   ctx.res.end();
 }
 
-function Page({ data }) {}
+function Page() {}
 export default Page;
diff --git a/packages/frontend/pages/swap-tokens.tsx b/packages/frontend/pages/swap-tokens.tsx
index 82b773d..66987c2 100644
--- a/packages/frontend/pages/swap-tokens.tsx
+++ b/packages/frontend/pages/swap-tokens.tsx
@@ -1,9 +1,12 @@
-import Layout from "../features/layout/Layout";
-
 const SwapTokens = () => {
-  return <Layout activePage="swap-tokens">
+  return <>
+    <h1>I am the Swap Tokens page!!!</h1>
+    <h1>I am the Swap Tokens page!!!</h1>
+    <h1>I am the Swap Tokens page!!!</h1>
+    <h1>I am the Swap Tokens page!!!</h1>
+    <h1>I am the Swap Tokens page!!!</h1>
     <h1>I am the Swap Tokens page!!!</h1>
-  </Layout>
+  </>
 };
 
 export default SwapTokens;

From 27033eedcfb4f2f150b69d8b2fc7c3ac7034e8fe Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 01:58:56 -0400
Subject: [PATCH 12/15] attempt to fix build

---
 packages/frontend/features/status-bar/WideStatusBar.tsx | 3 ---
 packages/frontend/pages/index.tsx                       | 5 ++++-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/features/status-bar/WideStatusBar.tsx b/packages/frontend/features/status-bar/WideStatusBar.tsx
index 458a480..cfd75b1 100644
--- a/packages/frontend/features/status-bar/WideStatusBar.tsx
+++ b/packages/frontend/features/status-bar/WideStatusBar.tsx
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { useState } from "react";
 
 const Container = styled.div`
   width: 100%;
@@ -13,7 +12,6 @@ const Content = styled.div`
   max-width: 1200px;
   height: 100%;
   margin: auto;
-  // border: 1px solid red;
   padding: 12px;
   display: flex;
   justify-content: space-around;
@@ -26,7 +24,6 @@ const StatusItem = styled.div`
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  // border: 1px solid yellow;
   flex: 1;
 `;
 const Value = styled.div`
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index 34145d6..2f4c337 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -1,5 +1,8 @@
 export async function getServerSideProps(ctx) {
-  ctx.res.writeHead(302, { location: "/dashboard" });
+  if (!ctx.res.headersSent) {
+    if (typeof ctx.res.writeHead === "function")
+      ctx.res.writeHead(302, { location: "/dashboard" });
+  }
   ctx.res.end();
 }
 

From 27df729e9ae047357c55ae5b464c924a2fa492fa Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 02:07:20 -0400
Subject: [PATCH 13/15] move pages around and delete dashboard page, just use
 index; redirect wasn't working

---
 packages/frontend/features/layout/Appbar.tsx  |  6 +++---
 packages/frontend/features/layout/PAGES.ts    |  8 -------
 packages/frontend/features/layout/Sidebar.tsx |  6 +++---
 packages/frontend/pages/PAGES.ts              | 12 +++++++++++
 packages/frontend/pages/dashboard.tsx         | 13 ------------
 packages/frontend/pages/index.tsx             | 21 +++++++++++--------
 6 files changed, 30 insertions(+), 36 deletions(-)
 delete mode 100644 packages/frontend/features/layout/PAGES.ts
 create mode 100644 packages/frontend/pages/PAGES.ts
 delete mode 100644 packages/frontend/pages/dashboard.tsx

diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
index b9d888e..c8e881e 100644
--- a/packages/frontend/features/layout/Appbar.tsx
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -1,7 +1,7 @@
 import Router from "next/router";
 import styled from "styled-components";
 import { useState } from "react";
-import { pages } from "./PAGES";
+import { pages } from "../../pages/PAGES";
 
 const Container = styled.div`
   color: white;
@@ -103,8 +103,8 @@ const Appbar = ({ activePage }) => {
         {pages.map((page) => (
           <MenuItem
             key={page.id}
-            active={`/${page.id}` === activePage}
-            onClick={() => Router.push(`/${page.id}`)}
+            active={page.path === activePage}
+            onClick={() => Router.push(page.path)}
           >
             {page.label}
           </MenuItem>
diff --git a/packages/frontend/features/layout/PAGES.ts b/packages/frontend/features/layout/PAGES.ts
deleted file mode 100644
index 9f3742f..0000000
--- a/packages/frontend/features/layout/PAGES.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const pages = [
-  { label: "Dashboard", id: "dashboard" },
-  { label: "Automate", id: "automate" },
-  { label: "Swap Tokens", id: "swap-tokens" },
-  { label: "Import Positions", id: "import-positions" },
-  { label: "Exit Positions", id: "exit-positions" },
-  { label: "Info", id: "info" },
-];
diff --git a/packages/frontend/features/layout/Sidebar.tsx b/packages/frontend/features/layout/Sidebar.tsx
index 3ef36ee..a8b9da6 100644
--- a/packages/frontend/features/layout/Sidebar.tsx
+++ b/packages/frontend/features/layout/Sidebar.tsx
@@ -1,7 +1,7 @@
 import Router from "next/router";
 import styled from "styled-components";
 import useScreenSize from "./useScreenSize";
-import { pages } from "./PAGES";
+import { pages } from "../../pages/PAGES";
 
 const Container = styled.div`
   background: var(--bg);
@@ -48,8 +48,8 @@ const Sidebar = ({ activePage }) => {
       {pages.map((page) => (
         <NavItem
           key={page.id}
-          active={activePage === `/${page.id}`}
-          onClick={() => Router.push(`/${page.id}`)}
+          active={activePage === page.path}
+          onClick={() => Router.push(page.path)}
         >
           {page.label}
         </NavItem>
diff --git a/packages/frontend/pages/PAGES.ts b/packages/frontend/pages/PAGES.ts
new file mode 100644
index 0000000..52828d6
--- /dev/null
+++ b/packages/frontend/pages/PAGES.ts
@@ -0,0 +1,12 @@
+export const pages = [
+  { label: "Dashboard", id: "dashboard", path: "/" },
+  { label: "Automate", id: "automate", path: "/automate" },
+  { label: "Swap Tokens", id: "swap-tokens", path: "/swap-tokens" },
+  {
+    label: "Import Positions",
+    id: "import-positions",
+    path: "/import-positions",
+  },
+  { label: "Exit Positions", id: "exit-positions", path: "/exit-positions" },
+  { label: "Info", id: "info", path: "/info" },
+];
diff --git a/packages/frontend/pages/dashboard.tsx b/packages/frontend/pages/dashboard.tsx
deleted file mode 100644
index 917cb45..0000000
--- a/packages/frontend/pages/dashboard.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-const Dashboard = () => {
-  return <>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-    <h1>I am the Dashboard!!!</h1>
-  </>
-};
-
-export default Dashboard;
diff --git a/packages/frontend/pages/index.tsx b/packages/frontend/pages/index.tsx
index 2f4c337..917cb45 100644
--- a/packages/frontend/pages/index.tsx
+++ b/packages/frontend/pages/index.tsx
@@ -1,10 +1,13 @@
-export async function getServerSideProps(ctx) {
-  if (!ctx.res.headersSent) {
-    if (typeof ctx.res.writeHead === "function")
-      ctx.res.writeHead(302, { location: "/dashboard" });
-  }
-  ctx.res.end();
-}
+const Dashboard = () => {
+  return <>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+    <h1>I am the Dashboard!!!</h1>
+  </>
+};
 
-function Page() {}
-export default Page;
+export default Dashboard;

From a6f485fae5c0a7f1703e9151800a30d304eea857 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 02:15:02 -0400
Subject: [PATCH 14/15] add rest of the pages

---
 packages/frontend/{pages => }/PAGES.ts        |  0
 packages/frontend/features/layout/Appbar.tsx  |  2 +-
 packages/frontend/features/layout/Sidebar.tsx |  2 +-
 packages/frontend/pages/automate.tsx          | 14 ++++++++++++++
 packages/frontend/pages/exit-positions.tsx    | 13 +++++++++++++
 packages/frontend/pages/import-positions.tsx  | 14 ++++++++++++++
 packages/frontend/pages/info.tsx              | 15 +++++++++++++++
 7 files changed, 58 insertions(+), 2 deletions(-)
 rename packages/frontend/{pages => }/PAGES.ts (100%)
 create mode 100644 packages/frontend/pages/automate.tsx
 create mode 100644 packages/frontend/pages/exit-positions.tsx
 create mode 100644 packages/frontend/pages/import-positions.tsx
 create mode 100644 packages/frontend/pages/info.tsx

diff --git a/packages/frontend/pages/PAGES.ts b/packages/frontend/PAGES.ts
similarity index 100%
rename from packages/frontend/pages/PAGES.ts
rename to packages/frontend/PAGES.ts
diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
index c8e881e..80f9b62 100644
--- a/packages/frontend/features/layout/Appbar.tsx
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -1,7 +1,7 @@
 import Router from "next/router";
 import styled from "styled-components";
 import { useState } from "react";
-import { pages } from "../../pages/PAGES";
+import { pages } from "../../PAGES";
 
 const Container = styled.div`
   color: white;
diff --git a/packages/frontend/features/layout/Sidebar.tsx b/packages/frontend/features/layout/Sidebar.tsx
index a8b9da6..2c89ee5 100644
--- a/packages/frontend/features/layout/Sidebar.tsx
+++ b/packages/frontend/features/layout/Sidebar.tsx
@@ -1,7 +1,7 @@
 import Router from "next/router";
 import styled from "styled-components";
 import useScreenSize from "./useScreenSize";
-import { pages } from "../../pages/PAGES";
+import { pages } from "../../PAGES";
 
 const Container = styled.div`
   background: var(--bg);
diff --git a/packages/frontend/pages/automate.tsx b/packages/frontend/pages/automate.tsx
new file mode 100644
index 0000000..aa9d7aa
--- /dev/null
+++ b/packages/frontend/pages/automate.tsx
@@ -0,0 +1,14 @@
+const Automate = () => {
+  return (
+    <>
+      <h1>I am the Automation Page!!!</h1>
+      <h1>I am the Automation Page!!!</h1>
+      <h1>I am the Automation Page!!!</h1>
+      <h1>I am the Automation Page!!!</h1>
+      <h1>I am the Automation Page!!!</h1>
+      <h1>I am the Automation Page!!!</h1>
+    </>
+  );
+};
+
+export default Automate;
diff --git a/packages/frontend/pages/exit-positions.tsx b/packages/frontend/pages/exit-positions.tsx
new file mode 100644
index 0000000..a119323
--- /dev/null
+++ b/packages/frontend/pages/exit-positions.tsx
@@ -0,0 +1,13 @@
+const ExitPositions = () => {
+  return (
+    <>
+      <h1>I am the exit positions page!!!</h1>
+      <h1>I am the exit positions page!!!</h1>
+      <h1>I am the exit positions page!!!</h1>
+      <h1>I am the exit positions page!!!</h1>
+      <h1>I am the exit positions page!!!</h1>
+    </>
+  );
+};
+
+export default ExitPositions;
diff --git a/packages/frontend/pages/import-positions.tsx b/packages/frontend/pages/import-positions.tsx
new file mode 100644
index 0000000..60e5986
--- /dev/null
+++ b/packages/frontend/pages/import-positions.tsx
@@ -0,0 +1,14 @@
+const ImportPositions = () => {
+  return (
+    <>
+      <h1>I am the import positions page!!!</h1>
+      <h1>I am the import positions page!!!</h1>
+      <h1>I am the import positions page!!!</h1>
+      <h1>I am the import positions page!!!</h1>
+      <h1>I am the import positions page!!!</h1>
+      <h1>I am the import positions page!!!</h1>
+    </>
+  );
+};
+
+export default ImportPositions;
diff --git a/packages/frontend/pages/info.tsx b/packages/frontend/pages/info.tsx
new file mode 100644
index 0000000..4edfa8d
--- /dev/null
+++ b/packages/frontend/pages/info.tsx
@@ -0,0 +1,15 @@
+const Info = () => {
+  return (
+    <>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+      <h1>I am the info page!!!</h1>
+    </>
+  );
+};
+
+export default Info;

From f908dd611f8e2e4ad12ca0afa3ed034fe14cf771 Mon Sep 17 00:00:00 2001
From: Adrian Li <li.adrianmc@gmail.com>
Date: Wed, 15 Apr 2020 02:29:12 -0400
Subject: [PATCH 15/15] close menu on click

---
 packages/frontend/features/layout/Appbar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/features/layout/Appbar.tsx b/packages/frontend/features/layout/Appbar.tsx
index 80f9b62..44be9d6 100644
--- a/packages/frontend/features/layout/Appbar.tsx
+++ b/packages/frontend/features/layout/Appbar.tsx
@@ -104,7 +104,10 @@ const Appbar = ({ activePage }) => {
           <MenuItem
             key={page.id}
             active={page.path === activePage}
-            onClick={() => Router.push(page.path)}
+            onClick={() => {
+              closeMenu()
+              Router.push(page.path)
+            }}
           >
             {page.label}
           </MenuItem>