first commit

src/ui/components/menu/MobileMenu.tsx

@@ -0,0 +1,42 @@
+"use client";
+import React, {useState} from "react";
+
+export default function MobileMenu() {
+  const [open, setOpen] = useState(false);
+  console.log(open);
+  return (
+    <>
+      <button
+        type="button"
+        className="lg:hidden block text-blue-primary"
+        onClick={()=>setOpen(!open)}
+      >
+        <svg
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="0"
+          viewBox="0 0 15 15"
+          height="35"
+          width="35"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </button>
+      {open && (
+        <div className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-full" onClick={(e)=>{
+          e.stopPropagation();
+          e.preventDefault();
+          setOpen(!open)
+        }}>
+          <div className={`absolute top-0 right-0 h-full ${open ? 'w-[80%]' : 'w-0'} bg-white transition-all duration-300`}></div>
+        </div>
+      )}
+    </>
+  );
+}