imnyang/imnya.ng
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

🌠 Vite is Gone!

Browse source
This commit is contained in:
암냥 2025-02-22 21:27:50 +09:00
commit 3f1b62edf4
43 changed files with 1360 additions and 4482 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/BottomBar.tsx
View file

@ -1,6 +1,5 @@
import { useState, useEffect } from "react";
import { Send, AlignJustify, BadgeCheck, House, CircleHelp, ChartGantt, PhoneCall } from "lucide-react";
import { Link, useLocation, useNavigate } from "react-router";
import {
DropdownMenu,
@ -13,10 +12,8 @@ import {
export default function BottomBar() {
const location = useLocation();
const navigate = useNavigate();
const [email, setEmail] = useState<string>('me@imnya.ng');
const [hash, setHash] = useState<string>(window.location.hash);
useEffect(() => {
const emaillist = ['me', 'mail', 'not', 'cat', 'neko', 'meow', 'heart']
@ -33,6 +30,16 @@ export default function BottomBar() {
}
}
randomEmail();
const handleHashChange = () => {
setHash(window.location.hash);
};
window.addEventListener('hashchange', handleHashChange);
return () => {
window.removeEventListener('hashchange', handleHashChange);
};
}, []);
@ -40,13 +47,13 @@ export default function BottomBar() {
<div className="w-full flex justify-center fixed bottom-0 z-50">
<header className="bg-background/75 text-foreground w-full md:w-[50%] h-12 border rounded-full select-none m-4 mt-2">
<div className="flex items-center justify-between w-full h-full py-4 px-8">
<Link to={`mailto:${email}`} className="flex flex-row gap-4"><Send width={16} /> {email}</Link>
<a href={`mailto:${email}`} className="flex flex-row gap-4"><Send width={16} /> {email}</a>
<div>
<button onClick={() => navigate("/#top")} accessKey="1" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => navigate("/#about")} accessKey="2" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => navigate("/#project")} accessKey="3" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => navigate("/#timeline")} accessKey="4" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => navigate("/#contact")} accessKey="5" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => window.location.hash = "#top"} accessKey="1" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => window.location.hash = "#about"} accessKey="2" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => window.location.hash = "#project"} accessKey="3" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => window.location.hash = "#timeline"} accessKey="4" className="w-[0px] h-[0px] text-[0px] text-background"></button>
<button onClick={() => window.location.hash = "#contact"} accessKey="5" className="w-[0px] h-[0px] text-[0px] text-background"></button>
</div>
<div className="flex flex-row items-center justify-center">
<DropdownMenu>
@ -55,9 +62,9 @@ export default function BottomBar() {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem asChild>
<Link to="/#top" className="flex flex-row items-center justify-between">
<a href="#top" className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-2 items-center justify-between h-4">
{location.hash === "#top" ? (
{hash === "#top" ? (
<BadgeCheck width={16} height={16} />
) : (
<House width={16} height={16} />
@ -66,12 +73,12 @@ export default function BottomBar() {
</div>
<p className="text-muted-foreground">Alt + 1</p>
</Link>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#about" className="flex flex-row items-center justify-between">
<a href="#about" className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-2 items-center justify-between h-4">
{location.hash === "#about" ? (
{hash === "#about" ? (
<BadgeCheck width={16} height={16} />
) : (
<CircleHelp width={16} height={16} />
@ -80,12 +87,12 @@ export default function BottomBar() {
</div>
<p className="text-muted-foreground">Alt + 2</p>
</Link>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#project" className="flex flex-row items-center justify-between">
<a href="#project" className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-2 items-center justify-between h-4">
{location.hash === "#project" ? (
{hash === "#project" ? (
<BadgeCheck width={16} height={16} />
) : (
<ChartGantt width={16} height={16} />
@ -94,12 +101,12 @@ export default function BottomBar() {
</div>
<p className="text-muted-foreground">Alt + 3</p>
</Link>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#timeline" className="flex flex-row items-center justify-between">
<a href="#timeline" className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-2 items-center justify-between h-4">
{location.hash === "#timeline" ? (
{hash === "#timeline" ? (
<BadgeCheck width={16} height={16} />
) : (
<ChartGantt width={16} height={16} />
@ -108,12 +115,12 @@ export default function BottomBar() {
</div>
<p className="text-muted-foreground">Alt + 4</p>
</Link>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#contact" className="flex flex-row items-center justify-between">
<a href="#contact" className="flex flex-row items-center justify-between">
<div className="flex flex-row gap-2 items-center justify-between h-4">
{location.hash === "#contact" ? (
{hash === "#contact" ? (
<BadgeCheck width={16} height={16} />
) : (
<PhoneCall width={16} height={16} />
@ -122,7 +129,7 @@ export default function BottomBar() {
</div>
<p className="text-muted-foreground">Alt + 5</p>
</Link>
</a>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>© 2021-2025 imnyang</DropdownMenuLabel>