forked from tpd94/CDRM-Extension
52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
import { NavLink } from "react-router-dom";
|
|
import homeIcon from "../assets/home.svg";
|
|
import settingsIcon from "../assets/settings.svg";
|
|
import closeIcon from "../assets/close.svg";
|
|
|
|
function SideNav({ onClose }) {
|
|
return (
|
|
<div className="w-full h-full overflow-y-auto overflow-x-auto flex flex-col bg-black">
|
|
<div className="w-full min-h-16 max-h-16 h-16 shrink-0 flex sticky top-0 z-20 border-b border-b-white bg-black">
|
|
<button
|
|
onClick={onClose}
|
|
className="h-full ml-auto p-3 hover:cursor-pointer"
|
|
>
|
|
<img src={closeIcon} alt="Close" className="h-full" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="w-full h-16 flex items-center justify-center mt-2">
|
|
<NavLink
|
|
to="/results"
|
|
onClick={onClose}
|
|
className="text-white text-2xl font-bold flex flex-row items-center border-l-white hover:border-l-1 w-full hover:bg-black/50 transition duration-300 ease-in-out p-2"
|
|
>
|
|
<img
|
|
src={homeIcon}
|
|
alt="Home"
|
|
className="h-full w-16 p-2 flex items-center cursor-pointer"
|
|
/>
|
|
Home
|
|
</NavLink>
|
|
</div>
|
|
|
|
<div className="w-full h-16 flex items-center justify-center mt-2">
|
|
<NavLink
|
|
to="/settings"
|
|
onClick={onClose}
|
|
className="text-white text-2xl font-bold flex flex-row items-center hover:border-l-1 border-l-white w-full hover:bg-black/50 transition duration-300 ease-in-out p-2"
|
|
>
|
|
<img
|
|
src={settingsIcon}
|
|
alt="Settings"
|
|
className="h-full w-16 p-2 flex items-center cursor-pointer"
|
|
/>
|
|
Settings
|
|
</NavLink>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SideNav;
|