From c9ae52b5efc399586576e0248fc2953fa54ec13a Mon Sep 17 00:00:00 2001
From: roryjshelton <76418221+roryjshelton@users.noreply.github.com>
Date: Thu, 27 Apr 2023 18:54:32 -0700
Subject: [PATCH] navbar fixes
---
package-lock.json | 9 ++
package.json | 1 +
src/components/Navbar/Navbar.astro | 54 --------
src/components/Navbar/Navbar.jsx | 43 +++++++
src/components/Navbar/NavbarStyles.css | 19 +--
src/components/P1/Header/HeaderStyles.css | 150 ++++++++++++++++------
src/pages/index.astro | 4 +-
7 files changed, 179 insertions(+), 101 deletions(-)
delete mode 100644 src/components/Navbar/Navbar.astro
create mode 100644 src/components/Navbar/Navbar.jsx
diff --git a/package-lock.json b/package-lock.json
index 226aa89..58c9e1b 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 8d89b0f..30b7bc1 100644
--- a/package.json
+++ b/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"
}
diff --git a/src/components/Navbar/Navbar.astro b/src/components/Navbar/Navbar.astro
deleted file mode 100644
index 5c90abb..0000000
--- a/src/components/Navbar/Navbar.astro
+++ /dev/null
@@ -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);
-}
----
-
-
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
new file mode 100644
index 0000000..e7a133c
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/src/components/Navbar/NavbarStyles.css b/src/components/Navbar/NavbarStyles.css
index aeaa514..86bad2b 100644
--- a/src/components/Navbar/NavbarStyles.css
+++ b/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;
- 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;
diff --git a/src/components/P1/Header/HeaderStyles.css b/src/components/P1/Header/HeaderStyles.css
index ba0ebc7..01f9a23 100644
--- a/src/components/P1/Header/HeaderStyles.css
+++ b/src/components/P1/Header/HeaderStyles.css
@@ -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;
}
}
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fc5f0f5..67a8e71 100644
--- a/src/pages/index.astro
+++ b/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";
-
+