diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx index 0550fb5..52eb5c8 100644 --- a/frontend/src/Navbar.tsx +++ b/frontend/src/Navbar.tsx @@ -127,15 +127,43 @@ const rules = ( </div> </> ); + const Navbar: React.FC = () => { const [sidebarOpen, setSidebarOpen] = useState(false); + const links = [ + { + text: 'Login', + type: 'link', + callback: () => navigate('/login'), + }, + { + text: 'Logout', + type: 'link', + callback: () => auth.logout(), + }, + { + text: 'About Us', + type: 'modal', + callback: () => + modal.show('aboutUsModal', aboutUs, 'large', [ + { text: 'Close', type: 'submit' }, + ]), + }, + { + text: 'Rules', + type: 'modal', + callback: () => + modal.show('rulesModal', rules, 'large', [ + { text: 'Close', type: 'submit' }, + ]), + }, + ]; const auth = useAuth(); const modal = useModal(); const navigate = useNavigate(); const location = useLocation(); const showLoginBtn = location.pathname !== '/login' && location.pathname !== '/signup'; - const toggleMenu = () => { setSidebarOpen(!sidebarOpen); }; @@ -199,9 +227,7 @@ const Navbar: React.FC = () => { <div className={`bg-gray-300 text-black border-gray-600 ${sidebarOpen ? 'w-64' : 'w-0'} p-4 shadow-lg pl-10 rounded-r-lg relative z-30 transform transition-width duration-300 `} style={{ - boxShadow: sidebarOpen - ? '0px 0px 20px rgba(0, 0, 0, 0.3)' - : 'none', + filter: 'drop-shadow(0px 0px 20px rgb(0, 0, 0))', }} > <button @@ -219,70 +245,64 @@ const Navbar: React.FC = () => { <div className="mb-2 mt-20 text-2xl font-kavoon align-center text-stroke-2 text-white font-bold"> {auth.getUser()?.name} </div> - <Button - variant="accept" - size="medium" - fontSize="text-2xl" - onClick={auth.logout} - className={`mb-2 mt-5 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`} - > - Logout - </Button> + <div className="my-10"> + {links.map((link, index) => { + if ( + link.text === 'Logout' || + link.type === 'modal' + ) { + return ( + <div className="mt-4" key={index}> + <Button + variant="accept" + size="medium" + fontSize="text-2xl" + onClick={() => { + link.callback(); + setSidebarOpen(false); + }} + className="mb-2" + > + {link.text} + </Button> + </div> + ); + } + })} + </div> </> ) : ( <> - <Button - variant="accept" - size="medium" - fontSize="text-2xl" - onClick={() => navigate('/login')} - className={`mb-2 mt-20 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`} - > - Login - </Button> + <div className="my-10"> + {links.map((link, index) => { + if ( + link.text === 'Login' || + link.type === 'modal' + ) { + return ( + <div className="mt-4" key={index}> + <Button + variant="accept" + size="medium" + fontSize="text-2xl" + onClick={() => { + link.callback(); + setSidebarOpen(false); + }} + className="mb-2" + > + {link.text} + </Button> + </div> + ); + } + })} + </div> </> )} - <div className="mt-4"> - <Button - variant="accept" - size="medium" - fontSize="text-2xl" - onClick={() => { - modal.show('aboutUsModal', aboutUs, 'large', [ - { - text: 'Close', - type: 'submit', - }, - ]); - toggleMenu(); - }} - className={`mb-2 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`} - > - About Us - </Button> - </div> - <div className="mt-4"> - <Button - variant="accept" - size="medium" - fontSize="text-2xl" - onClick={() => { - modal.show('rulesModal', rules, 'large', [ - { - text: 'Close', - type: 'submit', - }, - ]); - toggleMenu(); - }} - className={`${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`} - > - Rules - </Button> - </div> </div> <div - className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700" + className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700 translate-x-[-0.2rem] scale-x-110" onClick={toggleMenu} ></div> </div>