## SideBar Menu ##

A collapsable side bar menu
 
### Props ###

The SideBar will have 2 components that it will be made up of.

#### SideMenu Component ####

1.  __onClick__ ((item: string) => void): This allows a function to passed whenever the sidebar has been interacted with. This is can be done in tandem that MenuItem component so that each item can have a different action

2.  __styles ?__ (SideMenu.Styles): Allows custom styles to be set onto the SideMenu Component like the positioning of the Menu, Background-Color and padding/margins

```ts
    styles={{
        MenuListContainer?: <styled component>;
        Container?: <styled component>;
        SubTitle?: <styled component>;
        MenuEligibleItem?: <styled component>;
        MenuItem?: <styled component>;
        MenuImage?: <styled component>;
    }}  
```

3. __id ?__ (string): A prefix id for all the html elements of the component

4. __name ?__ (string): A prefix name for all the html elements of the component

#### MenuItem Component ####

This component will have 7 props that can be passed with 2 being required.

1.  __displayValue__ (string): This will be the title of each MenuItem Title will be hidden and shown on hover

2.  __item__ (any):This will be used to be able to target individual menu items

3.  __disabled ?__ (boolean): The props allows for items on the menu to be disabled whent this has been set to true

4.  __selectedValue ?__ (boolean): This props allows the Item to have the selected attribute set to true.

5.  __onClick ?__ (function): This prop allow for the MenuItem to be given a function to preform when clicked on.

6.  __image ?__ (string): This prop will have the image/icon being shown in the sidemenu. There is no default so this needs to be passed

7.  __styles ?__ (MenuItem.Styles): Allows for custom styles to be set like the font-size of the text and icon. The color of the text/icon. The Icon itself can also be changed to a different one here.

```ts
    styles={{             
        MenuItem?: <styled component>;
        MenuImage?: <styled component>;
        SubTitle?: <styled component>;  
    }}  
```

8. __id ?__ (string): A prefix id for all the html elements of the component

9. __name ?__ (string): A prefix name for all the html elements of the component

### Usage ####

```jsx
        const items: JSX.Element[] = [
        <MenuItem
            key={1}
            displayValue={'Item:1'}
            item={'1'}
            image={image}
        />,
        <MenuItem
            key={2}
            displayValue={'Item:2'}
            item={'2'}
            image={image}
        />,
        <MenuItem
            key={3}
            displayValue={'Item:3'}
            item={image}
        />
        ]

    <SideMenuComponent onClick={(item) => { }} selectedValue={''} items={items}>
    </SideMenuComponent>
```

![pager_image_1](https://s3.amazonaws.com/tc-ui-components/documentationImages/sidebar.gif)

### Styling ####

All the Components Elements targeted are case-sensitive any incorrect charater will not add the style. You will also not receive an error for the misspelling

```jsx
const style = {
    This will target the text above the Icon
    SubTitle: styles.sideMenu.SubTitle.extend`
        font-size: 30px;
    `,
    This will target the text Icon itself
    MenuImage: styles.sideMenu.MenuImage.extend`
        font-size:30px;
        color: tomato;
    `,
    This will target the container that has the collapse animation
    MenuListContainer: styles.sideMenu.MenuListContainer.extend`
        width: 60px;
        &:hover{
            width: 300px
        }
    `,
};

    const item =[
        <MenuItem
            displayValue={"Item:1"}
            item={"1"}
            image={ICON_CODE.CLOSE}
            key={1}
        />
    ]
    <SideMenuComponent onClick={() =>{}}>{item}</SideMenuComponent>
```