Merge pull request #216 from wwWallet/update-style-nav-sidebar

UI Enhancements for Sidebar and Navigation

Author: gkatrakazas

src/components/BottomNav.js

@@ -27,11 +27,11 @@ const BottomNav = ({ isOpen, toggle }) => {
 	};
 
 	return (
-		<div className={`fixed bottom-0 left-0 right-0 bg-white flex justify-around p-4 z-50 max480:flex hidden shadow-2xl rounded-t-lg`}>
+		<div className={`fixed bottom-0 left-0 right-0 bg-white flex justify-around p-4 z-40 max480:flex hidden shadow-2xl rounded-t-lg`}>
 			{navItems.map(item => (
 				<div
 					key={item.path}
-					className={`cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-custom-blue' : 'text-gray-400'} hover:text-custom-blue transition-colors duration-200`}
+					className={`cursor-pointer flex flex-col items-center w-[20%] ${(location.pathname === item.path && !isOpen) ? 'text-custom-blue' : 'text-gray-400'} transition-colors duration-200`}
 					onClick={() => handleNavigate(item.path)}
 					title={item.label}
 				>
@@ -41,7 +41,7 @@ const BottomNav = ({ isOpen, toggle }) => {
 			))}
 			<div
 				key={t("common.navItemProfile")}
-				className={`cursor-pointer flex flex-col items-center w-[20%] ${(isOpen) ? 'text-custom-blue' : 'text-gray-400'} hover:text-custom-blue transition-colors duration-200`}
+				className={`cursor-pointer flex flex-col items-center w-[20%] ${(isOpen) ? 'text-custom-blue' : 'text-gray-400'} transition-colors duration-200`}
 				onClick={toggle}
 				title={t("common.navItemProfile")}
 			>

src/components/Sidebar.js

@@ -18,7 +18,7 @@ const NavItem = ({
 	return (
 		<li
 			onClick={() => handleNavigate(path)}
-			className={`cursor-pointer flex items-center space-x-2 mb-4 p-2 rounded-r-xl ${location.pathname === path ? 'bg-white text-custom-blue' : 'nav-item-animate-hover'}`}
+			className={`cursor-pointer flex items-center space-x-2 mb-4 p-2 rounded-r-xl ${location.pathname === path ? 'min481:bg-white min481:text-custom-blue' : 'nav-item-animate-hover'}`}
 		>
 			{children}
 		</li>
@@ -54,7 +54,7 @@ const Sidebar = ({ isOpen, toggle }) => {
 	return (
 		<div
 			className={`${isOpen
-				? 'w-full flex flex-col justify-between fixed h-screen z-50 bg-custom-blue text-white p-4 pb-16 overflow-y-auto'
+				? 'w-full flex flex-col justify-between fixed h-screen z-30 bg-custom-blue text-white p-4 max480:pb-20 overflow-y-auto'
 				: 'hidden sm:flex sm:flex-col justify-between	 sticky top-0 bg-custom-blue w-auto text-white h-screen py-10 px-10 overflow-y-auto'
 
 				}`}
@@ -143,7 +143,7 @@ const Sidebar = ({ isOpen, toggle }) => {
 			</div>
 
 			{/* Powered By */}
-			<div className="bg-custom-blue text-white text-sm space-x-2 mb-4 p-2 table-footer-group">
+			<div className="bg-custom-blue text-white text-sm space-x-2 p-2">
 				<Trans
 					i18nKey="sidebar.poweredBy"
 					components={{

tailwind.config.js

@@ -17,6 +17,7 @@ module.exports = {
 			},
 			screens: {
 				'max480': { 'max': '480px' },
+				'min481': { 'min': '481px' },
 			}
 		},
 	},