70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import { CSSTransition } from "react-transition-group";
|
|
import classNames from "classnames";
|
|
import { Link } from "react-router-dom";
|
|
import styled from "styled-components";
|
|
import { SidebarData } from "./SidebarData";
|
|
import Submenu from "./Submenu";
|
|
import SidebarLink from "./Submenu";
|
|
import Burger from "./Burger";
|
|
|
|
export type Props = {
|
|
className?: string;
|
|
};
|
|
|
|
const SideBarNav = styled.div<{ sidebar: boolean }>`
|
|
left: ${({ sidebar }) => (sidebar ? "0" : "100%")};
|
|
`;
|
|
|
|
const Sidebar = ({ className }: Props) => {
|
|
const [sidebar, setSidebar] = useState(false);
|
|
const toggleSidebar = () => setSidebar(!sidebar);
|
|
|
|
return (
|
|
<nav className="relative">
|
|
{/* Nav Start */}
|
|
<div
|
|
className="Burger flex items-center justify-start "
|
|
onClick={toggleSidebar}
|
|
>
|
|
<Burger className="w-6 bg-red-400" />
|
|
</div>
|
|
{/* Nav End */}
|
|
|
|
{/* Side bar Nav Start Lower one */}
|
|
{sidebar && (
|
|
<div
|
|
className="SideBarNav h-44 w-48 bg-sky-800 absolute -right-8 top-12
|
|
transition duration-1000 "
|
|
>
|
|
{/* Side bar Wrap Start */}
|
|
<div className="SidebarWrap pl-2 pt-2 h-4/5 flex flex-col items-center justify-around ">
|
|
{/* Burger Start */}
|
|
{/* <div
|
|
className="Burger relative w-6 h-6 flex items-center justify-start "
|
|
onClick={showSidebar}
|
|
>
|
|
<span
|
|
className="w-5 border h-0 border-black rounded
|
|
|
|
before:content-[''] before:w-5 before:border before:border-black
|
|
before:absolute before:rounded before:top-1 before:left-0
|
|
|
|
after:content-[''] after:w-5 after:border after:border-black
|
|
after:absolute after:rounded after:bottom-1 after:left-0"
|
|
></span>
|
|
</div> */}
|
|
{/* Burger End */}
|
|
{SidebarData.map((item, index) => {
|
|
return <Submenu item={item} key={index} />;
|
|
})}
|
|
</div>
|
|
{/* Side bar Wrap End */}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
export default Sidebar;
|