113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import React, { useState } from "react";
|
|
import styled from "styled-components";
|
|
import { Menu, MenuItem, IconName, Button, Icon } from "@blueprintjs/core";
|
|
|
|
export type SideNavItem = {
|
|
id: string;
|
|
icon?: string;
|
|
text: string;
|
|
};
|
|
|
|
type SideNavProps = {
|
|
items: SideNavItem[];
|
|
active?: SideNavItem;
|
|
onSelect: Function;
|
|
headeroffset?: number;
|
|
iconSize?: number;
|
|
};
|
|
|
|
/* eslint-disable no-unexpected-multiline */
|
|
|
|
const SideNavWrapper = styled.div<{
|
|
open: boolean;
|
|
headeroffset?: number;
|
|
}>`
|
|
&&& {
|
|
width: ${props =>
|
|
props.open
|
|
? props.theme.sideNav.maxWidth
|
|
: props.theme.sideNav.minWidth}px;
|
|
transition: width 0.5s ease-out;
|
|
height: 100%;
|
|
& ul {
|
|
min-width: ${props => props.theme.sideNav.minWidth}px;
|
|
overflow-y: auto;
|
|
& li > div {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
height: ${props => props.theme.sideNav.navItemHeight}px;
|
|
text-transform: capitalize;
|
|
& > div {
|
|
flex-grow: 0;
|
|
display: inline;
|
|
width: ${props => (props.open ? 100 : 0)}px;
|
|
}
|
|
& > span {
|
|
margin-right: ${props => (props.open ? props.theme.spaces[3] : 0)}px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
const ToggleButton = styled(Button)<{
|
|
open: boolean;
|
|
headeroffset?: number;
|
|
}>`
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: ${props =>
|
|
props.open ? props.theme.sideNav.maxWidth : props.theme.sideNav.minWidth}px;
|
|
height: ${props => props.headeroffset || 50}px;
|
|
justify-content: flex-end;
|
|
padding-right: ${props => props.theme.sideNav.minWidth / 2}px;
|
|
transition: width 0.5s ease-out;
|
|
`;
|
|
|
|
export const SideNav = (props: SideNavProps) => {
|
|
const [open, setopen] = useState(true);
|
|
const select = (item: SideNavItem) => () => {
|
|
props.onSelect(item);
|
|
};
|
|
const renderItems = (items: SideNavItem[]) => {
|
|
return items.map(item => {
|
|
const icon = (
|
|
<Icon iconSize={props.iconSize} icon={item.icon as IconName} />
|
|
);
|
|
return (
|
|
<MenuItem
|
|
icon={icon}
|
|
active={props.active && item.id === props.active.id}
|
|
key={item.id}
|
|
onClick={select(item)}
|
|
text={open ? item.text : undefined}
|
|
tagName="div"
|
|
/>
|
|
);
|
|
});
|
|
};
|
|
const toggleCollapse = () => {
|
|
setopen(!open);
|
|
};
|
|
|
|
return (
|
|
<SideNavWrapper open={open} headeroffset={props.headeroffset}>
|
|
<ToggleButton
|
|
headeroffset={props.headeroffset}
|
|
onClick={toggleCollapse}
|
|
rightIcon={open ? "cross" : "menu"}
|
|
minimal
|
|
open={open}
|
|
className="sidenav-toggle"
|
|
></ToggleButton>
|
|
<Menu large>{renderItems(props.items)}</Menu>
|
|
</SideNavWrapper>
|
|
);
|
|
};
|
|
|
|
export default SideNav;
|