feat: menu

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;
+}

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;