From 247124c7a7742b60e03900ad6644f4a4a48fdc10 Mon Sep 17 00:00:00 2001
From: Max Leiter <maxwell.leiter@gmail.com>
Date: Mon, 7 Mar 2022 18:36:36 -0800
Subject: [PATCH] Header and home page improvements

---
 client/components/document/index.tsx         |  2 +-
 client/components/header/header.module.css   |  5 +++
 client/components/header/index.tsx           | 32 +++++++++++++++++---
 client/components/preview/preview.module.css |  3 --
 client/pages/_app.tsx                        |  2 +-
 client/pages/index.tsx                       |  2 +-
 client/pages/mine.tsx                        |  2 +-
 client/pages/new.tsx                         |  2 +-
 client/pages/post/[id].tsx                   |  3 +-
 client/pages/signin.tsx                      |  2 +-
 client/pages/signup.tsx                      |  2 +-
 11 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/client/components/document/index.tsx b/client/components/document/index.tsx
index ece89eca..8f2f1423 100644
--- a/client/components/document/index.tsx
+++ b/client/components/document/index.tsx
@@ -30,7 +30,7 @@ const Document = ({ remove, editable, title, content, setTitle, setContent, init
     }
 
     return (
-        <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'}>
+        <Card marginBottom={'var(--gap)'} marginTop={'var(--gap)'} style={{ maxWidth: 980, margin: "0 auto" }}>
             <div className={styles.fileNameContainer}>
                 <Input
                     placeholder="MyFile.md"
diff --git a/client/components/header/header.module.css b/client/components/header/header.module.css
index 7b1d1e25..4a693d1d 100644
--- a/client/components/header/header.module.css
+++ b/client/components/header/header.module.css
@@ -11,6 +11,11 @@
   display: none;
 }
 
+.mobile {
+  position: relative;
+  z-index: 1;
+}
+
 @media only screen and (max-width: 650px) {
   .tabs {
     display: none;
diff --git a/client/components/header/index.tsx b/client/components/header/index.tsx
index 55fb6a3e..de1419a5 100644
--- a/client/components/header/index.tsx
+++ b/client/components/header/index.tsx
@@ -1,4 +1,4 @@
-import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading } from "@geist-ui/core";
+import { Page, ButtonGroup, Button, useBodyScroll, useMediaQuery, useTheme, Tabs, Loading, Spacer } from "@geist-ui/core";
 import { Moon, Sun, UserPlus as SignUpIcon, User as SignInIcon, Home as HomeIcon, Menu as MenuIcon, Tool as SettingsIcon, UserX as SignoutIcon, PlusCircle as NewIcon, List as YourIcon } from "@geist-ui/icons";
 import { DriftProps } from "../../pages/_app";
 import { useEffect, useMemo, useState } from "react";
@@ -7,7 +7,7 @@ import { useRouter } from "next/router";
 import useSignedIn from "../../lib/hooks/use-signed-in";
 import Mobile from "./controls";
 import Controls from "./controls";
-
+import NextLink from 'next/link'
 
 const Header = ({ changeTheme, theme }: DriftProps) => {
     const router = useRouter();
@@ -91,8 +91,8 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
     }
 
     return (
-        <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"} >
-            <div className={styles.tabs}>
+        <Page.Header height={'var(--page-nav-height)'} margin={0} paddingBottom={0} paddingTop={"var(--gap)"}>
+            {!isMobile && <div className={styles.tabs}>
                 <Tabs
                     value={selectedTab}
                     leftSpace={0}
@@ -119,7 +119,7 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                         else return null
                     })}
                 </Tabs>
-            </div>
+            </div>}
             <div className="controls">
                 {isMobile && (
                     <Button
@@ -131,6 +131,28 @@ const Header = ({ changeTheme, theme }: DriftProps) => {
                     </Button>
                 )}
             </div>
+            {isMobile && expanded && (<div className={styles.mobile}>
+                <ButtonGroup vertical>
+                    {pages.map((tab, index) => {
+                        if (tab.condition)
+                            return <Button
+                                key={`${tab.name}-${index}`}
+                                onClick={() => {
+                                    const nameMatch = pages.find(page => page.name === tab.name)
+                                    if (nameMatch?.action) {
+                                        nameMatch.action()
+                                    } else {
+                                        router.push(`${tab.href}`)
+                                    }
+                                }}
+                                icon={tab.icon}
+                            >
+                                {tab.name}
+                            </Button>
+                    })}
+                </ButtonGroup>
+            </div>)}
+
         </Page.Header >
     )
 }
diff --git a/client/components/preview/preview.module.css b/client/components/preview/preview.module.css
index d5adeae4..fcee23ff 100644
--- a/client/components/preview/preview.module.css
+++ b/client/components/preview/preview.module.css
@@ -1,7 +1,5 @@
 .markdownPreview {
   position: relative;
-  padding: var(--gap);
-  padding-top: 0;
   overflow-y: auto;
 }
 
@@ -47,7 +45,6 @@
   content: "";
 }
 
-/* circles for sublists */
 .markdownPreview ul ul {
   list-style: circle;
 }
diff --git a/client/pages/_app.tsx b/client/pages/_app.tsx
index c0ebc473..30a35dde 100644
--- a/client/pages/_app.tsx
+++ b/client/pages/_app.tsx
@@ -27,7 +27,7 @@ function MyApp({ Component, pageProps }: AppProps<ThemeProps>) {
     <GeistProvider themeType={themeType} >
       <CssBaseline />
       <Component {...pageProps} theme={themeType} changeTheme={changeTheme} />
-    </ GeistProvider>
+    </GeistProvider>
   )
 }
 
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index be8cfa17..649ac360 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -7,7 +7,7 @@ import { ThemeProps } from './_app'
 import Document from '../components/document'
 const Home = ({ theme, changeTheme }: ThemeProps) => {
   return (
-    <Page className={styles.container}>
+    <Page className={styles.container} width="100%">
       <Head>
         <title>Drift</title>
         <meta name="description" content="A self-hostable clone of GitHub Gist" />
diff --git a/client/pages/mine.tsx b/client/pages/mine.tsx
index ba70a28a..99a1c4d2 100644
--- a/client/pages/mine.tsx
+++ b/client/pages/mine.tsx
@@ -11,7 +11,7 @@ const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: ()
   const { isLoading, isSignedIn } = useSignedIn({ redirectIfNotAuthed: true })
 
   return (
-    <Page className={styles.container}>
+    <Page className={styles.container} width="100%">
       <Head>
         <title>Drift</title>
         <meta name="description" content="A self-hostable clone of GitHub Gist" />
diff --git a/client/pages/new.tsx b/client/pages/new.tsx
index d3dbad6b..37cc176f 100644
--- a/client/pages/new.tsx
+++ b/client/pages/new.tsx
@@ -14,7 +14,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
     router.push("/signin")
   }
   return (
-    <Page className={styles.container}>
+    <Page className={styles.container} width="100%">
       <Head>
         <title>Drift</title>
         <meta name="description" content="A self-hostable clone of GitHub Gist" />
diff --git a/client/pages/post/[id].tsx b/client/pages/post/[id].tsx
index 02adabe8..6f9457d6 100644
--- a/client/pages/post/[id].tsx
+++ b/client/pages/post/[id].tsx
@@ -1,4 +1,5 @@
-import { Loading, Page, Text } from "@geist-ui/core";
+import { Loading, Text } from "@geist-ui/core";
+import Page from '../../components/page/Page'
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useState } from "react";
 import Document from '../../components/document'
diff --git a/client/pages/signin.tsx b/client/pages/signin.tsx
index e5d51f0e..20db6174 100644
--- a/client/pages/signin.tsx
+++ b/client/pages/signin.tsx
@@ -4,7 +4,7 @@ import Header from "../components/header";
 import { ThemeProps } from "./_app";
 
 const SignIn = ({ theme, changeTheme }: ThemeProps) => (
-    <Page>
+    <Page width={"100%"}>
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>
diff --git a/client/pages/signup.tsx b/client/pages/signup.tsx
index c5b59f34..2bb1c9c8 100644
--- a/client/pages/signup.tsx
+++ b/client/pages/signup.tsx
@@ -4,7 +4,7 @@ import Header from "../components/header";
 import { ThemeProps } from "./_app";
 
 const SignUp = ({ theme, changeTheme }: ThemeProps) => (
-    <Page>
+    <Page width="100%">
         <Page.Header>
             <Header theme={theme} changeTheme={changeTheme} />
         </Page.Header>