update: setup layouts and basic ui

src/components/window/SideBar.tsx

@@ -0,0 +1,90 @@
+"use client"
+import { ReactNode } from "react";
+import clsx from "clsx";
+import {
+  Home,
+  MonitorOne,
+  Movie,
+  Setting,
+  Terminal,
+  Toolkit,
+} from "@icon-park/react";
+import { useRouter } from "next/navigation";
+
+interface SideButtonProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+const SideButton = ({ className, children, ...rest }: SideButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      className={clsx(
+        className,
+        "p-2.5 hover:bg-black/5 rounded-lg transition"
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};
+
+const Avatar = () => {
+  const router = useRouter();
+
+  return (
+    <div onClick={() => router.push('/test')} className="w-12 h-12 bg-gray-700 rounded-full cursor-pointer">
+      <img src="favicon.ico" alt="avatar" draggable={false} />
+    </div>
+  );
+};
+
+const SideBar = () => {
+  const router = useRouter();
+
+  return (
+    <div
+      className="absolute left-0 flex flex-col w-20 h-full select-none py-7"
+      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 onClick={() => router.push("/home")}>
+          <Home size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/tool")}>
+          <Toolkit size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/console")}>
+          <Terminal size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/gear")}>
+          <MonitorOne size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/movie")}>
+          <Movie size={24} />
+        </SideButton>
+        <SideButton onClick={() => router.push("/preference")}>
+          <Setting size={24} />
+        </SideButton>
+      </section>
+
+      <div
+        className="mx-auto text-sm text-center text-zinc-500"
+        data-tauri-drag-region
+      >
+        <p>版本号</p>
+        <p>0.0.1</p>
+      </div>
+    </div>
+  );
+};
+
+export default SideBar;