navpar added

sankhadip-roy · Jul 30, 2024 · c715a44 · c715a44
1 parent 33303d9
commit c715a44
Show file tree

Hide file tree

Showing 4 changed files with 176 additions and 68 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@material-tailwind/react": "^2.1.9",
     "axios": "^1.6.8",
     "bootstrap": "^5.3.3",

diff --git a/frontend/src/components/MessageRoom.jsx b/frontend/src/components/MessageRoom.jsx
@@ -5,6 +5,7 @@ import { Button, Input } from "@material-tailwind/react";
 import '.././App.css'
 
 import OnlineUsers from "./OnlineUsers";
+import { NavbarSimple } from "./Navbar";
 
 //recoil related import
 import { useRecoilValue } from 'recoil';
@@ -56,17 +57,10 @@ export default function App() {
     return (
         <>
             <div>
-                {loggedUser == 'anonymous-not-loggedin' ? (
-                    <div>
-                        &nbsp;&nbsp; <a href="http://localhost:5173/register">Register</a> &nbsp;&nbsp;
-                        <a href="http://localhost:5173/login">Login</a>
-                    </div>
-                ) : (
-                    <div>&nbsp; &nbsp; User logged in as : {loggedUser}</div>
-                )}
-
-
-                <div className=" flex">
+                <div>
+                    <NavbarSimple />
+                </div>
+                <div className="flex justify-around">
                     <div>
                         <OnlineUsers />
                     </div>
@@ -82,7 +76,7 @@ export default function App() {
                                 </div>
                             </div>
                         ) : (
-                            <div>&nbsp; User logged in as : {loggedUser}</div>
+                            <div>&nbsp; username : {loggedUser}</div>
                         )}
 
 

diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
@@ -0,0 +1,90 @@
+import React from "react";
+import {
+    Navbar,
+    Collapse,
+    Typography,
+    IconButton,
+} from "@material-tailwind/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import { useRecoilValue } from 'recoil';
+import { userloggedin } from '../atom/userAtom'
+
+
+function NavList() {
+    const loggedUser = useRecoilValue(userloggedin);
+    return (
+        loggedUser == 'anonymous-not-loggedin' ? (
+            < ul className="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6" >
+                <Typography
+                    as="li"
+                    variant="small"
+                    color="blue-gray"
+                    className="p-1 font-medium"
+                >
+                    <a href="http://localhost:5173/register" className="flex items-center hover:text-blue-500 transition-colors">
+                        Register
+                    </a>
+                </Typography>
+                <Typography
+                    as="li"
+                    variant="small"
+                    color="blue-gray"
+                    className="p-1 font-medium"
+                >
+                    <a href="http://localhost:5173/login" className="flex items-center hover:text-blue-500 transition-colors">
+                        Login
+                    </a>
+                </Typography>
+
+            </ul >
+        ) : (<div>&nbsp; &nbsp; User logged in as : {loggedUser}</div>)
+    );
+}
+
+export function NavbarSimple() {
+    const [openNav, setOpenNav] = React.useState(false);
+
+    const handleWindowResize = () =>
+        window.innerWidth >= 960 && setOpenNav(false);
+
+    React.useEffect(() => {
+        window.addEventListener("resize", handleWindowResize);
+
+        return () => {
+            window.removeEventListener("resize", handleWindowResize);
+        };
+    }, []);
+
+    return (
+        <Navbar className="mx-auto max-w-screen-xl px-6 py-3">
+            <div className="flex items-center justify-between text-blue-gray-900">
+                <Typography
+                    as="a"
+                    href="#"
+                    variant="h6"
+                    className="mr-4 cursor-pointer py-1.5"
+                >
+                    Chat Room
+                </Typography>
+                <div className="hidden lg:block">
+                    <NavList />
+                </div>
+                <IconButton
+                    variant="text"
+                    className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
+                    ripple={false}
+                    onClick={() => setOpenNav(!openNav)}
+                >
+                    {openNav ? (
+                        <XMarkIcon className="h-6 w-6" strokeWidth={2} />
+                    ) : (
+                        <Bars3Icon className="h-6 w-6" strokeWidth={2} />
+                    )}
+                </IconButton>
+            </div>
+            <Collapse open={openNav}>
+                <NavList />
+            </Collapse>
+        </Navbar>
+    );
+}