diff --git a/lazy-timer-fe/src/components/Navbar.jsx b/lazy-timer-fe/src/components/Navbar.jsx
new file mode 100644
index 0000000..1e23d14
--- /dev/null
+++ b/lazy-timer-fe/src/components/Navbar.jsx
@@ -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 }) => (
+
+
+
+);
+
+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 (
+
+
+
} />
+
+
handleClick('cart')} color={currentColor} icon={} />
+ handleClick('chat')} color={currentColor} icon={} />
+ handleClick('notification')} color={currentColor} icon={} />
+
+ handleClick('userProfile')}
+ >
+
+
+ Hi,{' '}
+
+ Michael
+
+
+
+
+
+
+ {isClicked.cart && ()}
+ {isClicked.chat && ()}
+ {isClicked.notification && ()}
+ {isClicked.userProfile && ()}
+
+
+ );
+};
+
+export default Navbar;