From 1b1c45935b77e7b4217fb4468d8683521e0791e9 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Tue, 15 Apr 2025 16:42:35 +0300
Subject: [PATCH] feat: tasks buttons

---
 src/components/menu.module.scss |  2 +-
 src/pages/profile_tasks.tsx     | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/menu.module.scss b/src/components/menu.module.scss
index bcf5acf..91b4d9c 100644
--- a/src/components/menu.module.scss
+++ b/src/components/menu.module.scss
@@ -1,7 +1,7 @@
 @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];
+  @apply flex min-h-auto w-screen flex-col items-center gap-4 px-2 py-3 md:min-h-screen md:w-[20rem];
 }
 
 .menu_container {
diff --git a/src/pages/profile_tasks.tsx b/src/pages/profile_tasks.tsx
index 7f2bbdd..f0ae33f 100644
--- a/src/pages/profile_tasks.tsx
+++ b/src/pages/profile_tasks.tsx
@@ -1,6 +1,8 @@
 import Task from "@/components/task";
 import { withTitle } from "@/constructors/Component";
 import { UrlsTitle } from "@/enums/urls";
+import { PlusIcon } from "@heroicons/react/20/solid";
+import { FunnelIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { FunctionComponent } from "preact";
 import { useMemo } from "preact/hooks";
 import classes from "./profile_tasks.module.scss";
@@ -21,6 +23,19 @@ const ProfileTasks: FunctionComponent = () => {
           <Task name={task} key={index} checked={index % 2 === 0} />
         ))}
       </div>
+      <div class="group fixed right-[22rem] bottom-4 hidden flex-row items-center justify-start space-x-3 overflow-x-hidden md:flex">
+        <div class="aspect-square h-20 cursor-pointer items-center justify-center rounded-full bg-[rgb(251,194,199,0.53)] text-9xl text-white transition-all duration-300 ease-out group-hover:ml-[12rem] hover:bg-[rgb(251,194,199,0.7)]">
+          <PlusIcon />
+        </div>
+        <div class="absolute left-0 my-auto flex flex-row space-x-3 opacity-0 transition-opacity duration-100 group-hover:opacity-100">
+          <div class="flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 hover:bg-[rgba(206,232,251,0.9)]">
+            <MagnifyingGlassIcon class="size-12" />
+          </div>
+          <div class="flex aspect-square h-20 cursor-pointer flex-col items-center justify-center rounded-full bg-[rgba(206,232,251,0.7)] text-xl text-gray-600 hover:bg-[rgba(206,232,251,0.9)]">
+            <FunnelIcon class="size-12" />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };