Added Private route and global store

frontend/src/components/Header/Header.jsx

@@ -1,8 +1,12 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import useUserStore from '../../store/useStore'
+import ProfileImage from './ProfileImage';
 
 function Header() {
 
+  const {user} = useUserStore();
+
   return (
     <div className="navbar bg-base-100">
   <div className="flex-1">
@@ -10,32 +14,11 @@ function Header() {
   </div>
   <div className="flex-none">
     <ul className="menu menu-horizontal px-1">
-      <li><Link to={"/login"}>Login</Link></li>
+      {user.username ? <li><Link to={"/dashboard"}>Dashboard</Link></li> : <li><Link to={"/login"}>Login</Link></li>}
       <li><Link to={'/bookmark'}>Bookmarks</Link></li>
     </ul>
   </div>  
-  <div className="flex-none">
-    <div className="dropdown dropdown-end">
-      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
-        <div className="w-10 rounded-full">
-          <img
-            alt="Tailwind CSS Navbar component"
-            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
-        </div>
-      </div>
-      <ul
-        tabIndex={0}
-        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
-        <li>
-          <Link to={'/dashboard'} className="justify-between" >
-            Profile
-            <span className="badge">New</span>
-          </Link>
-        </li>
-        <li><a>Logout</a></li>
-      </ul>
-    </div>
-  </div>
+  {user.username && <ProfileImage userData={user}/>}
 </div>
   )
 }

frontend/src/components/Header/ProfileImage.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import useUserStore from '../../store/useStore';
+
+function ProfileImage({userData}) {
+
+    const {setUser} = useUserStore();
+
+    const handleLogout = () => {
+        setUser({});
+    }
+
+
+  return (
+    <div className="flex-none">
+    <div className="dropdown dropdown-end">
+      <div tabIndex={0} role="button" className="btn btn-ghost btn-circle avatar">
+        <div className="w-10 rounded-full">
+          <img
+            alt="Tailwind CSS Navbar component"
+            src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
+        </div>
+      </div>
+      <ul
+        tabIndex={0}
+        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
+        <li className='font-bold'><a >{userData?.username || "User"}</a></li>
+        <li>
+          <Link to={'/dashboard'} className="justify-between" >
+            Profile
+            <span className="badge">New</span>
+          </Link>
+        </li>
+        <li><a onClick={handleLogout}>Logout</a></li>
+      </ul>
+    </div>
+  </div>
+  )
+}
+
+export default ProfileImage

frontend/src/components/PrivateRoute/PrivateRoute.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import useUserStore from '../../store/useStore';
+import { Navigate, Outlet } from 'react-router-dom';
+
+function PrivateRoute() {
+
+    const {user} = useUserStore();
+
+  return (
+    <div>
+      {user.username ? <Outlet/> : <Navigate to={'/login'}/>}
+    </div>
+  )
+}
+
+export default PrivateRoute