Fix login form and add animation to show/hide AddRoomPanel

frontend/src/components/Home/LoginForm.tsx

@@ -11,7 +11,6 @@ function LoginForm() {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const { setUsername } = useUser();
   const router = useRouter();
-  const { socket } = useSocket();
 
   const handleInputChange = (e: any) => {
     setName(e.target.value);

frontend/src/components/Room/AddRoomPanel.tsx

@@ -42,7 +42,9 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
     socket?.emit("join_room", joinId);
-    router.replace(`/chat/${joinId}`);
+    setTimeout(() => {
+      router.replace(`/chat/${joinId}`);
+    }, 50);
   };
 
   const handleSubmitCreate = (e: any) => {
@@ -58,7 +60,9 @@ function AddRoomPanel({ hideAddRoomPanel }: any) {
     setMyRooms([...myRooms, newRoom]);
     hideAddRoomPanel(true);
     socket?.emit("join_room", id, title);
-    router.replace(`/chat/${id}`);
+    setTimeout(() => {
+      router.replace(`/chat/${id}`);
+    }, 50);
   };
 
   return (

frontend/src/components/Room/RoomSideBar.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import RoomCard from "./RoomCard";
 import IRoom from "@/interfaces/IRoom";
 import { useRoom } from "@/contexts/RoomContext";
@@ -9,13 +9,15 @@ import AddRoomPanel from "./AddRoomPanel";
 import ThemeSwitcher from "../shared/themeswitcher";
 import { useRouter } from "next/navigation";
 import { useUser } from "@/contexts/UserContext";
+import anime from "animejs";
 
 function RoomSideBar() {
   const [showAddRoomPanel, setShowAddRoomPanel] = useState(false);
   const { rooms, myRooms, currentRoomId, setCurrentRoomId } = useRoom();
   const { socket, roomUsers } = useSocket();
   const router = useRouter();
   const { username } = useUser();
+  const addRoomPanelRef = useRef<HTMLDivElement>(null);
 
   const hideAddRoomPanel = () => setShowAddRoomPanel(false);
 
@@ -36,6 +38,17 @@ function RoomSideBar() {
     router.push("/");
   };
 
+  useEffect(() => {
+    if (showAddRoomPanel) {
+      anime({
+        targets: addRoomPanelRef.current,
+        opacity: [0, 1],
+        translateY: [-100, 0],
+        duration: 1000,
+      });
+    }
+  }, [showAddRoomPanel]);
+
   return (
     <div className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg">
       <div className="flex justify-center">
@@ -79,8 +92,11 @@ function RoomSideBar() {
         <BiMessageAdd size={30} />
       </div>
       {showAddRoomPanel && (
-        <div>
-          <AddRoomPanel hideAddRoomPanel={hideAddRoomPanel} />
+        <div className="fixed top-0 left-0 w-full h-full z-50">
+          <div className="absolute inset-0 backdrop-blur-md"></div>
+          <div ref={addRoomPanelRef}>
+            <AddRoomPanel hideAddRoomPanel={hideAddRoomPanel} />
+          </div>
         </div>
       )}
     </div>