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 { HoverNavigation } from "@/components/ui/HoverNavigation";
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
import pfp from "@/components/images/pfp_new.webp";
|
||||||
|
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
{
|
{
|
||||||
|
|
@ -26,13 +28,8 @@ const navLinks = [
|
||||||
---
|
---
|
||||||
|
|
||||||
<div
|
<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
|
<Image src={pfp} alt="Ryan" width={50} class="mr-3 rounded-full" />
|
||||||
src="/images/pfp_new.webp"
|
|
||||||
alt="Ryan"
|
|
||||||
width={50}
|
|
||||||
class="rounded-full"
|
|
||||||
/>
|
|
||||||
<HoverNavigation items={navLinks} client:load />
|
<HoverNavigation items={navLinks} client:load />
|
||||||
</div>
|
</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