diff --git a/src/components/Navbar/NavbarMenuItems.tsx b/src/components/Navbar/NavbarMenuItems.tsx
index bf032d3..308468f 100644
--- a/src/components/Navbar/NavbarMenuItems.tsx
+++ b/src/components/Navbar/NavbarMenuItems.tsx
@@ -1,34 +1,23 @@
import Link from 'next/link';
+import { useRouter } from 'next/router';
-import { TINY_API_LOGOUT } from '@/constants/url';
+const NavbarMenuItems = () => {
+ const router = useRouter();
-interface NavbarMenuItemsProps {
- menuOpen: boolean;
-}
-
-const NavbarMenuItems = ({ menuOpen }: NavbarMenuItemsProps) => {
return (
-
- -
-
- Create New
-
-
- -
-
- Dashboard
-
-
- -
-
- Sign Out
-
-
+
+ <>
+ -
+
+ Home
+
+
+ -
+
+ Dashboard
+
+
+ >
);
};
diff --git a/src/components/Navbar/UserProfileButton.tsx b/src/components/Navbar/UserProfileButton.tsx
index c004476..5c69b03 100644
--- a/src/components/Navbar/UserProfileButton.tsx
+++ b/src/components/Navbar/UserProfileButton.tsx
@@ -1,47 +1,35 @@
-import { IoMdArrowDropdown } from 'react-icons/io';
+import { FaRegUser } from 'react-icons/fa';
import Button from '../Button';
import ProfileIcon from '../ProfileIcon/ProfileIcon';
-interface SignInButtonProps {
+interface UserProfileButtonProps {
isLoggedIn: boolean;
firstName: string;
lastName: string;
- handleMenuClick: () => void;
+ handleProfileClick: () => void;
setShowLoginModal: (value: boolean) => void;
- isMenuOpen: boolean;
}
const UserProfileButton = ({
isLoggedIn,
firstName,
lastName,
- handleMenuClick,
+ handleProfileClick,
setShowLoginModal,
- isMenuOpen,
-}: SignInButtonProps) => {
- if (isLoggedIn) {
- return (
-
- );
- }
- return (
+}: UserProfileButtonProps) => {
+ return isLoggedIn ? (
+
+ ) : (
);
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 23d7554..d37ed58 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,71 +1,62 @@
import Image from 'next/image';
import Link from 'next/link';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useState } from 'react';
+import { MdOutlineLogout } from 'react-icons/md';
import LoginModal from '@/components/LoginModal';
-import NavbarMenuItems from '@/components/Navbar/NavbarMenuItems';
import UserProfileButton from '@/components/Navbar/UserProfileButton';
import UserLoginShimmer from '@/components/ShimmerEffect/UserLoginShimmer';
+import { TINY_API_LOGOUT } from '@/constants/url';
import useAuthenticated from '@/hooks/useAuthenticated';
+import NavbarMenuItems from './NavbarMenuItems';
+
const Navbar = () => {
- const [menuOpen, setMenuOpen] = useState(false);
const [showLoginModal, setShowLoginModal] = useState(false);
+ const [showSignOutButton, setShowSignOutButton] = useState(false);
const { isLoggedIn, isLoading, userData } = useAuthenticated();
const userName = userData?.data?.userName || 'User';
const [firstName, lastName] = userName.split(' ');
- const handleMenuClick = () => {
- setMenuOpen(!menuOpen);
- };
-
- const renderUserProfile = () => {
- if (isLoading) {
- return ;
- }
-
- return (
-
- );
- };
- const navbarRef = useRef(null);
-
- const handleOutsideClick = (event: MouseEvent) => {
- if (navbarRef.current && !navbarRef.current.contains(event.target as Node)) {
- setMenuOpen(false);
- }
+ const handleProfileClick = () => {
+ setShowSignOutButton(!showSignOutButton);
};
- useEffect(() => {
- document.addEventListener('mousedown', handleOutsideClick);
- return () => {
- document.removeEventListener('mousedown', handleOutsideClick);
- };
- }, []);
-
return (
<>
-