feat: menu styles

src/components/menu.module.scss

@@ -1,9 +1,13 @@
 @reference "../index.scss";
 
+#container {
+  @apply flex min-h-auto w-screen flex-col items-center gap-4 px-2 py-3 md:min-h-screen md:w-[30rem];
+}
+
 .menu_container {
-  @apply fixed right-0 bottom-0 left-0 flex min-h-auto flex-row items-center gap-1 border-t border-t-gray-500 bg-white px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:min-h-screen md:w-auto md:flex-col md:gap-4 md:border-t-0 md:border-l md:border-l-gray-500 md:px-5 md:py-5;
+  @apply fixed right-0 bottom-0 left-0 flex h-[4rem] w-full flex-1 flex-row items-center gap-1 rounded-[44px] bg-[rgba(167,213,246,0.3)] px-1 py-5 md:sticky md:top-0 md:right-0 md:bottom-auto md:left-auto md:h-full md:flex-col md:gap-4 md:border-t-0 md:px-5 md:py-5;
 }
 
 .menu_item {
-  @apply w-full cursor-pointer rounded-md px-3 py-2 text-center hover:bg-gray-200 md:px-6;
+  @apply flex w-full cursor-pointer flex-row items-center gap-3 rounded-full px-3 py-2 text-center hover:bg-gray-200 md:px-6;
 }

src/components/menu.tsx

@@ -1,4 +1,6 @@
-import { FunctionComponent } from "preact";
+import { cn } from "@/utils/class-merge";
+import { CalendarDaysIcon, ListBulletIcon, UserIcon } from "@heroicons/react/24/solid";
+import { FunctionComponent, h } from "preact";
 import { useLocation } from "preact-iso";
 import { tv } from "tailwind-variants";
 import classes from "./menu.module.scss";
@@ -6,9 +8,10 @@ import classes from "./menu.module.scss";
 interface MenuItemProps {
   title: string;
   link: string;
+  icon: h.JSX.Element;
 }
 
-const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemProps) => {
+const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link, icon }: MenuItemProps) => {
   const { route, path } = useLocation();
   const active = path === link;
   const menuItemClasses = tv({
@@ -16,7 +19,7 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemPro
     variants: {
       activity: {
         active: "bg-gray-200",
-        inactive: "bg-gray-100",
+        inactive: "bg-white",
       },
     },
     defaultVariants: {
@@ -25,36 +28,70 @@ const MenuItem: FunctionComponent<MenuItemProps> = ({ title, link }: MenuItemPro
   });
   return (
     <div class={menuItemClasses({ activity: active ? "active" : "inactive" })} onClick={() => route(link, true)}>
+      {icon}
       {title}
     </div>
   );
 };
 
+const Avatar: FunctionComponent = () => {
+  const { route, path } = useLocation();
+  //TODO: Move styles to scss module
+  return (
+    <button
+      onClick={() => route("/profile/settings")}
+      class={cn("hidden h-32 w-full cursor-pointer overflow-hidden transition-[height] md:block", {
+        "h-0": path === "/profile/settings",
+      })}
+    >
+      <div
+        class={cn(
+          "h-full flex-row items-center justify-around rounded-[44px] bg-[linear-gradient(180.00deg,rgba(249,134,143,0.5)_3.053%,rgb(228,242,252)_96.183%)] px-5 py-5 md:flex"
+        )}
+      >
+        <div class="my-5 aspect-square h-full rounded-full bg-white"></div>
+        <div class="flex flex-col items-center justify-center">
+          <p class="text-3xl font-semibold">Никнейм</p>
+          <p class="text-xl font-light">Статус</p>
+        </div>
+      </div>
+    </button>
+  );
+};
+
 interface MenuItems {
   title: string;
   link: string;
+  icon: h.JSX.Element;
 }
 
 const Menu: FunctionComponent = () => {
+  //TODO: Move links to enum
   const menu_items: MenuItems[] = [
-    {
-      title: "Профиль",
-      link: "/profile/settings",
-    },
     {
       title: "Задачи",
       link: "/profile/tasks",
+      icon: <ListBulletIcon class="size-10" />,
     },
     {
       title: "Календарь",
       link: "/profile/calendar",
+      icon: <CalendarDaysIcon class="size-10" />,
+    },
+    {
+      title: "Профиль",
+      link: "/profile/settings",
+      icon: <UserIcon class="size-10" />,
     },
   ];
   return (
-    <div class={classes.menu_container}>
-      {menu_items.map(({ title, link }) => (
-        <MenuItem title={title} link={link} />
-      ))}
+    <div id={classes.container}>
+      <Avatar />
+      <div class={classes.menu_container}>
+        {menu_items.map(({ title, link, icon }) => (
+          <MenuItem title={title} link={link} icon={icon} />
+        ))}
+      </div>
     </div>
   );
 };