2021-02-04 04:34:23 +01:00
|
|
|
import classNames from 'classnames';
|
2021-02-08 00:25:27 +01:00
|
|
|
import { useRouter } from 'next/router';
|
2021-02-04 04:34:23 +01:00
|
|
|
import React, { useContext } from 'react';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux';
|
2021-02-05 02:06:00 +01:00
|
|
|
import TriangleSVG from '../../assets/svgs/triangle.svg';
|
2021-02-10 09:38:27 +01:00
|
|
|
import { UI } from '../../constants';
|
2021-02-04 04:34:23 +01:00
|
|
|
import { ScreenContext } from '../../contexts/screen';
|
2021-02-10 09:38:27 +01:00
|
|
|
import { slugify } from '../../services/cms';
|
2021-02-09 05:31:56 +01:00
|
|
|
import {
|
|
|
|
collapseSideMenu,
|
|
|
|
expandSideMenu,
|
|
|
|
PageType,
|
|
|
|
} from '../../state/navigation';
|
2021-02-04 04:34:23 +01:00
|
|
|
import { IState } from '../../state/reducers';
|
|
|
|
|
2021-02-05 02:06:00 +01:00
|
|
|
export enum SideBarMode {
|
|
|
|
MENU = 'MENU',
|
|
|
|
LABEL = 'LABEL',
|
|
|
|
}
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
mode: SideBarMode;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function SideMenuSideBar({ mode }: Props) {
|
2021-02-09 05:31:56 +01:00
|
|
|
const { isMobile, isTablet, isHuge } = useContext(ScreenContext);
|
2021-02-10 09:38:27 +01:00
|
|
|
const {
|
|
|
|
sideMenuExpanded: expanded,
|
|
|
|
pageType,
|
|
|
|
postTitle,
|
|
|
|
pages,
|
|
|
|
} = useSelector((state: IState) => state.navigation);
|
2021-02-05 02:06:00 +01:00
|
|
|
|
2021-02-08 00:25:27 +01:00
|
|
|
const router = useRouter();
|
2021-02-04 04:34:23 +01:00
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
2021-02-10 09:38:27 +01:00
|
|
|
const selectedSideMenuItem = Object.values(pages ?? {}).find(
|
|
|
|
item => slugify(item.id) === router.asPath,
|
2021-02-08 00:25:27 +01:00
|
|
|
)?.label;
|
|
|
|
|
2021-02-09 05:31:56 +01:00
|
|
|
const isBlog = pageType === PageType.BLOG;
|
|
|
|
const isPost = pageType === PageType.POST;
|
2021-02-09 05:51:32 +01:00
|
|
|
const label = isPost
|
|
|
|
? postTitle?.substr(0, 120)
|
|
|
|
: isBlog
|
|
|
|
? 'Blog'
|
|
|
|
: selectedSideMenuItem;
|
2021-02-09 05:31:56 +01:00
|
|
|
const isCollapsible = (isTablet || isMobile) && !isPost && !isBlog;
|
2021-02-08 00:25:27 +01:00
|
|
|
|
2021-02-05 02:06:00 +01:00
|
|
|
const toggleSideMenu = () =>
|
|
|
|
dispatch(expanded ? collapseSideMenu() : expandSideMenu());
|
|
|
|
|
2021-02-04 04:34:23 +01:00
|
|
|
return (
|
|
|
|
<div
|
2021-02-05 02:06:00 +01:00
|
|
|
style={{
|
|
|
|
width: `${UI.SIDE_MENU_SIDE_BAR_WIDTH_PX}px`,
|
|
|
|
}}
|
2021-02-04 04:34:23 +01:00
|
|
|
className={classNames(
|
2021-02-05 02:06:00 +01:00
|
|
|
'flex flex-col justify-between items-center h-full bg-blue-300 px-4 py-6 border-l border-black',
|
|
|
|
isHuge ? 'text-3xl' : 'w-12 text-2xl',
|
|
|
|
mode === SideBarMode.LABEL && 'border-r border-b',
|
|
|
|
mode === SideBarMode.MENU && !expanded && 'border-r',
|
2021-02-04 04:34:23 +01:00
|
|
|
)}
|
|
|
|
>
|
|
|
|
<div>
|
|
|
|
{isCollapsible && (
|
2021-02-09 03:20:15 +01:00
|
|
|
<TriangleSVG
|
2021-02-09 05:31:56 +01:00
|
|
|
onClick={() => isCollapsible && toggleSideMenu()}
|
2021-02-09 03:20:15 +01:00
|
|
|
className={classNames(
|
|
|
|
'h-4 transform outline-none duration-300 cursor-pointer',
|
|
|
|
expanded ? 'rotate-180' : '-rotate-60',
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
)}
|
2021-02-09 05:31:56 +01:00
|
|
|
{(isBlog || isPost) && !isCollapsible && (
|
|
|
|
<a href={isPost ? '/blog' : '/'}>
|
2021-02-09 04:22:35 +01:00
|
|
|
<TriangleSVG
|
|
|
|
className={classNames(
|
|
|
|
'h-4 transform outline-none duration-300 rotate-180 cursor-pointer',
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
</a>
|
2021-02-04 04:34:23 +01:00
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
2021-02-04 06:42:15 +01:00
|
|
|
<div
|
|
|
|
className={classNames(
|
|
|
|
'flex items-center justify-start w-0 h-0 duration-300 transform -rotate-90',
|
|
|
|
)}
|
|
|
|
>
|
2021-02-11 06:26:56 +01:00
|
|
|
<span className="whitespace-nowrap">
|
2021-02-08 00:25:27 +01:00
|
|
|
{mode === SideBarMode.LABEL ? label : 'Menu'}
|
2021-02-04 04:34:23 +01:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|