navbar fixes

package-lock.json

@@ -17,6 +17,7 @@
         "astro-icon": "^0.8.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.8.0",
         "tailwindcss": "^3.3.2",
         "typewriter-effect": "^2.19.0"
       }
@@ -4584,6 +4585,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "astro-icon": "^0.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0",
     "tailwindcss": "^3.3.2",
     "typewriter-effect": "^2.19.0"
   }

src/components/Navbar/Navbar.astro

@@ -1,54 +0,0 @@
----
-import React, { useState } from "react";
-import react from "@astrojs/react";
-import { Icon } from "astro-icon";
-
-import "./NavbarStyles.css";
-
-function Navbar() {
-    const [isOpen, setOpen] = useState(false);
-    const [nav, setNav] = useState(false);
-    const toggleNav = () => setNav(!nav);
-    const toggleHam = () => setOpen(!isOpen);
-}
----
-
-<div class="navbar">
-    <div class="logo"></div>
-    <ul class="nav-menu">
-        <li><a href="home">Home</a></li>
-        <li><a href="vision">Vision</a></li>
-        <li><a href="w3">What is Web3</a></li>
-        <li>Donate</li>
-        <div class="download-btn-container">
-            <a class="download-btn" href="#">Download Extension</a>
-        </div>
-    </ul>
-
-    <div class="hamburger" onclick="toggleNav()">
-        <Icon pack="mdi" name="hamburger" toggled="isOpen" toggle="setOpen" />
-    </div>
-    <div class="mobile-menu">
-        <ul class="mobile-nav" onclick="toggleHam()">
-            <li onclick="toggleNav()">
-                <a href="#" onclick="toggleHam()">Home</a>
-            </li>
-            <li onclick="toggleNav()">
-                <a href="#vision" title="Vision" onclick="toggleHam()">Vision</a
-                >
-            </li>
-            <li onclick="toggleNav()">
-                <a href="#whatisweb3" title="What is Web3" onclick="toggleHam()"
-                    >What is Web3</a
-                >
-            </li>
-            <li onclick="toggleNav()">
-                <a href="#donate" onclick="toggleHam()">Donate</a>
-            </li>
-            <div class="download-btn-container">
-                <a class="download-btn" href="#">Download Extension</a>
-            </div>
-        </ul>
-        <div class="mobile-menu-btn"></div>
-    </div>
-</div>

src/components/Navbar/Navbar.jsx

@@ -0,0 +1,43 @@
+import React, {useState} from 'react'
+import {HiOutlineMenuAlt4} from 'react-icons/hi'
+
+import './NavbarStyles.css'
+
+function Navbar() {
+    const [nav, setNav] = useState(false)
+    const toggleNav = () => setNav(!nav)
+
+    return (
+        <div className='navbar'>
+            <div className="logo">
+            </div>
+            <ul className="nav-menu">
+                <li><a href="#">Home</a></li>
+                <li><a href="#vision">Vision</a></li>
+                <li><a href="#whatisweb3">What is Web3</a></li>
+                <li>Donate</li>
+                <div className='download-btn-container'>
+                    <a className="download-btn" href="#">Download Extension</a>
+                </div>
+            </ul>
+
+            <div className="hamburger" onClick={toggleNav}>
+                <HiOutlineMenuAlt4 className='icon items-end'/>
+            </div>
+            <div className={nav ? 'mobile-menu active' : 'mobile-menu'}>
+                <ul className="mobile-nav">
+                    <li onClick={toggleNav}><a href="#">Home</a></li>
+                    <li onClick={toggleNav}><a href="#vision">Vision</a></li>
+                    <li onClick={toggleNav}><a href="#whatisweb3">What is Web3</a></li>
+                    <li onClick={toggleNav}>Donate</li>
+                    <div className='download-btn-container'>
+                        <a className="download-btn" href="#">Download Extension</a>
+                    </div>
+                </ul>
+                <div className="mobile-menu-btn"></div>
+            </div>
+        </div>
+    )
+}
+
+export default Navbar

src/components/Navbar/NavbarStyles.css

@@ -30,7 +30,7 @@
 
 .nav-menu {
     display: flex;
-    justify-content: right;
+    align-items: flex-end;
     padding: 1em;
     transition: all 1s linear;
 }
@@ -74,7 +74,7 @@ li {
 }
 
 .hamburger {
-    display: end;
+    display: none;
     font-size: var(--font-size-xl);
     -webkit-tap-highlight-color: transparent;
     -webkit-touch-callout: none;
@@ -86,8 +86,7 @@ li {
 }
 
 .mobile-menu {
-    top: -50em;
+    display: none;
-    position: relative;
 }
 
 @media screen and (max-width: 940px) {
@@ -101,10 +100,9 @@ li {
 
     .hamburger {
         display: block;
-        position: absolute;
+        position: flex;
-        right: 20;
+        max-width: fit-content;
-        justify-content: right;
+        z-index: 999;
-        z-index: 999 !important;
     }
 
     .mobile-menu {
@@ -125,10 +123,13 @@ li {
         outline-color: #07363fa7;
         box-shadow: 0px 4px 4px #00000096;
         transition: 0.55s;
-        top: 2em;
         z-index: 998 !important;
     }
 
+    .active {
+        top: 2em;
+    }
+
     .mobile-menu li {
         padding: 1em 0.5em;
         margin: 0 1em;

src/components/P1/Header/HeaderStyles.css

@@ -1,53 +1,131 @@
-.header-container {
+.logo {
-  margin-block: calc(77px + 1.5625vw);
+  /* background-image: url(../../../assets/lume-logo.webp); */
-  z-index: -1 !important;
+  background-position: 50%;
+  background-size: cover;
+  margin-left: 5px;
+  height: 70px;
+  width: 210px;
 }
 
-.header {
+.navbar-container {
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.navbar {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 5px;
+  white-space: nowrap;
+  gap: 36px;
+}
+
+.nav-menu {
+  display: flex;
+  align-items: flex-end;
+  padding: 1em;
+}
+
+li {
+  padding: 1rem;
+}
+
+.download-btn-container {
+  color: var(--black);
   font-family: var(--font-family-jetbrains_mono);
+  font-size: var(--font-size-s);
+  font-weight: 400;
+  font-style: normal;
+  align-items: flex-end;
+  background-color: var(--aquamarine);
+  border-radius: 5px;
+  display: flex;
+  height: 52px;
+  min-width: 245px;
+  padding: 12px 5.2px;
+  transform: scale(1);
+  transition: 0.3s;
 }
 
-.header-alt {
+.download-btn-container a {
-  color: var(--aquamarine);
+  color: black;
-  font-family: var(--font-family-jetbrains_mono);
 }
 
-.header-underscore {
+.download-btn-container:hover {
-  animation: blink 1.3s step-end infinite;
+  transform: scale(1.01);
+  transition: 0.3s;
 }
 
-@keyframes blink {
+.download-btn {
-
+  letter-spacing: 0;
-  from,
+  min-height: 26px;
-  to {
+  text-align: center;
-    color: transparent
+  width: 234px;
-  }
-
-  50% {
-    color: rgba(245, 245, 245)
-  }
-}
-
-.cursor::after {
   display: block;
-  content: '';
-  position: absolute;
-  width: 4px;
-  height: 100%;
-  background-color: #fff;
-  animation: cursor 0.6s linear infinite alternate;
-  will-change: opacity;
 }
 
-@keyframes cursor {
+.hamburger {
+  display: none;
+}
 
-  0%,
+.mobile-menu {
-  40% {
+  display: none;
-    opacity: 1;
+}
+
+@media screen and (max-width: 940px) {
+  .nav-menu {
+    display: none;
   }
 
-  60%,
+  .hamburger {
-  100% {
+    display: block;
-    opacity: 0;
+    position: flex;
+    max-width: fit-content;
+    z-index: 999;
+  }
+
+  .mobile-menu {
+    display: flex;
+    flex-direction: column;
+    width: 55%;
+    margin-left: 50%;
+    top: -100vh;
+    left: 0;
+    position: absolute;
+    justify-content: space-between;
+    align-items: flex-end;
+    background-color: #031418;
+    transition: 0.2s;
+  }
+
+  .active {
+    top: 2em;
+  }
+
+  .mobile-menu li {
+    padding: 1em 0.5em;
+    margin: 0 1em;
+  }
+
+  .download-btn-container {
+    transform: scale(0.7);
+    transition: 0.3s;
+    margin-left: -0.8em;
+  }
+
+  .download-btn-container:hover {
+    transform: scale(0.75);
+    transition: 0.3s;
+  }
+
+  .download-btn {
+    letter-spacing: 0;
+    min-height: 26px;
+    text-align: center;
+    width: 234px;
+    display: block;
   }
 }

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import Navbar from "../components/Navbar/Navbar.astro";
+import Navbar from "../components/Navbar/Navbar.jsx";
 import Header from "../components/P1/Header/Header.astro";
 import Vision from "../components/P1/Vision/Vision.astro";
 import "../index.css";
@@ -22,7 +22,7 @@ import "../index.css";
 		<link rel="stylesheet" href="./src/index.css" />
 	</head>
 	<body>
-		<Navbar />
+		<Navbar client:load />
 		<Header />
 		<Vision />
 	</body>