Header and home page improvements

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"

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;

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 >
     )
 }

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;
 }

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>
   )
 }
 

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" />

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" />

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" />

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'

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>

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>