my-links/inertia/pages/dashboard.tsx

import styled from '@emotion/styled';
import { ReactNode, useEffect } from 'react';
import { CiMenuBurger } from 'react-icons/ci';
import { useSwipeable } from 'react-swipeable';
import CollectionContainer from '~/components/dashboard/collection/collection_container';
import CollectionList from '~/components/dashboard/collection/list/collection_list';
import DashboardProviders from '~/components/dashboard/dashboard_provider';
import SideNavigation from '~/components/dashboard/side_nav/side_navigation';
import SwiperHandler from '~/components/dashboard/swiper_handler';
import DashboardLayout from '~/components/layouts/dashboard_layout';
import useToggle from '~/hooks/use_modal';
import useScreenType from '~/hooks/viewport/use_screen_type';
import { rgba } from '~/lib/color';
import { CollectionWithLinks } from '~/types/app';

interface DashboardPageProps {
	collections: CollectionWithLinks[];
	activeCollection: CollectionWithLinks;
}

const SideBar = styled.div<{
	floating?: boolean;
	opened: boolean;
}>(({ theme, opened, floating = false }) => ({
	zIndex: 9,
	position: floating ? 'absolute' : 'unset',
	top: 0,
	height: '100%',
	width: opened ? '100%' : 'fit-content',
	display: 'flex',
	flexDirection: 'column',
	transition: 'left 0.15s, right 0.15s',

	'&::before': {
		zIndex: -1,
		position: floating ? 'absolute' : 'unset',
		top: 0,
		left: 0,
		height: '100%',
		width: '100%',
		background: rgba(theme.colors.black, 0.35),
		backdropFilter: 'blur(0.1em)',
		content: '""',
		display: opened ? 'block' : 'none',
	},
}));

const LeftSideBar = styled(SideBar)(({ opened }) => ({
	left: opened ? 0 : '-100%',
}));

const RightSideBar = styled(SideBar)(({ opened }) => ({
	right: opened ? 0 : '-100%',
	alignItems: 'flex-end',
}));

const BugerIcon = styled(CiMenuBurger)(({ theme }) => ({
	cursor: 'pointer',
	height: '24px',
	minHeight: 'fit-content',
	width: '24px',
	minWidth: 'fit-content',
	color: theme.colors.primary,
}));

function DashboardPage(props: Readonly<DashboardPageProps>) {
	const isMobile = useScreenType('mobile');
	const isTablet = useScreenType('tablet');

	const {
		isShowing: isNavigationOpen,
		open: openNavigation,
		close: closeNavigation,
	} = useToggle();
	const {
		isShowing: isCollectionListOpen,
		open: openCollectionList,
		close: closeCollectionList,
	} = useToggle();

	const handleSwipeLeft = () => {
		if (!isMobile && !isTablet) return;
		if (isNavigationOpen) {
			closeNavigation();
		} else {
			openCollectionList();
		}
	};

	const handleSwipeRight = () => {
		if (!isMobile && !isTablet) return;
		if (isCollectionListOpen) {
			closeCollectionList();
		} else {
			openNavigation();
		}
	};

	const handlers = useSwipeable({
		trackMouse: true,
		onSwipedLeft: handleSwipeLeft,
		onSwipedRight: handleSwipeRight,
	});

	useEffect(() => {
		if (!isMobile && !isTablet) {
			closeCollectionList();
			closeNavigation();
		}
	}, [isMobile, isTablet, closeCollectionList, closeNavigation]);

	return (
		<DashboardProviders
			collections={props.collections}
			activeCollection={props.activeCollection}
		>
			<SwiperHandler {...handlers}>
				<LeftSideBar
					opened={isNavigationOpen}
					floating={isMobile || isTablet}
					onClick={closeNavigation}
				>
					<SideNavigation />
				</LeftSideBar>
				<CollectionContainer
					openNavigationItem={
						<BugerIcon css={{ marginRight: '1em' }} onClick={openNavigation} />
					}
					openCollectionItem={<BugerIcon onClick={openCollectionList} />}
					showButtons={isMobile || isTablet}
				/>
				<RightSideBar
					opened={isCollectionListOpen}
					floating={isMobile || isTablet}
					onClick={closeCollectionList}
				>
					<CollectionList />
				</RightSideBar>
			</SwiperHandler>
		</DashboardProviders>
	);
}

DashboardPage.layout = (page: ReactNode) => <DashboardLayout children={page} />;
export default DashboardPage;