130 lines
3.0 KiB
TypeScript
130 lines
3.0 KiB
TypeScript
"use client"
|
|
import { Button, cn } from "@heroui/react"
|
|
import {
|
|
Home,
|
|
MonitorOne,
|
|
Movie,
|
|
Setting,
|
|
Terminal,
|
|
Toolkit,
|
|
} from "@icon-park/react"
|
|
import { usePathname, useRouter } from "next/navigation"
|
|
import type { ReactNode } from "react"
|
|
|
|
// 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
|
|
type="button"
|
|
onClick={() => router.push(route || "/")}
|
|
className={cn(
|
|
className,
|
|
"p-2.5 hover:bg-black/5 rounded-lg transition relative",
|
|
path.startsWith(route) && "bg-black/5",
|
|
)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
<div
|
|
className={cn(
|
|
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 (
|
|
<button
|
|
onClick={() => router.push("/users")}
|
|
className={cn(
|
|
"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",
|
|
)}
|
|
type="button"
|
|
>
|
|
<img src="favicon.ico" alt="avatar" draggable={false} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
const SideBar = () => {
|
|
const app = useAppStore()
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"absolute left-0 flex flex-col h-full select-none w-20 pt-7 pb-5",
|
|
// 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>
|
|
<Button
|
|
variant="light"
|
|
size="sm"
|
|
className="mt-0.5 text-zinc-600"
|
|
onPress={() => app.setVersion("x.y.z")}
|
|
>
|
|
{app.state.version}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SideBar
|