Skip to content

Commit

Permalink
style: fix ui of navbar home dahboard and user profile
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinit717
vinit717 committed Aug 5, 2024
1 parent db20d4a commit 7cda98f
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 98 deletions.
43 changes: 16 additions & 27 deletions src/components/Navbar/NavbarMenuItems.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<ul
className={`${menuOpen ? 'block' : 'hidden'} absolute top-16 right-3 bg-gray-800 p-2 z-10
rounded-[8px] shadow-lg
`}
data-testid="navbar-menu-items"
>
<li>
<Link href="/" className="text-white hover:bg-gray-700 block w-full px-4 py-2">
Create New
</Link>
</li>
<li>
<Link href="/dashboard" className="text-white hover:bg-gray-700 block px-4 py-2">
Dashboard
</Link>
</li>
<li>
<Link href={TINY_API_LOGOUT} className="text-white hover:bg-gray-700 block px-4 py-2">
Sign Out
</Link>
</li>
<ul className="flex gap-14 items-center" data-testid="navbar-menu-items">
<>
<li className={`relative ${router.pathname === '/' ? 'border-b-2 border-white' : ''}`}>
<Link href="/" className="text-white hover:text-gray-300">
Home
</Link>
</li>
<li className={`relative ${router.pathname === '/dashboard' ? 'border-b-2 border-white' : ''}`}>
<Link href="/dashboard" className="text-white hover:text-gray-300">
Dashboard
</Link>
</li>
</>
</ul>
);
};
Expand Down
40 changes: 14 additions & 26 deletions src/components/Navbar/UserProfileButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<Button type="button" onClick={handleMenuClick} className="text-white focus:outline-none">
<div className="flex items-center space-x-1">
<ProfileIcon firstName={firstName} lastName={lastName} />
<span> {firstName}</span>
<IoMdArrowDropdown
className={`text-[2em]
"
${isMenuOpen ? 'rotate-180' : ''}`}
data-testid="user-profile-button-arrow"
/>
</div>
</Button>
);
}
return (
}: UserProfileButtonProps) => {
return isLoggedIn ? (
<Button type="button" onClick={handleProfileClick} className="text-white focus:outline-none">
<div className="flex items-center space-x-1">
<ProfileIcon firstName={firstName} lastName={lastName} />
</div>
</Button>
) : (
<Button
className="flex items-center space-x-2 text-white px-4 py-2 rounded-md cursor-pointer hover:bg-gray-700"
data-testid="google-login"
className="flex items-center space-x-2 text-white px-4 py-2 rounded-md cursor-pointer"
onClick={() => setShowLoginModal(true)}
>
<FaRegUser className="mr-2" />
Sign in
</Button>
);
Expand Down
75 changes: 33 additions & 42 deletions src/components/Navbar/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<boolean>(false);
const [showSignOutButton, setShowSignOutButton] = useState<boolean>(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 <UserLoginShimmer />;
}

return (
<UserProfileButton
isLoggedIn={isLoggedIn}
firstName={firstName}
lastName={lastName}
handleMenuClick={handleMenuClick}
setShowLoginModal={setShowLoginModal}
isMenuOpen={menuOpen}
/>
);
};
const navbarRef = useRef<HTMLDivElement>(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 (
<>
<nav ref={navbarRef} className=" p-4 h-[8vh]">
<nav className="p-4 h-[8vh]">
<div className="flex items-center justify-between">
<Link href="/" className="flex">
<Link href="/" className="flex items-center">
<Image src="/rds.png" alt="logo" width={30} height={30} className="mr-2 w-30" />
<span className="text-white text-2xl font-bold">RDS</span>
</Link>

<ul className="lg:flex space-x-4">
<li className="relative group ">{renderUserProfile()}</li>
<NavbarMenuItems menuOpen={menuOpen} />
<ul className="flex gap-14 mr-14">
<NavbarMenuItems />
<li className="relative group">
{isLoading ? (
<UserLoginShimmer />
) : (
<UserProfileButton
isLoggedIn={isLoggedIn}
firstName={firstName}
lastName={lastName}
handleProfileClick={handleProfileClick}
setShowLoginModal={setShowLoginModal}
/>
)}
</li>
</ul>
</div>
</nav>
{showSignOutButton && (
<div className="absolute top-20 right-10 bg-white p-1 rounded-lg shadow-lg">
<Link href={TINY_API_LOGOUT} className="text-black flex items-center h-8 w-24 text-sm gap-4">
SignOut
<MdOutlineLogout className="h-5 w-5" />
</Link>
</div>
)}
{showLoginModal && (
<LoginModal onClose={() => setShowLoginModal(false)}>
<p className="text-black text-center mb-4">Sign in to your account</p>
Expand Down
4 changes: 1 addition & 3 deletions src/components/ProfileIcon/ProfileIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ firstName, lastName }) => {

return (
<div
className={
'w-[46px] h-[46px] rounded-[50%] bg-[#384B6B] flex items-center justify-center text-white text-lg p-4'
}
className={'w-12 h-12 rounded-full bg-custom-blue flex items-center justify-center text-white text-lg'}
data-testid="profile-icon"
>
{initials}
Expand Down

0 comments on commit 7cda98f

Please sign in to comment.