111 lines
2.8 KiB
TypeScript
111 lines
2.8 KiB
TypeScript
"use client"
|
|
import { ReactNode } from "react"
|
|
import clsx from "clsx"
|
|
import { Home, MonitorOne, Movie, Setting, Terminal, Toolkit } from "@icon-park/react"
|
|
import { useRouter, usePathname } from "next/navigation"
|
|
|
|
// import { platform } from "@tauri-apps/plugin-os"
|
|
import useAppStore from "@/store/app"
|
|
|
|
interface SideButtonProps {
|
|
route: string
|
|
className?: string
|
|
children?: ReactNode
|
|
}
|
|
|
|
const SideButton = ({
|
|
route,
|
|
className,
|
|
children,
|
|
...rest
|
|
}: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
|
|
const router = useRouter()
|
|
const path = usePathname()
|
|
|
|
return (
|
|
<button
|
|
onClick={() => router.push(route || "/")}
|
|
className={clsx(
|
|
className,
|
|
"p-2.5 hover:bg-black/5 rounded-lg transition relative",
|
|
path.startsWith(route) && "bg-black/5"
|
|
)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
<div
|
|
className={clsx(
|
|
path.startsWith(route) && "opacity-100",
|
|
"transition-opacity duration-300 opacity-0 h-3.5 w-0.5 absolute left-0.5 bg-purple-500 rounded-full top-1/2 -translate-y-1/2"
|
|
)}
|
|
/>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const Avatar = () => {
|
|
const router = useRouter()
|
|
const path = usePathname()
|
|
|
|
return (
|
|
<div
|
|
onClick={() => router.push("/users")}
|
|
className={clsx(
|
|
"w-12 h-12 bg-gray-700 rounded-full shadow-2xl cursor-pointer transition active:scale-95 shadow-purple-800",
|
|
path.startsWith("/users") && "shadow-sm"
|
|
)}
|
|
>
|
|
<img src="favicon.ico" alt="avatar" draggable={false} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const SideBar = () => {
|
|
const { version, setVersion } = useAppStore()
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"absolute left-0 flex flex-col h-full select-none w-20 py-7"
|
|
// platform() === "windows" ? "w-20" : "w-[4.25rem]"
|
|
)}
|
|
data-tauri-drag-region
|
|
>
|
|
<section className="mx-auto">
|
|
<Avatar />
|
|
</section>
|
|
|
|
<section
|
|
className="flex flex-col items-center justify-center h-full gap-5"
|
|
data-tauri-drag-region
|
|
>
|
|
<SideButton route="/home">
|
|
<Home size={24} />
|
|
</SideButton>
|
|
<SideButton route="/tool">
|
|
<Toolkit size={24} />
|
|
</SideButton>
|
|
<SideButton route="/console">
|
|
<Terminal size={24} />
|
|
</SideButton>
|
|
<SideButton route="/gear">
|
|
<MonitorOne size={24} />
|
|
</SideButton>
|
|
<SideButton route="/movie">
|
|
<Movie size={24} />
|
|
</SideButton>
|
|
<SideButton route="/preference">
|
|
<Setting size={24} />
|
|
</SideButton>
|
|
</section>
|
|
|
|
<div className="mx-auto text-sm text-center text-zinc-500" data-tauri-drag-region>
|
|
<p>版本号</p>
|
|
<p onClick={() => setVersion("x.y.z")}>{version}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SideBar
|