Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-10 07:25:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use tabs instead of spaces

Browse Source
This commit is contained in:
Sonny
2024-10-07 01:33:59 +02:00
parent f425decf2c
commit eea9732100
197 changed files with 5206 additions and 5209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
inertia/pages/dashboard.tsx
View File

@@ -14,131 +14,131 @@ import { rgba } from '~/lib/color';
import { CollectionWithLinks } from '~/types/app';
interface DashboardPageProps {
collections: CollectionWithLinks[];
activeCollection: CollectionWithLinks;
collections: CollectionWithLinks[];
activeCollection: CollectionWithLinks;
}
const SideBar = styled.div<{
floating?: boolean;
opened: boolean;
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',
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',
},
'&::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%',
left: opened ? 0 : '-100%',
}));
const RightSideBar = styled(SideBar)(({ opened }) => ({
right: opened ? 0 : '-100%',
alignItems: 'flex-end',
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,
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 isMobile = useScreenType('mobile');
const isTablet = useScreenType('tablet');
const {
isShowing: isNavigationOpen,
open: openNavigation,
close: closeNavigation,
} = useToggle();
const {
isShowing: isCollectionListOpen,
open: openCollectionList,
close: closeCollectionList,
} = useToggle();
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 handleSwipeLeft = () => {
if (!isMobile && !isTablet) return;
if (isNavigationOpen) {
closeNavigation();
} else {
openCollectionList();
}
};
const handleSwipeRight = () => {
if (!isMobile && !isTablet) return;
if (isCollectionListOpen) {
closeCollectionList();
} else {
openNavigation();
}
};
const handleSwipeRight = () => {
if (!isMobile && !isTablet) return;
if (isCollectionListOpen) {
closeCollectionList();
} else {
openNavigation();
}
};
const handlers = useSwipeable({
trackMouse: true,
onSwipedLeft: handleSwipeLeft,
onSwipedRight: handleSwipeRight,
});
const handlers = useSwipeable({
trackMouse: true,
onSwipedLeft: handleSwipeLeft,
onSwipedRight: handleSwipeRight,
});
useEffect(() => {
if (!isMobile && !isTablet) {
closeCollectionList();
closeNavigation();
}
}, [isMobile, isTablet, closeCollectionList, closeNavigation]);
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>
);
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} />;