dailydotdev · idoshamun · Jan 31, 2021 · Jan 31, 2021
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -0,0 +1,102 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { size1px, size3, size4, size7, sizeN } from '../styles/sizes';
+import ArrowIcon from '../icons/arrow.svg';
+import { focusOutline } from '../styles/helpers';
+import TagsFilter from './TagsFilter';
+
+const asideWidth = sizeN(70);
+
+const Trigger = styled.button`
+  display: flex;
+  width: ${sizeN(12)};
+  height: ${sizeN(14)};
+  align-items: center;
+  margin-top: ${sizeN(15)};
+  padding: 0 0 0 ${size3};
+  background: var(--theme-background-primary);
+  border: ${size1px} solid var(--theme-divider-quaternary);
+  border-left: none;
+  border-radius: 0 ${size4} ${size4} 0;
+  color: var(--theme-label-tertiary);
+  font-size: ${size7};
+  cursor: pointer;
+  ${focusOutline}
+
+  &:hover {
+    color: var(--theme-label-primary);
+  }
+
+  .icon {
+    transform: rotate(90deg);
+    transition: transform 0.2s linear 0.1s;
+  }
+`;
+
+const Aside = styled.aside`
+  width: ${asideWidth};
+  overflow-y: scroll;
+  align-self: stretch;
+  background: var(--theme-background-primary);
+  border-radius: 0 ${size4} ${size4} 0;
+  border-right: ${size1px} solid var(--theme-divider-primary);
+  transition: visibility 0s 0.3s;
+  visibility: hidden;
+`;
+
+const Container = styled.div<{ opened: boolean }>`
+  display: flex;
+  position: fixed;
+  align-items: flex-start;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 3;
+  transform: translateX(-${asideWidth});
+  will-change: transform;
+  transition: transform 0.2s linear 0.1s;
+
+  ${({ opened }) =>
+    opened &&
+    `&& {
+      transform: translateX(0);
+    }
+
+    ${Trigger} {
+    color: var(--theme-label-primary);
+    border-color: var(--theme-divider-primary);
+
+    .icon {
+      transform: rotate(270deg);
+    }
+  }
+
+  ${Aside} {
+    visibility: visible;
+    transition-delay: 0s;
+  }`}
+`;
+
+export default function Sidebar(): ReactElement {
+  const [opened, setOpened] = useState(false);
+  const [enableQueries, setEnableQueries] = useState(false);
+
+  useEffect(() => {
+    if (opened && !enableQueries) {
+      setTimeout(() => {
+        setEnableQueries(true);
+      }, 300);
+    }
+  }, [opened]);
+
+  return (
+    <Container opened={opened}>
+      <Aside>
+        <TagsFilter enableQueries={enableQueries} />
+      </Aside>
+      <Trigger title="Open sidebar" onClick={() => setOpened(!opened)}>
+        <ArrowIcon />
+      </Trigger>
+    </Container>
+  );
+}
diff --git a/components/TagsFilter.tsx b/components/TagsFilter.tsx
@@ -45,7 +45,7 @@ import useMutateFilters, {
 } from '../lib/useMutateFilters';
 import ReactGA from 'react-ga';
 
-const Container = styled.main`
+const Container = styled.div`
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -149,7 +149,13 @@ const Tag = ({
   </li>
 );
 
-export default function TagsFilter(): ReactElement {
+export type TagsFilterProps = {
+  enableQueries?: boolean;
+};
+
+export default function TagsFilter({
+  enableQueries = true,
+}: TagsFilterProps): ReactElement {
   const { user, showLogin, tokenRefreshed } = useContext(AuthContext);
   const [tagsQuery, setTagsQuery] = useState<string>(null);
   const enabledSearch = tagsQuery?.length > 0;
@@ -166,7 +172,7 @@ export default function TagsFilter(): ReactElement {
         user ? ALL_TAGS_AND_SETTINGS_QUERY : ALL_TAGS_QUERY,
       ),
     {
-      enabled: tokenRefreshed,
+      enabled: tokenRefreshed && enableQueries,
     },
   );
 

diff --git a/components/layouts/FooterNavBarLayout.tsx b/components/layouts/FooterNavBarLayout.tsx
@@ -14,6 +14,8 @@ import { ActiveTabIndicator } from '../utilities';
 import { css, Global } from '@emotion/react';
 import { laptop } from '../../styles/media';
 import AuthContext from '../AuthContext';
+import dynamicPageLoad from '../../lib/dynamicPageLoad';
+import useMedia from '../../lib/useMedia';
 
 export const footerNavBarBreakpoint = laptop;
 
@@ -31,6 +33,10 @@ const Flipped = dynamicParent<FlippedProps>(
   React.Fragment,
 );
 
+const Sidebar = dynamicPageLoad(
+  () => import(/* webpackChunkName: "Sidebar" */ '../Sidebar'),
+);
+
 type FooterNavBarLayoutProps = { children?: ReactNode };
 
 const navBarHeight = '3.063rem';
@@ -113,10 +119,16 @@ export default function FooterNavBarLayout({
   const { user, showLogin } = useContext(AuthContext);
   const router = useRouter();
   const selectedTab = tabs.findIndex((tab) => tab.path === router?.pathname);
+  const showSidebar = useMedia(
+    [footerNavBarBreakpoint.replace('@media ', '')],
+    [true],
+    false,
+  );
 
   return (
     <>
       <Global styles={globalStyle} />
+      {showSidebar && <Sidebar />}
       <NavBar flipKey={selectedTab} spring="veryGentle" element="nav">
         {tabs.map((tab, index) => (
           <div key={tab.path}>

diff --git a/components/layouts/MainFeedPage.tsx b/components/layouts/MainFeedPage.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, useContext } from 'react';
 import { MainLayoutProps } from './MainLayout';
 import styled from '@emotion/styled';
 import Link from 'next/link';
-import { size6 } from '../../styles/sizes';
+import { size3, size6 } from '../../styles/sizes';
 import TertiaryButton from '../buttons/TertiaryButton';
 import { useRouter } from 'next/router';
 import Feed from '../Feed';
@@ -13,7 +13,7 @@ import { FeedPage } from '../utilities';
 const Nav = styled.nav`
   display: flex;
   align-items: center;
-  margin-bottom: ${size6};
+  margin: ${size3} 0 ${size6};
 `;
 
 export type Tab = { path: string; title: string; default?: boolean };

diff --git a/pages/bookmarks.tsx b/pages/bookmarks.tsx
@@ -25,6 +25,7 @@ const Header = styled.div`
   align-items: center;
   margin: ${size3} 0;
   color: var(--theme-label-secondary);
+  font-weight: bold;
   ${typoCallout}
 `;
 

diff --git a/pages/filters.tsx b/pages/filters.tsx
@@ -2,7 +2,11 @@ import React, { ReactElement } from 'react';
 import { getLayout } from '../components/layouts/FooterNavBarLayout';
 import TagsFilter from '../components/TagsFilter';
 
-const FiltersPage = (): ReactElement => <TagsFilter />;
+const FiltersPage = (): ReactElement => (
+  <main>
+    <TagsFilter />
+  </main>
+);
 
 FiltersPage.getLayout = getLayout;
 

diff --git a/pages/tags/[tag].tsx b/pages/tags/[tag].tsx
@@ -45,6 +45,7 @@ const TagInformation = styled.div`
   align-items: center;
   margin: ${size3} 0;
   color: var(--theme-label-secondary);
+  font-weight: bold;
   ${typoCallout}
 
   button.laptop {