fix(app-header): Resolve conflict with #38

components/AppHeader.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import ProfileDialog from './ProfileDialog';
 
+import { navItems } from '../lib/data';
+
 /**
  * A global site header throughout the entire app.
  */
@@ -19,52 +21,34 @@ export default function AppHeader() {
 
   return (
     <>
-      <header
-        className="top-0 sticky justify-between flex flex-row p-2 md:p-4 shadow-md items-center h-16 z-10"
-        style={{ backgroundColor: '#F2F3FF' }}
-      >
-        <div className="flex align-middle items-center">
-          <Link href="/" passHref>
-            <div
-              className="flex font-display self-center inline-block items-center"
+      <header className="top-0 sticky justify-between flex flex-row p-2 md:p-4 bg-indigo-100 items-center h-16 z-10">
+        <div className="flex w-6/12 align-middle items-center">
+          <Link href="/">
+            <a
+              className="flex relative font-display self-center items-center after:absolute after:block after:right-0 after:w-6 after:h-6 after:rounded-full after:bg-gray-400"
               onClick={dismissDialog}
             >
-              <span className="md:text-2xl text-l font-semibold md:mr-10 mr-5">HackPortal</span>
-            </div>
+              <span className="md:text-2xl text-l font-black md:mr-10 mr-5">HackUTD VIII</span>
+            </a>
           </Link>
-          <div className="md:text-xl text-xs md:text-left gap-x-6 flex flex-row">
-            <Link href="/dashboard" passHref>
-              <div onClick={dismissDialog} className="cursor-pointer">
-                <span className="inline md:invisible"></span>
-                <div className="md:mx-4 mr-2 font-medium">Dashboard</div>
-              </div>
-            </Link>
-            <Link href="/sponsors" passHref>
-              <div onClick={dismissDialog} className="cursor-pointer">
-                <span className="inline md:invisible"></span>
-                <a className="md:mx-4 mr-2 font-medium">Sponsors</a>
-              </div>
-            </Link>
-            <Link href="/schedule" passHref>
-              <div onClick={dismissDialog} className="cursor-pointer">
-                <span className="inline md:invisible"></span>
-                <a className="md:mx-4 mr-2 font-medium">Schedule</a>
-              </div>
-            </Link>
-            <Link href="/about" passHref>
-              <div onClick={dismissDialog} className="cursor-pointer">
-                <span className="inline md:invisible"></span>
-                <a className="md:mx-4 mr-2 font-medium">About</a>
-              </div>
-            </Link>
+          <div className="text-xs flex items-center ml-12 md:text-left">
+            {navItems.map((item) => (
+              <Link key={item.text} href={item.path}>
+                <a onClick={dismissDialog}>
+                  <span className="md:invisible"></span>
+                  <a className="md:mx-4 text-sm font-bold">{item.text}</a>
+                </a>
+              </Link>
+            ))}
           </div>
         </div>
-        <div className="flex flex-row-reverse md:text-xl text-s">
-          <div className="mx-4">
-            <button className="SigninButton font-header" onClick={toggleDialog}>
-              Sign In
-            </button>
-          </div>
+        <div className="flex mr-8">
+          <button
+            className="SigninButton font-header font-bold bg-white px-8 py-1 rounded-full border-2 border-black text-sm"
+            onClick={toggleDialog}
+          >
+            Sign In
+          </button>
         </div>
         {showProfileDialog && <ProfileDialog onDismiss={dismissDialog} />}
       </header>

lib/data.ts

@@ -0,0 +1,12 @@
+export const buttonDatas = [
+  { text: 'Hacker App', path: '/' },
+  { text: 'Mentor App', path: '/' },
+  { text: 'Sponsor App', path: '/' },
+];
+
+export const navItems = [
+  { text: 'Dashboard', path: '/dashboard' },
+  { text: 'Sponsors', path: '/sponsors' },
+  { text: 'Schedule', path: '/schedule' },
+  { text: 'About', path: '/about' },
+];