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

fixed navbar

Browse source
This commit is contained in:
liyunze 2025-08-11 21:44:33 +10:00
parent 576973d78e
commit d4bc8672d7
2 changed files with 22 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/components/ui/NavigationBar.tsx
View file

@ -98,33 +98,38 @@ export const HoverNavigation = ({
}); });
return ( return (
<div className="bg-secondary/50 fixed top-5 left-1/2 z-30 box-border flex w-4/5 -translate-x-1/2 items-center justify-center overflow-auto rounded-[40px] border-2 border-solid border-gray-700 px-5 py-3 backdrop-blur-md lg:w-2/3 xl:w-auto"> <div className="bg-secondary/50 fixed top-5 left-1/2 z-30 box-border flex w-11/12 -translate-x-1/2 items-center justify-center overflow-auto rounded-[40px] border-2 border-solid border-gray-700 px-5 py-3 backdrop-blur-md sm:w-4/5 lg:w-2/3 xl:w-auto">
<div className="flex flex-col"> <div className="flex flex-col">
<div className="flex flex-row"> <div className="flex flex-row">
<a href="/"> <div className="mr-2 flex items-center justify-center sm:mr-3">
<img <a href="/">
src="/images/profile/contact_photo_small.webp" <img
alt="Ryan" src="/images/profile/contact_photo_small.webp"
width={50} alt="Ryan"
className="mr-3 rounded-full" width={50}
/> className="rounded-full"
</a> />
</a>
</div>
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center">
<motion.div <motion.div
animate={{ animate={{
width: availableVisible ? "auto" : "0px", width: availableVisible ? "auto" : "0px",
opacity: availableVisible ? "100%" : "0%", opacity: availableVisible ? "100%" : "0%",
}} }}
initial={{
width: "0px",
}}
className="flex w-auto flex-row items-center justify-center pr-2 whitespace-nowrap opacity-100 lg:w-0 lg:opacity-0" className="flex w-auto flex-row items-center justify-center pr-2 whitespace-nowrap opacity-100 lg:w-0 lg:opacity-0"
> >
<a <a
tabIndex={1} tabIndex={1}
href="/contact" href="/contact"
className="overflow-hidden whitespace-nowrap transition-colors duration-150 hover:text-green-500" className="overflow-hidden text-sm whitespace-nowrap transition-colors duration-150 hover:text-green-500 sm:text-base"
> >
Available for work Available for work
</a> </a>
<div className="relative z-50 ml-5"> <div className="relative z-50 ml-3">
<div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div> <div className="absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
<div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div> <div className="animate-glow absolute top-1/2 left-1/2 aspect-square w-[6px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-green-500"></div>
</div> </div>
@ -176,10 +181,11 @@ export const HoverNavigation = ({
))} ))}
</motion.div> </motion.div>
<div className="hamburger-wrapper block lg:hidden"> <div className="hamburger-wrapper flex items-center justify-center lg:hidden">
<HamburgerCross <HamburgerCross
toggled={hamburgerOpen} toggled={hamburgerOpen}
toggle={setHamburgerOpen} toggle={setHamburgerOpen}
size={20}
></HamburgerCross> ></HamburgerCross>
</div> </div>
</div> </div>
@ -191,7 +197,10 @@ export const HoverNavigation = ({
transition={{ transition={{
ease: "easeInOut", ease: "easeInOut",
}} }}
className="overflow-hidden" initial={{
height: "0px",
}}
className="h-0 overflow-hidden"
> >
{items.map((item, idx) => ( {items.map((item, idx) => (
<a <a

4
src/navStore.js
View file

@ -1,4 +0,0 @@
import { atom } from "nanostores";
export const isNavVisible = atom(true);
export const isAvVisible = atom(false);