114 lines
3.0 KiB
TypeScript
114 lines
3.0 KiB
TypeScript
import React from "react";
|
|
import styled from "styled-components";
|
|
import { Menu, Button } from "@blueprintjs/core";
|
|
import type { SideNavItemProps } from "./SideNavItem";
|
|
import SideNavItem from "./SideNavItem";
|
|
import LetterIcon from "components/editorComponents/LetterIcon";
|
|
interface SideNavProps {
|
|
items?: SideNavItemProps[];
|
|
active?: string;
|
|
headeroffset?: number;
|
|
open: boolean;
|
|
toggleCollapse: (open: boolean) => void;
|
|
}
|
|
|
|
/* 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.2s ease-in;
|
|
height: 100%;
|
|
& ul {
|
|
min-width: ${(props) => props.theme.sideNav.minWidth}px;
|
|
overflow-y: auto;
|
|
& a {
|
|
text-decoration: none;
|
|
color: ${(props) => props.theme.colors.textOnDarkBG};
|
|
}
|
|
& li > div {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0 ${(props) => (props.open ? props.theme.spaces[6] : 0)}px;
|
|
height: ${(props) => props.theme.sideNav.navItemHeight}px;
|
|
text-transform: capitalize;
|
|
& > 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;
|
|
display: flex;
|
|
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.1s ease-in;
|
|
}
|
|
`;
|
|
|
|
export function SideNav(props: SideNavProps) {
|
|
const { open, toggleCollapse } = props;
|
|
const renderItems = (sideNavItems?: SideNavItemProps[]) => {
|
|
let items = sideNavItems;
|
|
if (!items) {
|
|
items = [
|
|
{ id: "0", text: "", path: "", loading: true, showText: true },
|
|
{ id: "1", text: "", path: "", loading: true, showText: true },
|
|
{ id: "2", text: "", path: "", loading: true, showText: true },
|
|
];
|
|
}
|
|
return items.map((item) => {
|
|
const icon =
|
|
item.text.length > 0 ? (
|
|
<LetterIcon
|
|
text={String.fromCodePoint(item.text.codePointAt(0) || 0)}
|
|
/>
|
|
) : null;
|
|
return (
|
|
<SideNavItem key={item.id} showText={open} {...item} icon={icon} />
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<SideNavWrapper headeroffset={props.headeroffset} open={open}>
|
|
<ToggleButton
|
|
className="sidenav-toggle"
|
|
headeroffset={props.headeroffset}
|
|
icon={open ? "double-chevron-left" : "menu"}
|
|
minimal
|
|
onClick={() => {
|
|
toggleCollapse(!open);
|
|
}}
|
|
open={open}
|
|
/>
|
|
<Menu large>{renderItems(props.items)}</Menu>
|
|
</SideNavWrapper>
|
|
);
|
|
}
|
|
|
|
export default SideNav;
|