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

fixed cross in navbar

Browse source
This commit is contained in:
liyunze 2023-10-08 09:53:05 +08:00
parent ec170f90e5
commit eee8eac96d
1 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/NavBar.astro
View file

@ -1,6 +1,6 @@
<div class="w-full"> <div class="w-full">
<label <label
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg" class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 rounded-lg"
aria-label="Menu" aria-label="Menu"
> >
<span class="top-bun"></span> <span class="top-bun"></span>
@ -89,20 +89,25 @@
.hamburger-menu { .hamburger-menu {
--x-width: calc(var(--hamburger-height) * 1.41421356237); --x-width: calc(var(--hamburger-height) * 1.41421356237);
translate: 0 -200px; translate: 0 -20px;
flex-direction: column; flex-direction: column;
gap: var(--hamburger-gap); gap: var(--hamburger-gap);
width: max-content;
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;
rotate: 180deg; rotate: 180deg;
transition: translate var(--animation-timing); transition: all var(--animation-timing);
}
.hamburger-menu.active {
padding-right: 0;
} }
.hamburger-menu input:focus-visible { .hamburger-menu input:focus-visible {
@ -137,13 +142,13 @@
.hamburger-menu .top-bun.active { .hamburger-menu .top-bun.active {
rotate: 45deg; rotate: 45deg;
width: var(--x-width); width: var(--x-width);
translate: 0 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: 0 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 {
@ -179,6 +184,7 @@
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");
topBun.classList.add("active"); topBun.classList.add("active");
bottomBun.classList.add("active"); bottomBun.classList.add("active");
}; };
@ -186,6 +192,7 @@
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");
topBun.classList.remove("active"); topBun.classList.remove("active");
bottomBun.classList.remove("active"); bottomBun.classList.remove("active");
}; };