navbar fixes
This commit is contained in:
roryjshelton
parent
80aae172da
commit
c9ae52b5ef
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
|
|
@ -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;
|
||||
position: relative;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
|
|
@ -101,10 +100,9 @@ li {
|
|||
|
||||
.hamburger {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 20;
|
||||
justify-content: right;
|
||||
z-index: 999 !important;
|
||||
position: flex;
|
||||
max-width: fit-content;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -1,53 +1,131 @@
|
|||
.header-container {
|
||||
margin-block: calc(77px + 1.5625vw);
|
||||
z-index: -1 !important;
|
||||
.logo {
|
||||
/* background-image: url(../../../assets/lume-logo.webp); */
|
||||
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 {
|
||||
color: var(--aquamarine);
|
||||
font-family: var(--font-family-jetbrains_mono);
|
||||
.download-btn-container a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.header-underscore {
|
||||
animation: blink 1.3s step-end infinite;
|
||||
.download-btn-container:hover {
|
||||
transform: scale(1.01);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
|
||||
from,
|
||||
to {
|
||||
color: transparent
|
||||
}
|
||||
|
||||
50% {
|
||||
color: rgba(245, 245, 245)
|
||||
}
|
||||
}
|
||||
|
||||
.cursor::after {
|
||||
.download-btn {
|
||||
letter-spacing: 0;
|
||||
min-height: 26px;
|
||||
text-align: center;
|
||||
width: 234px;
|
||||
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%,
|
||||
40% {
|
||||
opacity: 1;
|
||||
.mobile-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 940px) {
|
||||
.nav-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
60%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue