import React from 'react';
import {MenuItem} from "./MenuItem";

import "./styles.css"
import styled from 'styled-components';
import ICategory from "../models/ICategory";

const SideBarComponent = styled.aside.attrs({
    className: "fixed bottom-0 left-0 top-24 z-20 flex flex-col items-center justify-center h-full rounded-md bg-clip-padding pt-5 pb-20 w-[15vw] sm:w-[10vw] xl:w-[5vw] "
})`
    background-color: hsla(0, 9%, 91%, 0.13);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
`;

const SideBarNavigation = styled.nav.attrs({
    className: "sticky  flex flex-col w-full h-full p-0 m-0 justify-around"
})``;

const MenuItemList = styled.ul.attrs({
    className: "mb-2 absolute flex flex-col justify-evenly w-full h-full p-0 "
})``;

interface IProps {
    categories: ICategory[];
}

const SideBar = ({ categories }: IProps) => {





    const sidebarVariants = {
        hidden: { opacity: 0, x: -50 },
        visible: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: -50 },
    };

    return (
        <SideBarComponent>
            <SideBarNavigation>
                <MenuItemList>

                </MenuItemList>
            </SideBarNavigation>
        </SideBarComponent>
    );
};


export default SideBar;