rythondev/RythonDev
1
0
Fork 0
mirror of https://github.com/liyunze-coding/RythonDev.git synced 2026-09-22 15:53:57 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updated navbar

Browse source
This commit is contained in:
liyunze 2024-03-14 15:42:35 +08:00
parent d2f12d9e0b
commit 2184a7ca9f
1 changed files with 230 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

460
src/components/sections/NavBar.astro
View file

@ -1,264 +1,264 @@
<div class="w-full"> <div class="w-full">
<label <label
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg" class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
aria-label="Menu" aria-label="Menu"
transition:persist transition:persist
transition:name="hamburger" transition:name="hamburger"
> >
<span class="top-bun"></span> <span class="top-bun"></span>
<input type="checkbox" aria-label="Toggle menu" /> <input type="checkbox" aria-label="Toggle menu" />
<span class="bottom-bun"></span> <span class="bottom-bun"></span>
</label> </label>
<aside class="sidebar flex z-20"> <aside class="sidebar flex z-20">
<nav class="flex flex-col capitalize" role="navigation"> <nav class="flex flex-col capitalize" role="navigation">
<a <a
class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../">Home</a href="../">Home</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../what-i-do">What I Do</a href="../what-i-do">What I Do</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../projects">Projects</a href="../projects">Projects</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../skills">Skills</a href="../skills">Skills</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../education">Education</a href="../education">Education</a
> >
<a <a
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300" class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-300"
href="../contact">Contact</a href="../contact">Contact</a
> >
</nav> </nav>
</aside> </aside>
<div <div
id="navbar" id="navbar"
class="fixed z-50 top-0 w-full hidden md:flex justify-center class="fixed z-50 top-0 w-full hidden md:flex justify-center
bg-[linear-gradient(180deg,_rgba(32,32,32,1)_70%,_rgba(32,32,32,0)_100%)]" bg-[#202020]/80 backdrop-blur"
transition:name="navBar" transition:name="navBar"
> >
<div <div
id="navbar-div" id="navbar-div"
class="py-4 uppercase w-full flex flex-row justify-center items-center" class="py-4 uppercase w-full flex flex-row justify-center items-center"
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../">home</a href="../">home</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../what-i-do">What I Do</a href="../what-i-do">What I Do</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../projects">projects</a href="../projects">projects</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../skills">skills</a href="../skills">skills</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../education">education</a href="../education">education</a
> >
<a <a
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md" class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-300 rounded-md"
href="../contact">contact</a href="../contact">contact</a
> >
</div> </div>
</div> </div>
</div> </div>
<style> <style>
:root { :root {
--bar-width: 30px; --bar-width: 30px;
--bar-height: 4px; --bar-height: 4px;
--hamburger-gap: 6px; --hamburger-gap: 6px;
--foreground: #141414; --foreground: #141414;
--background: white; --background: white;
--hamburger-margin: 20px; --hamburger-margin: 20px;
--animation-timing: 200ms ease-in-out; --animation-timing: 200ms ease-in-out;
--hamburger-height: calc( --hamburger-height: calc(
var(--bar-height) * 3 + var(--hamburger-gap) * 2 var(--bar-height) * 3 + var(--hamburger-gap) * 2
); );
} }
.hamburger-menu { .hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237); --x-width: calc(var(--hamburger-height) * 1.41421356237);
display: none; display: none;
translate: 0 -20px; translate: 0 -20px;
flex-direction: column; flex-direction: column;
gap: var(--hamburger-gap); gap: var(--hamburger-gap);
top: var(--hamburger-margin); top: var(--hamburger-margin);
right: var(--hamburger-margin); right: var(--hamburger-margin);
z-index: 30; z-index: 30;
cursor: pointer; cursor: pointer;
background: var(--foreground); background: var(--foreground);
padding: 0.5rem; padding: 0.5rem;
rotate: 180deg; rotate: 180deg;
transition: all var(--animation-timing); transition: all var(--animation-timing);
} }
.hamburger-menu.active { .hamburger-menu.active {
padding-right: 0; padding-right: 0;
} }
.hamburger-menu input:focus-visible { .hamburger-menu input:focus-visible {
border: 1px solid var(--background); border: 1px solid var(--background);
box-shadow: 0 0 0 1px var(--foreground); box-shadow: 0 0 0 1px var(--foreground);
} }
.hamburger-menu input, .hamburger-menu input,
.hamburger-menu span { .hamburger-menu span {
content: ""; content: "";
width: var(--bar-width); width: var(--bar-width);
height: var(--bar-height); height: var(--bar-height);
background-color: white; background-color: white;
border-radius: 9999px; border-radius: 9999px;
transform-origin: left center; transform-origin: left center;
transition: transition:
opacity var(--animation-timing), opacity var(--animation-timing),
width var(--animation-timing), width var(--animation-timing),
rotate var(--animation-timing), rotate var(--animation-timing),
translate var(--animation-timing), translate var(--animation-timing),
background-color var(--animation-timing); background-color var(--animation-timing);
} }
.hamburger-menu input { .hamburger-menu input {
appearance: none; appearance: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
outline: none; outline: none;
pointer-events: none; pointer-events: none;
} }
.hamburger-menu .top-bun.active { .hamburger-menu .top-bun.active {
rotate: 45deg; rotate: 45deg;
width: var(--x-width); width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2); translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / -2);
} }
.hamburger-menu .bottom-bun.active { .hamburger-menu .bottom-bun.active {
rotate: -45deg; rotate: -45deg;
width: var(--x-width); width: var(--x-width);
translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2); translate: calc(-50% + var(--x-width) / 2) calc(var(--bar-height) / 2);
} }
.hamburger-menu input:checked { .hamburger-menu input:checked {
opacity: 0; opacity: 0;
width: 0; width: 0;
} }
.sidebar { .sidebar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
transition: translate var(--animation-timing); transition: translate var(--animation-timing);
translate: 100%; translate: 100%;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
padding-top: calc( padding-top: calc(
var(--hamburger-height) + var(--hamburger-margin) + 1rem var(--hamburger-height) + var(--hamburger-margin) + 1rem
); );
background-color: var(--foreground); background-color: var(--foreground);
color: var(--background); color: var(--background);
max-width: 10rem; max-width: 10rem;
min-height: 100vh; min-height: 100vh;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.hamburger-menu { .hamburger-menu {
display: flex; display: flex;
} }
} }
</style> </style>
<script defer is:inline> <script defer is:inline>
const sidebar = document.querySelectorAll(".sidebar-url"); const sidebar = document.querySelectorAll(".sidebar-url");
const hamburger = document.querySelector(".hamburger-menu"); const hamburger = document.querySelector(".hamburger-menu");
const checkbox = document.querySelector("input"); const checkbox = document.querySelector("input");
const topBun = document.querySelector(".top-bun"); const topBun = document.querySelector(".top-bun");
const bottomBun = document.querySelector(".bottom-bun"); const bottomBun = document.querySelector(".bottom-bun");
const openSideBar = () => { const openSideBar = () => {
checkbox.checked = true; checkbox.checked = true;
document.querySelector(".sidebar").style.translate = "0"; document.querySelector(".sidebar").style.translate = "0";
hamburger.classList.add("active"); hamburger.classList.add("active");
topBun.classList.add("active"); topBun.classList.add("active");
bottomBun.classList.add("active"); bottomBun.classList.add("active");
}; };
const closeSideBar = () => { const closeSideBar = () => {
checkbox.checked = false; checkbox.checked = false;
document.querySelector(".sidebar").style.translate = "100%"; document.querySelector(".sidebar").style.translate = "100%";
hamburger.classList.remove("active"); hamburger.classList.remove("active");
topBun.classList.remove("active"); topBun.classList.remove("active");
bottomBun.classList.remove("active"); bottomBun.classList.remove("active");
}; };
// for each sidebar url, if clicked on, uncheck the checkbox // for each sidebar url, if clicked on, uncheck the checkbox
sidebar.forEach((url) => { sidebar.forEach((url) => {
url.addEventListener("click", () => { url.addEventListener("click", () => {
closeSideBar(); closeSideBar();
}); });
}); });
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
hamburger.style.translate = "0 0"; hamburger.style.translate = "0 0";
} }
// window.addEventListener("scroll", () => { // window.addEventListener("scroll", () => {
// if (window.scrollY > 50 || window.innerWidth < 768) { // if (window.scrollY > 50 || window.innerWidth < 768) {
// hamburger.style.translate = "0 0"; // hamburger.style.translate = "0 0";
// } else { // } else {
// hamburger.style.translate = "0 -200px"; // hamburger.style.translate = "0 -200px";
// closeSideBar(); // closeSideBar();
// } // }
// }); // });
// if clicked outside of the hamburger menu, close the sidebar // if clicked outside of the hamburger menu, close the sidebar
window.addEventListener("click", (e) => { window.addEventListener("click", (e) => {
if ( if (
e.target !== hamburger && e.target !== hamburger &&
e.target !== topBun && e.target !== topBun &&
e.target !== bottomBun && e.target !== bottomBun &&
e.target !== checkbox && e.target !== checkbox &&
e.target !== document.querySelector(".sidebar") && e.target !== document.querySelector(".sidebar") &&
e.target !== document.querySelector(".sidebar nav") e.target !== document.querySelector(".sidebar nav")
) { ) {
closeSideBar(); closeSideBar();
} }
}); });
// if window is resized, check if it's less than 768px // if window is resized, check if it's less than 768px
window.addEventListener("resize", () => { window.addEventListener("resize", () => {
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
hamburger.style.translate = "0 0"; hamburger.style.translate = "0 0";
} else { } else {
hamburger.style.translate = "0 -200px"; hamburger.style.translate = "0 -200px";
closeSideBar(); closeSideBar();
} }
}); });
// if checked, translate the sidebar // if checked, translate the sidebar
checkbox.addEventListener("change", () => { checkbox.addEventListener("change", () => {
if (checkbox.checked) { if (checkbox.checked) {
openSideBar(); openSideBar();
} else { } else {
closeSideBar(); closeSideBar();
} }
}); });
</script> </script>