navbar logout and other custom icons

components/Auth.tsx

@@ -27,6 +27,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
 
       <input
         className="font-mono p-2 bg-blue-50 dark:bg-gray-600 dark:text-white rounded focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none"
+        autoFocus
         type="text"
         placeholder="************"
         value={token}

components/Navbar.tsx

@@ -1,17 +1,31 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { IconName } from '@fortawesome/fontawesome-svg-core'
 import { Dialog, Transition } from '@headlessui/react'
 import toast, { Toaster } from 'react-hot-toast'
 
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { Fragment, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
 
 import siteConfig from '../config/site.json'
 
 const Navbar = () => {
   const router = useRouter()
+  const [tokenPresent, setTokenPresent] = useState(false)
   const [isOpen, setIsOpen] = useState(false)
 
+  useEffect(() => {
+    const storedToken = () => {
+      for (const r of siteConfig.protectedRoutes) {
+        if (localStorage.hasOwnProperty(r)) {
+          return true
+        }
+      }
+      return false
+    }
+    setTokenPresent(storedToken())
+  }, [])
+
   const clearTokens = () => {
     setIsOpen(false)
 
@@ -30,25 +44,39 @@ const Navbar = () => {
       <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
         <Toaster />
 
-        <h1 className="font-bold text-xl p-2 rounded dark:text-white hover:opacity-80">
-          <Link href="/">{siteConfig.title}</Link>
-        </h1>
-        <div className="flex items-center">
-          <button
-            className="flex space-x-2 items-center p-3 rounded dark:text-white hover:opacity-80"
-            onClick={() => setIsOpen(true)}
-          >
-            <FontAwesomeIcon icon="key" />
-            <span>Logout</span>
-          </button>
-          <a
-            href="https://github.com/spencerwooo/onedrive-vercel-index"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="p-2 rounded dark:text-white hover:opacity-80"
-          >
-            <FontAwesomeIcon icon={['fab', 'github']} size="lg" />
+        <Link href="/">
+          <a className="flex items-center space-x-2 font-bold text-xl p-2 dark:text-white hover:opacity-80">
+            <FontAwesomeIcon icon="cloud" />
+            <span className="hidden sm:block">{siteConfig.title}</span>
           </a>
+        </Link>
+
+        <div className="flex items-center">
+          {siteConfig.contacts.map((c, i) => (
+            <a
+              key={i}
+              href={c.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+            >
+              {c.platform === 'email' ? (
+                <FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
+              ) : (
+                <FontAwesomeIcon icon={['fab', c.platform as IconName]} size="lg" />
+              )}
+            </a>
+          ))}
+
+          {tokenPresent && (
+            <button
+              className="flex space-x-2 items-center p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+              onClick={() => setIsOpen(true)}
+            >
+              <span>Logout</span>
+              <FontAwesomeIcon icon="sign-out-alt" />
+            </button>
+          )}
         </div>
       </div>
 
@@ -64,7 +92,7 @@ const Navbar = () => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0" />
+              <Dialog.Overlay className="fixed inset-0 bg-gray-50 dark:bg-gray-800" />
             </Transition.Child>
 
             {/* This element is to trick the browser into centering the modal contents. */}

config/site.json

@@ -4,5 +4,15 @@
   "protectedRoutes": [
     "/🌞 Private folder/u-need-a-password",
     "/🥟 Some test files/Protected route"
+  ],
+  "contacts": [
+    {
+      "platform": "email",
+      "link": "mailto:spencer.wushangbo@gmail.com"
+    },
+    {
+      "platform": "github",
+      "link": "https://github.com/spencerwooo/onedrive-vercel-index"
+    }
   ]
 }

pages/_app.tsx

@@ -19,6 +19,7 @@ import {
   faCopy,
   faArrowAltCircleDown,
   faTrashAlt,
+  faEnvelope,
 } from '@fortawesome/free-regular-svg-icons'
 import {
   faPlus,
@@ -32,6 +33,8 @@ import {
   faUndo,
   faBook,
   faKey,
+  faSignOutAlt,
+  faCloud,
 } from '@fortawesome/free-solid-svg-icons'
 import { faGithub, faMarkdown } from '@fortawesome/free-brands-svg-icons'
 
@@ -65,7 +68,10 @@ library.add(
   faBook,
   faArrowAltCircleDown,
   faKey,
-  faTrashAlt
+  faTrashAlt,
+  faSignOutAlt,
+  faEnvelope,
+  faCloud
 )
 
 function MyApp({ Component, pageProps }: AppProps) {