From ae58be511611070c6e34802e2ef2af3f3c83622c Mon Sep 17 00:00:00 2001
From: Lucian Petri <petri.lucian@outlook.com>
Date: Fri, 30 Dec 2022 01:56:00 +0200
Subject: [PATCH] refactor Header

---
 website/src/components/Header/Header.tsx | 130 +++++++++++------------
 1 file changed, 64 insertions(+), 66 deletions(-)

diff --git a/website/src/components/Header/Header.tsx b/website/src/components/Header/Header.tsx
index 81f2ebb5..aff76433 100644
--- a/website/src/components/Header/Header.tsx
+++ b/website/src/components/Header/Header.tsx
@@ -1,10 +1,10 @@
-import { Box, Button, Container, useColorModeValue } from "@chakra-ui/react";
+import { Button, Container } from "@chakra-ui/react";
 import { Popover } from "@headlessui/react";
 import { AnimatePresence, motion } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import {  useSession } from "next-auth/react";
-import { FaUser} from "react-icons/fa";
+import { useSession } from "next-auth/react";
+import { FaUser } from "react-icons/fa";
 
 import { NavLinks } from "./NavLinks";
 import { UserMenu } from "./UserMenu";
@@ -55,69 +55,67 @@ function AccountButton() {
 
 export function Header(props) {
   return (
-    <Container>
-      <nav>
-        <Container className="relative z-10 flex justify-between py-8">
-          <div className="relative z-10 flex items-center gap-16">
-            <Link href="/" aria-label="Home" className="flex items-center">
-              <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
-              <span className="text-2xl font-bold ml-3">Open Assistant</span>
-            </Link>
-            <div className="hidden lg:flex lg:gap-10">
-              <NavLinks />
-            </div>
+    <nav>
+      <Container className="flex justify-evenly py-8 px-10 border-b">
+        <div className="relative z-10 flex items-center gap-16">
+          <Link href="/" aria-label="Home" className="flex items-center">
+            <Image src="/images/logos/logo.svg" className="mx-auto object-fill" width="50" height="50" alt="logo" />
+            <span className="text-2xl font-bold ml-3">Open Assistant</span>
+          </Link>
+          <div className="hidden lg:flex lg:gap-10">
+            <NavLinks />
           </div>
-          <div className="flex items-center gap-4">
-            <Popover className="lg:hidden">
-              {({ open }) => (
-                <>
-                  <Popover.Button
-                    className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
-                    aria-label="Toggle site navigation"
-                  >
-                    {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
-                  </Popover.Button>
-                  <AnimatePresence initial={false}>
-                    {open && (
-                      <>
-                        <Popover.Overlay
-                          static
-                          as={motion.div}
-                          initial={{ opacity: 0 }}
-                          animate={{ opacity: 1 }}
-                          exit={{ opacity: 0 }}
-                          className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
-                        />
-                        <Popover.Panel
-                          static
-                          as={motion.div}
-                          initial={{ opacity: 0, y: -32 }}
-                          animate={{ opacity: 1, y: 0 }}
-                          exit={{
-                            opacity: 0,
-                            y: -32,
-                            transition: { duration: 0.2 },
-                          }}
-                          className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
-                        >
-                          <div className="space-y-4">
-                            <MobileNavLink href="#join-us">Join Us</MobileNavLink>
-                            <MobileNavLink href="#faqs">FAQs</MobileNavLink>
-                          </div>
-                          <div className="mt-8 flex flex-col gap-4"></div>
-                        </Popover.Panel>
-                      </>
-                    )}
-                  </AnimatePresence>
-                </>
-              )}
-            </Popover>
-            <AccountButton />
-            <UserMenu />
-            <ColorModeSwitch />
-          </div>
-        </Container>
-      </nav>
-    </Container>
+        </div>
+        <div className="flex items-center gap-4">
+          <Popover className="lg:hidden">
+            {({ open }) => (
+              <>
+                <Popover.Button
+                  className="relative z-10 inline-flex items-center rounded-lg stroke-gray-900 p-2 hover:bg-gray-200/50 hover:stroke-gray-600 active:stroke-gray-900 [&:not(:focus-visible)]:focus:outline-none"
+                  aria-label="Toggle site navigation"
+                >
+                  {({ open }) => (open ? <ChevronUpIcon className="h-6 w-6" /> : <MenuIcon className="h-6 w-6" />)}
+                </Popover.Button>
+                <AnimatePresence initial={false}>
+                  {open && (
+                    <>
+                      <Popover.Overlay
+                        static
+                        as={motion.div}
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 z-1 bg-gray-300/60 backdrop-blur"
+                      />
+                      <Popover.Panel
+                        static
+                        as={motion.div}
+                        initial={{ opacity: 0, y: -32 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{
+                          opacity: 0,
+                          y: -32,
+                          transition: { duration: 0.2 },
+                        }}
+                        className="absolute inset-x-0 top-0 z-0 origin-top rounded-b-2xl bg-white px-6 pb-6 pt-32 shadow-2xl shadow-gray-900/20"
+                      >
+                        <div className="space-y-4">
+                          <MobileNavLink href="#join-us">Join Us</MobileNavLink>
+                          <MobileNavLink href="#faqs">FAQs</MobileNavLink>
+                        </div>
+                        <div className="mt-8 flex flex-col gap-4"></div>
+                      </Popover.Panel>
+                    </>
+                  )}
+                </AnimatePresence>
+              </>
+            )}
+          </Popover>
+          <AccountButton />
+          <UserMenu />
+          <ColorModeSwitch />
+        </div>
+      </Container>
+    </nav>
   );
 }