feat: complete day 20 react task

2025-07-23 23:25:19 +01:00
parent 743187b216
commit b0d86465f2
259 changed files with 42427 additions and 11 deletions
@@ -0,0 +1,65 @@
+import React from "react";
+import { IoMdClose } from "react-icons/io";
+import Sidebar from "./Sidebar";
+
+const MobileSiderbar = (props) => {
+  const { toggleComponentVisibility, setCurrentRoom, chatRooms, setChatRooms } =
+    props;
+
+  return (
+    <div id="headlessui-portal-root display:hidden">
+      <div data-headlessui-portal="">
+        <button
+          type="button"
+          aria-hidden="true"
+          className="fixed left-[1px] top-[1px] m-[-1px] h-0 w-[1px] overflow-hidden whitespace-nowrap border-0 p-0"
+        ></button>
+        <div>
+          <div
+            className="relative z-40"
+            id="headlessui-dialog-:re:"
+            role="dialog"
+            aria-modal="true"
+            data-headlessui-state="open"
+          >
+            <div className="fixed inset-0 bg-gray-600 bg-opacity-75 opacity-100"></div>
+            <div className="fixed inset-0 z-40 flex">
+              <div
+                className="relative flex w-full max-w-xs flex-1 translate-x-0 flex-col bg-gray-900"
+                id="headlessui-dialog-panel-:rf:"
+                data-headlessui-state="open"
+              >
+                <div className="absolute right-0 top-0 -mr-12 pt-2 opacity-100">
+                  <button
+                    type="button"
+                    className="ml-1 flex h-10 w-10 items-center justify-center focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
+                    tabIndex={0}
+                    onClick={toggleComponentVisibility}
+                  >
+                    <span className="sr-only">Close sidebar</span>
+                    <IoMdClose className="h-6 w-6 text-white" />
+                  </button>
+                </div>
+                <Sidebar
+                  setCurrentRoom={setCurrentRoom}
+                  chatRooms={chatRooms}
+                  setChatRooms={setChatRooms}
+                />
+              </div>
+              <div className="w-14 flex-shrink-0"></div>
+            </div>
+          </div>
+        </div>
+        <button
+          type="button"
+          aria-hidden="true"
+          className="fixed left-[1px] top-[1px] m-[-1px] h-0 w-[1px] overflow-hidden whitespace-nowrap border-0 p-0"
+        ></button>
+      </div>
+    </div>
+  );
+};
+
+export default MobileSiderbar;
+
+