Some header fixes

client/components/header/controls.tsx

@@ -0,0 +1,44 @@
+import React, { useMemo } from 'react'
+import Router, { useRouter } from 'next/router'
+import MoonIcon from '@geist-ui/icons/moon'
+import SunIcon from '@geist-ui/icons/sun'
+import UserIcon from '@geist-ui/icons/user'
+import GitHubIcon from '@geist-ui/icons/github'
+import { Select, Spacer, useTheme } from '@geist-ui/core'
+import { ThemeProps } from '../../pages/_app'
+// import { useAllThemes, useTheme } from '@geist-ui/core'
+import styles from './header.module.css'
+
+const Controls = ({ changeTheme, theme }: ThemeProps) => {
+    const switchThemes = (type: string | string[]) => {
+        changeTheme()
+        if (typeof window === 'undefined' || !window.localStorage) return
+        window.localStorage.setItem('drift-theme', Array.isArray(type) ? type[0] : type)
+    }
+
+
+    return (
+        <div className={styles.wrapper}>
+            <Select
+                scale={0.5}
+                h="28px"
+                pure
+                onChange={switchThemes}
+                value={theme}
+            >
+                <Select.Option value="light">
+                    <span className={styles.selectContent}>
+                        <SunIcon size={14} /> Light
+                    </span>
+                </Select.Option>
+                <Select.Option value="dark">
+                    <span className={styles.selectContent}>
+                        <MoonIcon size={14} /> Dark
+                    </span>
+                </Select.Option>
+            </Select>
+        </div >
+    )
+}
+
+export default React.memo(Controls);

client/components/header/header.module.css

@@ -11,7 +11,7 @@
   display: none;
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 650px) {
   .tabs {
     display: none;
   }
@@ -31,3 +31,22 @@
   height: 40px;
   padding: 0;
 }
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  width: min-content;
+}
+
+.selectContent {
+  width: auto;
+  height: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.selectContent :global(svg) {
+  margin-right: 10px;
+  margin-left: 2px;
+}

client/components/header/index.tsx

@@ -5,9 +5,11 @@ import { useEffect, useMemo, useState } from "react";
 import styles from './header.module.css';
 import { useRouter } from "next/router";
 import useSignedIn from "../../lib/hooks/use-signed-in";
+import Mobile from "./controls";
+import Controls from "./controls";
 
 
-const Header = ({ changeTheme }: DriftProps) => {
+const Header = ({ changeTheme, theme }: DriftProps) => {
     const router = useRouter();
     const [selectedTab, setSelectedTab] = useState<string>();
     const [expanded, setExpanded] = useState<boolean>(false)
@@ -43,12 +45,12 @@ const Header = ({ changeTheme }: DriftProps) => {
             icon: <YourIcon />,
             condition: isSignedIn
         },
-        {
-            name: "Settings",
-            href: "/",
-            icon: <SettingsIcon />,
-            condition: isSignedIn
-        },
+        // {
+        //     name: "Settings",
+        //     href: "/settings",
+        //     icon: <SettingsIcon />,
+        //     condition: isSignedIn
+        // },
         {
             name: "Sign out",
             action: () => {
@@ -107,7 +109,6 @@ const Header = ({ changeTheme }: DriftProps) => {
                         }
                     }}>
                     {pages.map((tab, index) => {
-                        console.log(tab, tab.condition)
                         if (tab.condition)
                             return <Tabs.Item
                                 font="14px"
@@ -120,7 +121,7 @@ const Header = ({ changeTheme }: DriftProps) => {
                 </Tabs>
             </div>
             <div className="controls">
-                {isMobile ? (
+                {isMobile && (
                     <Button
                         className="menu-toggle"
                         auto
@@ -128,9 +129,6 @@ const Header = ({ changeTheme }: DriftProps) => {
                         onClick={() => setExpanded(!expanded)}>
                         <MenuIcon size="1.125rem" />
                     </Button>
-                ) : (
-                    // <Controls />
-                    <></>
                 )}
             </div>
         </Page.Header >