Browse Source

fe-26 网页统一导航栏

master
Chunxian Zhang 2 years ago
parent
commit
4fe25f0727
1 changed files with 90 additions and 0 deletions
  1. +90
    -0
      lazy-timer-fe/src/components/Navbar.jsx

+ 90
- 0
lazy-timer-fe/src/components/Navbar.jsx View File

@ -0,0 +1,90 @@
import React, { useEffect } from 'react';
import { AiOutlineMenu } from 'react-icons/ai';
import { FiShoppingCart } from 'react-icons/fi';
import { BsChatLeft } from 'react-icons/bs';
import { RiNotification3Line } from 'react-icons/ri';
import { MdKeyboardArrowDown } from 'react-icons/md';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import avatar from '../data/avatar.jpg';
import { Cart, Chat, Notification, UserProfile } from '.';
import { useStateContext } from '../contexts/ContextProvider';
const NavButton = ({ title, customFunc, icon, color, dotColor }) => (
<TooltipComponent content={title} position="BottomCenter">
<button
type="button"
onClick={() => customFunc()}
style={{ color }}
className="relative text-xl rounded-full p-3 hover:bg-light-gray"
>
<span
style={{ background: dotColor }}
className="absolute inline-flex rounded-full h-2 w-2 right-2 top-2"
/>
{icon}
</button>
</TooltipComponent>
);
const Navbar = () => {
const { currentColor, activeMenu, setActiveMenu, handleClick, isClicked, setScreenSize, screenSize } = useStateContext();
useEffect(() => {
const handleResize = () => setScreenSize(window.innerWidth);
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);
useEffect(() => {
if (screenSize <= 900) {
setActiveMenu(false);
} else {
setActiveMenu(true);
}
}, [screenSize]);
const handleActiveMenu = () => setActiveMenu(!activeMenu);
return (
<div className="flex justify-between p-2 md:ml-6 md:mr-6 relative">
<NavButton title="Menu" customFunc={handleActiveMenu} color={currentColor} icon={<AiOutlineMenu />} />
<div className="flex">
<NavButton title="Cart" customFunc={() => handleClick('cart')} color={currentColor} icon={<FiShoppingCart />} />
<NavButton title="Chat" dotColor="#03C9D7" customFunc={() => handleClick('chat')} color={currentColor} icon={<BsChatLeft />} />
<NavButton title="Notification" dotColor="rgb(254, 201, 15)" customFunc={() => handleClick('notification')} color={currentColor} icon={<RiNotification3Line />} />
<TooltipComponent content="Profile" position="BottomCenter">
<div
className="flex items-center gap-2 cursor-pointer p-1 hover:bg-light-gray rounded-lg"
onClick={() => handleClick('userProfile')}
>
<img
className="rounded-full w-8 h-8"
src={avatar}
alt="user-profile"
/>
<p>
<span className="text-gray-400 text-14">Hi,</span>{' '}
<span className="text-gray-400 font-bold ml-1 text-14">
Michael
</span>
</p>
<MdKeyboardArrowDown className="text-gray-400 text-14" />
</div>
</TooltipComponent>
{isClicked.cart && (<Cart />)}
{isClicked.chat && (<Chat />)}
{isClicked.notification && (<Notification />)}
{isClicked.userProfile && (<UserProfile />)}
</div>
</div>
);
};
export default Navbar;

Loading…
Cancel
Save