From 13f564d6432576c1bc1b4c5a78315d64b673dd6c Mon Sep 17 00:00:00 2001 From: fwedwicc Date: Tue, 6 Aug 2024 13:23:07 +0800 Subject: [PATCH] Modified navbar for dropdown menu for small screens --- src/components/Navbar.jsx | 50 +++++++++++++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 4 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 731b0c2..65c5e63 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -3,9 +3,11 @@ import { fmUILogo } from '../assets'; import { Link, useLocation } from 'react-router-dom'; import { HiChevronRight, HiHome, HiCollection, HiHeart } from "react-icons/hi"; import { FaGithub } from "react-icons/fa"; +import { motion } from 'framer-motion'; const Navbar = () => { const location = useLocation(); + const [isOpen, setIsOpen] = useState(false); const [showNavbar, setShowNavbar] = useState(true); const [lastScrollY, setLastScrollY] = useState(0); @@ -64,6 +66,8 @@ const Navbar = () => { return 'Checkboxes'; case `${basePath}/components/inputField`: return 'Input Fields'; + case `${basePath}/components/navbar`: + return 'Navbar'; case `${basePath}/components/radio`: return 'Radio'; case `${basePath}/components/tab`: @@ -74,7 +78,7 @@ const Navbar = () => { case `${basePath}/components/authPage`: return 'Auth Pages'; default: - return ; + return ; } }; @@ -83,7 +87,45 @@ const Navbar = () => { fmUI Logo -
+ {/* Mobile Menu Button */} + + {/* Mobile Dropdown Menu */} + {isOpen && ( + +
+ + + Home + + + + Components + + + {getPageName()} + +
+
+ v1.0 + + + +
+
+ )} +
Home @@ -98,12 +140,12 @@ const Navbar = () => { {getPageName()}
-
+
v1.0 -
+
); }