mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
updated navbar
This commit is contained in:
liyunze
parent
d2f12d9e0b
commit
2184a7ca9f
1 changed files with 230 additions and 230 deletions
|
|
@ -1,264 +1,264 @@
|
|||
<div class="w-full">
|
||||
<label
|
||||
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
|
||||
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 flex z-20">
|
||||
<nav class="flex flex-col capitalize" role="navigation">
|
||||
<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"
|
||||
href="../">Home</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"
|
||||
href="../what-i-do">What I Do</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"
|
||||
href="../projects">Projects</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"
|
||||
href="../skills">Skills</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"
|
||||
href="../education">Education</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"
|
||||
href="../contact">Contact</a
|
||||
>
|
||||
</nav>
|
||||
</aside>
|
||||
<div
|
||||
id="navbar"
|
||||
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%)]"
|
||||
transition:name="navBar"
|
||||
>
|
||||
<div
|
||||
id="navbar-div"
|
||||
class="py-4 uppercase w-full flex flex-row justify-center items-center"
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<label
|
||||
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
|
||||
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 flex z-20">
|
||||
<nav class="flex flex-col capitalize" role="navigation">
|
||||
<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"
|
||||
href="../">Home</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"
|
||||
href="../what-i-do">What I Do</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"
|
||||
href="../projects">Projects</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"
|
||||
href="../skills">Skills</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"
|
||||
href="../education">Education</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"
|
||||
href="../contact">Contact</a
|
||||
>
|
||||
</nav>
|
||||
</aside>
|
||||
<div
|
||||
id="navbar"
|
||||
class="fixed z-50 top-0 w-full hidden md:flex justify-center
|
||||
bg-[#202020]/80 backdrop-blur"
|
||||
transition:name="navBar"
|
||||
>
|
||||
<div
|
||||
id="navbar-div"
|
||||
class="py-4 uppercase w-full flex flex-row justify-center items-center"
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
<a
|
||||
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
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--bar-width: 30px;
|
||||
--bar-height: 4px;
|
||||
--hamburger-gap: 6px;
|
||||
--foreground: #141414;
|
||||
--background: white;
|
||||
--hamburger-margin: 20px;
|
||||
--animation-timing: 200ms ease-in-out;
|
||||
--hamburger-height: calc(
|
||||
var(--bar-height) * 3 + var(--hamburger-gap) * 2
|
||||
);
|
||||
}
|
||||
:root {
|
||||
--bar-width: 30px;
|
||||
--bar-height: 4px;
|
||||
--hamburger-gap: 6px;
|
||||
--foreground: #141414;
|
||||
--background: white;
|
||||
--hamburger-margin: 20px;
|
||||
--animation-timing: 200ms ease-in-out;
|
||||
--hamburger-height: calc(
|
||||
var(--bar-height) * 3 + var(--hamburger-gap) * 2
|
||||
);
|
||||
}
|
||||
|
||||
.hamburger-menu {
|
||||
--x-width: calc(var(--hamburger-height) * 1.41421356237);
|
||||
.hamburger-menu {
|
||||
--x-width: calc(var(--hamburger-height) * 1.41421356237);
|
||||
|
||||
display: none;
|
||||
display: none;
|
||||
|
||||
translate: 0 -20px;
|
||||
flex-direction: column;
|
||||
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);
|
||||
gap: var(--hamburger-gap);
|
||||
top: var(--hamburger-margin);
|
||||
right: var(--hamburger-margin);
|
||||
z-index: 30;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
padding-right: 0;
|
||||
}
|
||||
.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: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,
|
||||
.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 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 .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 .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;
|
||||
}
|
||||
.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);
|
||||
max-width: 10rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.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);
|
||||
max-width: 10rem;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.hamburger-menu {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@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 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 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 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");
|
||||
};
|
||||
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();
|
||||
});
|
||||
});
|
||||
// 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";
|
||||
}
|
||||
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();
|
||||
// }
|
||||
// });
|
||||
// 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 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 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();
|
||||
}
|
||||
});
|
||||
// if checked, translate the sidebar
|
||||
checkbox.addEventListener("change", () => {
|
||||
if (checkbox.checked) {
|
||||
openSideBar();
|
||||
} else {
|
||||
closeSideBar();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue