navbar fixes

This commit is contained in:
roryjshelton 2023-04-27 18:54:32 -07:00
parent 80aae172da
commit c9ae52b5ef
7 changed files with 179 additions and 101 deletions

9
package-lock.json generated
View File

@ -17,6 +17,7 @@
"astro-icon": "^0.8.0", "astro-icon": "^0.8.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "^3.3.2", "tailwindcss": "^3.3.2",
"typewriter-effect": "^2.19.0" "typewriter-effect": "^2.19.0"
} }
@ -4584,6 +4585,14 @@
"react": "^18.2.0" "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": { "node_modules/react-is": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

View File

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

View File

@ -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>

View File

@ -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

View File

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

View File

@ -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-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; display: block;
content: ''; }
.hamburger {
display: none;
}
.mobile-menu {
display: none;
}
@media screen and (max-width: 940px) {
.nav-menu {
display: none;
}
.hamburger {
display: block;
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; position: absolute;
width: 4px; justify-content: space-between;
height: 100%; align-items: flex-end;
background-color: #fff; background-color: #031418;
animation: cursor 0.6s linear infinite alternate; transition: 0.2s;
will-change: opacity;
}
@keyframes cursor {
0%,
40% {
opacity: 1;
} }
60%, .active {
100% { top: 2em;
opacity: 0; }
.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;
} }
} }

View File

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