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

더 나은 TimeTable로 찾아왔습니다.

Browse source 
키보드 유저에 대한 배려가 있었습니다.
This commit is contained in:
암냥 2025-02-13 20:14:02 +09:00
commit 857105f563
10 changed files with 471 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

97
src/components/BottomBar.tsx
View file

@ -1,6 +1,6 @@
import { useState, useEffect } from "react";
import { Send, AlignJustify, BadgeCheck, House, CircleHelp, ChartGantt, PhoneCall } from "lucide-react";
import { Link, useLocation } from "react-router";
import { Link, useLocation, useNavigate } from "react-router";
import {
DropdownMenu,
@ -14,6 +14,7 @@ import {
export default function BottomBar() {
const location = useLocation();
const navigate = useNavigate();
const [email, setEmail] = useState<string>('me@imnya.ng');
@ -34,11 +35,19 @@ export default function BottomBar() {
randomEmail();
}, []);
return (
<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>
<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>
</div>
<div className="flex flex-row items-center justify-center">
<DropdownMenu>
<DropdownMenuTrigger asChild>
@ -46,43 +55,73 @@ export default function BottomBar() {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem asChild>
<Link to="/#top" className="flex flex-row gap-2 items-center">
{location.hash === "#top" ? (
<BadgeCheck />
) : (
<House />
)}
Home
<Link to="/#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" ? (
<BadgeCheck width={16} height={16} />
) : (
<House width={16} height={16} />
)}
Home
</div>
<p className="text-muted-foreground">Alt + 1</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#about" className="flex flex-row gap-2 items-center">
{location.hash === "#about" ? (
<BadgeCheck />
) : (
<CircleHelp />
)}
About
<Link to="/#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" ? (
<BadgeCheck width={16} height={16} />
) : (
<CircleHelp width={16} height={16} />
)}
About
</div>
<p className="text-muted-foreground">Alt + 2</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#timeline" className="flex flex-row gap-2 items-center">
{location.hash === "#timeline" ? (
<BadgeCheck />
) : (
<ChartGantt />
)}
Timeline
<Link to="/#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" ? (
<BadgeCheck width={16} height={16} />
) : (
<ChartGantt width={16} height={16} />
)}
Project
</div>
<p className="text-muted-foreground">Alt + 3</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#contact" className="flex flex-row gap-2 items-center">
{location.hash === "#contact" ? (
<BadgeCheck />
) : (
<PhoneCall />
)}
Contact
<Link to="/#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" ? (
<BadgeCheck width={16} height={16} />
) : (
<ChartGantt width={16} height={16} />
)}
Timeline
</div>
<p className="text-muted-foreground">Alt + 4</p>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link to="/#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" ? (
<BadgeCheck width={16} height={16} />
) : (
<PhoneCall width={16} height={16} />
)}
Contact
</div>
<p className="text-muted-foreground">Alt + 5</p>
</Link>
</DropdownMenuItem>
<DropdownMenuSeparator />