mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
update navbar
This commit is contained in:
liyunze
parent
b7ef1bdc4b
commit
238e5dfdf7
2 changed files with 4 additions and 273 deletions
|
|
@ -1,5 +1,7 @@
|
|||
---
|
||||
import { HoverNavigation } from "@/components/ui/HoverNavigation";
|
||||
import { Image } from "astro:assets";
|
||||
import pfp from "@/components/images/pfp_new.webp";
|
||||
|
||||
const navLinks = [
|
||||
{
|
||||
|
|
@ -26,13 +28,8 @@ const navLinks = [
|
|||
---
|
||||
|
||||
<div
|
||||
class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center gap-5 overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
|
||||
class="bg-secondary fixed top-5 left-1/2 z-30 box-border flex -translate-x-1/2 items-center justify-center overflow-auto rounded-full border-2 border-solid border-gray-700 px-5 py-3"
|
||||
>
|
||||
<img
|
||||
src="/images/pfp_new.webp"
|
||||
alt="Ryan"
|
||||
width={50}
|
||||
class="rounded-full"
|
||||
/>
|
||||
<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
|
||||
<HoverNavigation items={navLinks} client:load />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,266 +0,0 @@
|
|||
<div class="w-full">
|
||||
<label
|
||||
class="hamburger-menu bg-primary fixed flex rounded-lg border-2 border-solid border-gray-100"
|
||||
aria-label="Menu"
|
||||
transition:persist
|
||||
transition:name="hamburger"
|
||||
>
|
||||
<span class="top-bun"></span>
|
||||
<input type="checkbox" aria-label="Toggle menu" />
|
||||
<span class="bottom-bun"></span>
|
||||
</label>
|
||||
<aside class="sidebar z-20 flex">
|
||||
<nav
|
||||
class="flex w-full flex-col items-center justify-center gap-5 capitalize"
|
||||
role="navigation"
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/">Home</a
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/what-i-do">What I Do</a
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/projects">Projects</a
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/skills">Skills</a
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/experience">Experience</a
|
||||
>
|
||||
<a
|
||||
class="sidebar-url rounded-md px-5 py-2 text-center text-2xl transition-colors duration-300 hover:bg-gray-100 hover:text-gray-600"
|
||||
href="/contact">Contact</a
|
||||
>
|
||||
</nav>
|
||||
</aside>
|
||||
<div
|
||||
id="navbar"
|
||||
class="fixed top-0 z-50 hidden w-full justify-center bg-[#202020]/80 backdrop-blur md:flex"
|
||||
transition:name="navBar"
|
||||
>
|
||||
<div
|
||||
id="navbar-div"
|
||||
class="flex w-full flex-row items-center justify-center py-4 uppercase"
|
||||
>
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/">home</a
|
||||
>
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/what-i-do">What I Do</a
|
||||
>
|
||||
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/projects">projects</a
|
||||
>
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/skills">skills</a
|
||||
>
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/experience">experience</a
|
||||
>
|
||||
<a
|
||||
class="mx-2 rounded-md px-3 py-1 text-white transition-colors duration-300 hover:bg-gray-200 hover:text-black"
|
||||
href="/contact">contact</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bar-width: 30px;
|
||||
--bar-height: 4px;
|
||||
--hamburger-gap: 6px;
|
||||
--foreground: #141414;
|
||||
--background: white;
|
||||
--hamburger-margin: 20px;
|
||||
--animation-timing: 300ms ease-in-out;
|
||||
--hamburger-height: calc(
|
||||
var(--bar-height) * 3 + var(--hamburger-gap) * 2
|
||||
);
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
--x-width: calc(var(--hamburger-height) * 1.41421356237);
|
||||
|
||||
display: none;
|
||||
|
||||
translate: 0 20px;
|
||||
flex-direction: column;
|
||||
|
||||
gap: var(--hamburger-gap);
|
||||
top: var(--hamburger-margin);
|
||||
right: var(--hamburger-margin);
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
background: var(--foreground);
|
||||
|
||||
padding: 0.5rem;
|
||||
|
||||
rotate: 180deg;
|
||||
|
||||
transition: all var(--animation-timing);
|
||||
}
|
||||
|
||||
.hamburger-menu.active {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu input:focus-visible {
|
||||
border: 1px solid var(--background);
|
||||
box-shadow: 0 0 0 1px var(--foreground);
|
||||
}
|
||||
|
||||
.hamburger-menu input,
|
||||
.hamburger-menu span {
|
||||
content: "";
|
||||
width: var(--bar-width);
|
||||
height: var(--bar-height);
|
||||
background-color: white;
|
||||
border-radius: 9999px;
|
||||
transform-origin: left center;
|
||||
transition:
|
||||
opacity var(--animation-timing),
|
||||
width var(--animation-timing),
|
||||
rotate var(--animation-timing),
|
||||
translate var(--animation-timing),
|
||||
background-color var(--animation-timing);
|
||||
}
|
||||
|
||||
.hamburger-menu input {
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hamburger-menu .top-bun.active {
|
||||
rotate: 45deg;
|
||||
width: var(--x-width);
|
||||
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2);
|
||||
}
|
||||
|
||||
.hamburger-menu .bottom-bun.active {
|
||||
rotate: -45deg;
|
||||
width: var(--x-width);
|
||||
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2);
|
||||
}
|
||||
|
||||
.hamburger-menu input:checked {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: translate var(--animation-timing);
|
||||
translate: 100%;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-top: calc(
|
||||
var(--hamburger-height) + var(--hamburger-margin) + 1rem
|
||||
);
|
||||
background-color: var(--foreground);
|
||||
color: var(--background);
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer is:inline>
|
||||
const sidebar = document.querySelectorAll(".sidebar-url");
|
||||
const hamburger = document.querySelector(".hamburger-menu");
|
||||
const checkbox = document.querySelector("input");
|
||||
|
||||
const topBun = document.querySelector(".top-bun");
|
||||
const bottomBun = document.querySelector(".bottom-bun");
|
||||
|
||||
const openSideBar = () => {
|
||||
checkbox.checked = true;
|
||||
document.querySelector(".sidebar").style.translate = "0";
|
||||
hamburger.classList.add("active");
|
||||
topBun.classList.add("active");
|
||||
bottomBun.classList.add("active");
|
||||
};
|
||||
|
||||
const closeSideBar = () => {
|
||||
checkbox.checked = false;
|
||||
document.querySelector(".sidebar").style.translate = "100%";
|
||||
hamburger.classList.remove("active");
|
||||
topBun.classList.remove("active");
|
||||
bottomBun.classList.remove("active");
|
||||
};
|
||||
|
||||
// for each sidebar url, if clicked on, uncheck the checkbox
|
||||
sidebar.forEach((url) => {
|
||||
url.addEventListener("click", () => {
|
||||
closeSideBar();
|
||||
});
|
||||
});
|
||||
|
||||
if (window.innerWidth < 768) {
|
||||
hamburger.style.translate = "0 0";
|
||||
}
|
||||
|
||||
// window.addEventListener("scroll", () => {
|
||||
// if (window.scrollY > 50 || window.innerWidth < 768) {
|
||||
// hamburger.style.translate = "0 0";
|
||||
// } else {
|
||||
// hamburger.style.translate = "0 -200px";
|
||||
// closeSideBar();
|
||||
// }
|
||||
// });
|
||||
|
||||
// if clicked outside of the hamburger menu, close the sidebar
|
||||
window.addEventListener("click", (e) => {
|
||||
if (
|
||||
e.target !== hamburger &&
|
||||
e.target !== topBun &&
|
||||
e.target !== bottomBun &&
|
||||
e.target !== checkbox &&
|
||||
e.target !== document.querySelector(".sidebar") &&
|
||||
e.target !== document.querySelector(".sidebar nav")
|
||||
) {
|
||||
closeSideBar();
|
||||
}
|
||||
});
|
||||
|
||||
// if window is resized, check if it's less than 768px
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth < 768) {
|
||||
hamburger.style.translate = "0 0";
|
||||
} else {
|
||||
hamburger.style.translate = "0 -200px";
|
||||
closeSideBar();
|
||||
}
|
||||
});
|
||||
|
||||
// if checked, translate the sidebar
|
||||
checkbox.addEventListener("change", () => {
|
||||
if (checkbox.checked) {
|
||||
openSideBar();
|
||||
} else {
|
||||
closeSideBar();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue