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

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

@ -98,33 +98,38 @@ export const HoverNavigation = ({
});
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-row">
<div className="mr-2 flex items-center justify-center sm:mr-3">
<a href="/">
<img
src="/images/profile/contact_photo_small.webp"
alt="Ryan"
width={50}
className="mr-3 rounded-full"
className="rounded-full"
/>
</a>
</div>
<div className="flex flex-col items-center justify-center">
<motion.div
animate={{
width: availableVisible ? "auto" : "0px",
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"
>
<a
tabIndex={1}
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
</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="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>
@ -176,10 +181,11 @@ export const HoverNavigation = ({
))}
</motion.div>
<div className="hamburger-wrapper block lg:hidden">
<div className="hamburger-wrapper flex items-center justify-center lg:hidden">
<HamburgerCross
toggled={hamburgerOpen}
toggle={setHamburgerOpen}
size={20}
></HamburgerCross>
</div>
</div>
@ -191,7 +197,10 @@ export const HoverNavigation = ({
transition={{
ease: "easeInOut",
}}
className="overflow-hidden"
initial={{
height: "0px",
}}
className="h-0 overflow-hidden"
>
{items.map((item, idx) => (
<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);