From f3c983be6fa8a9443e249ec08f31f116623c553e Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 2 Apr 2025 16:45:58 +0300
Subject: [PATCH] feat: menu

---
 src/components/menu.module.scss |  9 ++++++
 src/components/menu.tsx         | 50 +++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/menu.module.scss
 create mode 100644 src/components/menu.tsx

diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss
new file mode 100644
index 0000000..b4726cc
--- /dev/null
+++ b/src/components/menu.module.scss
@@ -0,0 +1,9 @@
+@reference "../index.scss";
+
+.menu_container {
+  @apply flex min-h-8 min-w-screen flex-col items-center gap-4 border-l border-l-gray-500 px-5 pt-5 md:min-h-screen md:min-w-[300px];
+}
+
+.menu_item {
+  @apply w-full cursor-pointer rounded-md bg-gray-100 px-6 py-2 text-center hover:bg-gray-200;
+}
diff --git a/src/components/menu.tsx b/src/components/menu.tsx
new file mode 100644
index 0000000..3bc9350
--- /dev/null
+++ b/src/components/menu.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/utils/class-merge";
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import classes from "./menu.module.scss";
+
+interface MenuItemProps {
+  title: string;
+  link: string;
+}
+
+const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
+  const location = useLocation();
+  const active = location.path === link;
+  return (
+    <div class={cn(classes.menu_item, { "bg-gray-200": active })} onClick={() => location.route(link)}>
+      {title}
+    </div>
+  );
+};
+
+interface MenuItems {
+  title: string;
+  link: string;
+}
+
+const Menu: FunctionComponent = () => {
+  const menu_items: MenuItems[] = [
+    {
+      title: "Профиль",
+      link: "/profile",
+    },
+    {
+      title: "Задачи",
+      link: "/tasks",
+    },
+    {
+      title: "Календарь",
+      link: "/calendar",
+    },
+  ];
+  return (
+    <div class={classes.menu_container}>
+      {menu_items.map(({ title, link }) => (
+        <MenuItem title={title} link={link} />
+      ))}
+    </div>
+  );
+};
+
+export default Menu;