import * as React from 'react';
import { Carrier, Person, Route, Settings } from '@project44-manifest/react-icons';
import { createTheme } from '@project44-manifest/react-styles';
import {
Dropdown,
DropdownItem,
DropdownMenu,
SideNavigation,
SideNavigationContent,
SideNavigationFooter,
SideNavigationHeader,
SideNavigationMenu,
SideNavigationMenuGroup,
SideNavigationMenuItem,
} from '../../..';
function Logo() {
return (
);
}
export default {
title: 'Components/SideNavigation',
component: SideNavigation,
};
export const Default = () => {
const [isOpen, setIsOpen] = React.useState(true);
const handleSetOpen = React.useCallback(() => {
setIsOpen((prevOpen) => !prevOpen);
}, [setIsOpen]);
return (
} />
} />
}>
} />
}>
Profile
);
};
export const Themed = () => {
const indigo = createTheme({
colors: {
'background-primary': '#021C6B',
'background-secondary': 'rgba(199, 204, 240, 0.15)',
'border-primary': '#33488C',
'palette-grey-100': '#20367F',
'palette-grey-300': '#20367F',
'text-primary': '#FFFFFF',
'text-secondary': '#C7CCF0',
},
});
return (
} />
} />
}>
} />
}>
Profile
);
};