WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Mobile

Browse Source
This commit is contained in:
Ebube
2023-05-08 22:22:40 +01:00
parent 6583d2600b
commit cef0860a4b
1 changed files with 50 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Partials/MobileSideBar.jsx
+50 -43
View File
@@ -4,9 +4,15 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
import DarkModeContext from "../Contexts/DarkModeContext";
import Icons from "../Helpers/Icons";
import { useSelector } from "react-redux";
export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
const darkMode = useContext(DarkModeContext);
let { jobLists } = useSelector((state) => state.jobLists);
const marketData = jobLists?.result_list;
let noOfJobs = marketData?.length;
return (
<div className="w-full h-full">
{/* logo-area */}
@@ -73,49 +79,20 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
</div>
<div className="items">
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink
className="nav-item flex items-center justify-start space-x-3.5"
to="/"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="dashboard" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
Dashboard
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/market"
className="nav-item flex items-center justify-start space-x-3.5"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="active-bids" />
</span>
<span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
Market
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
0
</span>
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/mytask"
className="nav-item flex items-center justify-start space-x-3.5"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="market" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
My Task(s)
</span>
</NavLink>
</li>
{/* Using mini component reduces the bulk amount of html */}
{[
{ name: "Dashboard", path: "/" },
{ name: "Market", path: "/market", bubble: noOfJobs },
{ name: "My Task(s)", path: "/mytask" },
].map(({ name, path, bubble }, idx) => (
<ListItem
key={idx}
title={name}
route={path}
bubble={bubble}
sidebar
/>
))}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/notification"*/}
@@ -284,3 +261,33 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
</div>
);
}
const ListItem = ({ sidebar, route, title, bubble }) => {
return (
<li className="item group">
<NavLink
to={route}
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="market" />
</span>
<span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
{title && title}
{bubble && (
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
{bubble}
</span>
)}
</span>
</NavLink>
</li>
);
};