Added BottomHeader for new features

Previous Header was split into a base Header component and TopHeader.

components/BottomHeader/index.tsx

@@ -0,0 +1,55 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import { useRouter } from 'next/router'
+
+import AppContext from '~context/AppContext'
+
+import Header from '~components/Header'
+import Button from '~components/Button'
+
+import { ButtonType } from '~utils/enums'
+
+const BottomHeader = () => {
+    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
+
+    const [username, setUsername] = useState(undefined)
+    const [cookies, _, removeCookie] = useCookies(['user'])
+
+    const router = useRouter()
+
+    useEffect(() => {
+        if (cookies.user) {
+            setAuthenticated(true)
+            setUsername(cookies.user.username)
+        } else {
+            setAuthenticated(false)
+        }
+    }, [cookies, setUsername, setAuthenticated])
+
+    const leftNav = () => {
+        return (
+            <Button icon="edit" click={() => {}}>Add more info</Button>
+        )
+    }
+
+    const rightNav = () => {
+        return (
+            <div>
+                { (editable && router.route === '/p/[party]') ?
+                    <Button icon="cross" type={ButtonType.Destructive} click={() => {}}>Delete team</Button> : ''
+                }
+            </div>
+        )
+    }
+        
+            
+    return (
+        <Header 
+            position="bottom"
+            left={ leftNav() }
+            right={ rightNav() }
+        />
+    )
+}
+
+export default BottomHeader

components/Header/index.scss

@@ -1,8 +1,13 @@
-#Header {
+.Header {
     display: flex;
     height: 34px;
     width: 100%;
 
+    &.bottom {
+        position: sticky;
+        bottom: $unit * 2;
+    }
+
     #right {
         display: flex;
         gap: 8px;

components/Header/index.tsx

@@ -1,82 +1,19 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React from 'react'
-import { useCookies } from 'react-cookie'
-import { useRouter } from 'next/router'
-
-import AppContext from '~context/AppContext'
-
-import Button from '~components/Button'
-import HeaderMenu from '~components/HeaderMenu'
 
 import './index.scss'
 
-interface Props {}
+interface Props {
+    position: 'top' | 'bottom'
+    left: JSX.Element,
+    right: JSX.Element
+}
 
 const Header = (props: Props) => {        
-    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
-
-    const [username, setUsername] = useState(undefined)
-    const [cookies, _, removeCookie] = useCookies(['user'])
-
-    const router = useRouter()
-
-    useEffect(() => {
-        if (cookies.user) {
-            setAuthenticated(true)
-            setUsername(cookies.user.username)
-            console.log(`Logged in as user "${cookies.user.username}"`)
-        } else {
-            setAuthenticated(false)
-            console.log('You are currently not logged in.')
-        }
-    }, [cookies, setUsername, setAuthenticated])
-
-    function copyToClipboard() {
-        const el = document.createElement('input')
-        el.value = window.location.href
-        el.id = 'url-input'
-        document.body.appendChild(el)
-
-        el.select()
-        document.execCommand('copy')
-        el.remove()
-    }
-
-    function newParty() {
-        router.push('/')
-    }
-
-    function logout() {
-        removeCookie('user')
-
-        setAuthenticated(false)
-        if (editable) setEditable(false)
-
-        // How can we log out without navigating to root
-        router.push('/')
-        return false
-    }
-        
     return (
-        <nav id="Header">
+        <nav className={`Header ${props.position}`}>
-            <div id="left">
+            <div id="left">{ props.left }</div>
-                <div className="dropdown">
-                    <Button type="menu">Menu</Button>
-                    { (username) ? 
-                        <HeaderMenu authenticated={authenticated} username={username} logout={logout} /> :
-                        <HeaderMenu authenticated={authenticated} />
-                    }
-                </div>
-            </div>
             <div className="push" />
-            <div id="right">
+            <div id="right">{ props.right }</div>
-                { (editable && router.route === '/p/[slug]') ?
-                    <Button color="red" type="link" click={() => {}}>Delete</Button> : ''
-                }
-                { (router.route === '/p/[slug]') ? 
-                    <Button type="link" click={copyToClipboard}>Copy link</Button> : ''
-                }
-                <Button type="new" click={newParty}>New</Button>
-            </div>
         </nav>
     )
 }

components/Layout/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactElement } from 'react'
-import Header from '~components/Header'
+import TopHeader from '~components/TopHeader'
+import BottomHeader from '~components/BottomHeader'
 
 interface Props {
     children: ReactElement
@@ -8,8 +9,9 @@ interface Props {
 const Layout = ({children}: Props) => {
   return (
     <>
-      <Header />
+      <TopHeader />
       <main>{children}</main>
+      <BottomHeader />
     </>
   )
 }

components/TopHeader/index.tsx

@@ -0,0 +1,89 @@
+import React, { useContext, useEffect, useState } from 'react'
+import { useCookies } from 'react-cookie'
+import { useRouter } from 'next/router'
+
+import AppContext from '~context/AppContext'
+
+import Header from '~components/Header'
+import Button from '~components/Button'
+import HeaderMenu from '~components/HeaderMenu'
+
+const TopHeader = () => {
+    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
+
+    const [username, setUsername] = useState(undefined)
+    const [cookies, _, removeCookie] = useCookies(['user'])
+
+    const router = useRouter()
+
+    useEffect(() => {
+        if (cookies.user) {
+            setAuthenticated(true)
+            setUsername(cookies.user.username)
+            console.log(`Logged in as user "${cookies.user.username}"`)
+        } else {
+            setAuthenticated(false)
+            console.log('You are currently not logged in.')
+        }
+    }, [cookies, setUsername, setAuthenticated])
+
+    function copyToClipboard() {
+        const el = document.createElement('input')
+        el.value = window.location.href
+        el.id = 'url-input'
+        document.body.appendChild(el)
+
+        el.select()
+        document.execCommand('copy')
+        el.remove()
+    }
+
+    function newParty() {
+        router.push('/')
+    }
+
+    function logout() {
+        removeCookie('user')
+
+        setAuthenticated(false)
+        if (editable) setEditable(false)
+
+        // TODO: How can we log out without navigating to root
+        router.push('/')
+        return false
+    }
+
+    const leftNav = () => {
+        return (
+            <div className="dropdown">
+                <Button icon="menu">Menu</Button>
+                { (username) ? 
+                    <HeaderMenu authenticated={authenticated} username={username} logout={logout} /> :
+                    <HeaderMenu authenticated={authenticated} />
+                }
+            </div>
+        )
+    }
+
+    const rightNav = () => {
+        return (
+            <div>
+                { (router.route === '/p/[party]') ? 
+                    <Button icon="link" click={copyToClipboard}>Copy link</Button> : ''
+                }
+                <Button icon="new" click={newParty}>New</Button>
+            </div>
+        )
+    }
+        
+            
+    return (
+        <Header 
+            position="top"
+            left={ leftNav() }
+            right={ rightNav() }
+        />
+    )
+}
+
+export default TopHeader

styles/globals.scss

@@ -3,25 +3,35 @@
 html {
     background: $background-color;
     font-size: 62.5%;
-    padding: $unit * 2;
 }
 
 body {
     -webkit-font-smoothing: antialiased;
-    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
     font-size: 1.4rem;
+    height: 100vh;
+    padding: $unit * 2;
     
     &.no-scroll {
         overflow: hidden;
     }
 }
 
+#__next {
+    height: 100%;
+}
+
+main {
+    min-height: 90%;
+}
+
 a {
     text-decoration: none;
 }
 
 button, input {
-    font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 h1, h2, h3, p {