import * as React from "react";
import * as Constants from "~/common/constants";
import * as System from "~/components/system";
import * as SVG from "~/common/svg";
import { css } from "@emotion/react";
import ApplicationControlMenu from "~/components/core/ApplicationControlMenu";
const IconMap = {
HOME: ,
NETWORK: ,
DIRECTORY: ,
FOLDER: ,
WALLET: ,
DEALS: ,
SLATES: ,
SLATE: ,
LOCAL_DATA: ,
PROFILE_PAGE: ,
SETTINGS_DEVELOPER: ,
};
const STYLES_NAVIGATION = css`
width: 100%;
display: block;
padding: 24px 0 0 0;
font-size: 18px;
`;
const STYLES_NAVIGATION_HEADER = css`
display: flex;
align-items: center;
justify-content: flex-start;
padding: 64px 24px 48px 48px;
@media (max-width: ${Constants.sizes.mobile}px) {
padding: 64px 0 48px 16px;
}
`;
const STYLES_NAVIGATION_ITEM = css`
display: flex;
align-items: flex-start;
justify-content: space-between;
cursor: pointer;
color: ${Constants.system.black};
user-select: none;
padding-right: 24px;
:hover {
padding-right: 0px;
color: ${Constants.system.brand};
}
`;
const STYLES_PROFILE = css`
font-family: ${Constants.font.semiBold};
color: ${Constants.system.pitchBlack};
background-color: ${Constants.system.gray};
font-size: 12px;
line-height: 12px;
text-decoration: none;
flex-shrink: 0;
padding-right: 24px;
height: 36px;
border-radius: 36px;
display: flex;
align-items: center;
justify-content: flex-start;
transition: 200ms ease all;
:hover {
color: ${Constants.system.white};
background-color: ${Constants.system.brand};
}
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_PROFILE_IMAGE = css`
background-size: cover;
background-position: 50% 50%;
flex-shrink: 0;
height: 32px;
width: 32px;
border-radius: 32px;
margin-right: 16px;
margin-left: 2px;
`;
const STYLES_EXPANDER = css`
flex-shrink: 0;
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_ICON = css`
flex-shrink: 0;
position: relative;
`;
// NOTE(jim): Adjusts on mobile.
const STYLES_CHILDREN = css`
min-width: 10%;
width: 100%;
height: 100%;
overflow-wrap: break-word;
padding: 11px 0px 14px 8px;
font-family: ${Constants.font.semiBold};
font-weight: 400;
font-size: 14px;
line-height: 1.225;
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
@media (max-width: ${Constants.sizes.mobile}px) {
display: none;
}
`;
const STYLES_ICON_ELEMENT = css`
height: 40px;
width: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
svg {
transform: rotate(0deg);
transition: 200ms ease transform;
}
@media (max-width: ${Constants.sizes.mobile}px) {
margin: 0 8px 0 16px;
}
`;
const Item = ({
data,
id,
activeIds,
level,
children,
showActive,
decorator,
onToggleShow,
onNavigateTo,
}) => {
return (
{onToggleShow ? (
) : null}
onNavigateTo({ id }, data)}>
{IconMap[decorator]}
onNavigateTo({ id }, data)}
style={{
color: activeIds[id] ? Constants.system.brand : null,
}}
>
{children}
);
};
class NodeReference extends React.Component {
state = {
showTreeChildren: false,
};
_handleToggleShow = () => {
this.setState({ showTreeChildren: !this.state.showTreeChildren });
};
render() {
const {
id,
activeId,
activeIds,
level,
children,
treeChildren,
decorator,
onNavigateTo,
data,
} = this.props;
const { showTreeChildren } = this.state;
let showActive = showTreeChildren || activeIds[id];
let showChildren = showActive && treeChildren && treeChildren.length;
return (
-
{children}
{showChildren
? treeChildren.map((child) => {
if (!child) {
return null;
}
if (child.ignore) {
return null;
}
return (
{child.name}
);
})
: null}
);
}
}
export default class ApplicationNavigation extends React.Component {
render() {
return (
);
}
}