Skip to content

Commit

Permalink
adjust sidebar on mobile (#92)
Browse files Browse the repository at this point in the history
  • Loading branch information
@walbuc
walbuc authored Oct 9, 2024
2 parents 1fbf327 + 4804d83 commit 4c77d80
Showing 1 changed file with 128 additions and 94 deletions.
222 changes: 128 additions & 94 deletions src/components/SideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, {PropsWithChildren, useState, useEffect, useMemo} from "react";
import {Box, Flex, ActionIcon, Text, ScrollArea, Input, Group} from "@mantine/core";
import React, {PropsWithChildren, useState} from "react";
import {Box, Flex, ActionIcon, Text, ScrollArea, Input, Group, MantineTheme, useMantineTheme, Affix, ActionIconProps, Sx, packSx} from "@mantine/core";
import {CloseButton} from "@mantine/core";
import {createContext} from "../utils/create-context";
import {IconSearch} from "@tabler/icons-react";
import {DataSetSVG, IconChevronLeft, IconChevronRight} from "./icons";
import Graph from "../utils/graph";
import {LocaleSelector} from "./LocaleSelector";
import {useTranslation} from "../hooks/translation";
import {useDebouncedState, useDebouncedValue} from "@mantine/hooks";
import {useDebouncedState, useMediaQuery} from "@mantine/hooks";
import useBuildGraph from "../hooks/buildGraph";
import useCubeSearch from "../hooks/cubeSearch";

Expand Down Expand Up @@ -49,110 +49,144 @@ export function SideBarProvider(props: PropsWithChildren<{}>) {

type SidebarProps = {};

function SideBarControlBtn ({actionIconProps = {}}: {actionIconProps?: Partial<ActionIconProps>}) {
const {expanded, setExpanded} = useSideBar();

const sx: Sx = (t: MantineTheme) => ({
alignSelf: "center",
color: t.colorScheme === "dark" ? t.white : t.colors.gray[7],

});
if (expanded) return null;
return (
<ActionIcon
onClick={() => setExpanded(!expanded)}
variant="subtle"
{...actionIconProps}
sx={[sx, ...packSx(actionIconProps.sx)]}
>
<DataSetSVG />
</ActionIcon>
)
}

function SideBarControlBtnFixed () {
const actionIconProps: Partial<ActionIconProps> = {
sx: t => ({
backgroundColor: `${t.colorScheme === "dark" ? t.colors.dark[8] : t.colors.gray[1]} !important`,
padding: `calc(${t.spacing.xs} / 2)`,
borderRadius: t.radius.xl,
width: 50,
height: 50
})
}
return (
<Affix position={{left: "1rem", bottom: 150}}>
<SideBarControlBtn actionIconProps={actionIconProps}/>
</Affix>
)
}
function SideBar(props: PropsWithChildren<SidebarProps>) {
const {expanded, setExpanded} = useSideBar();
const {translate: t} = useTranslation();
const theme = useMantineTheme();
const smallerThanMd = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);

return (
<Box
id="dex-sidebar"
py="md"
sx={t => ({
height: "calc(100vh - 50px)",
backgroundColor: t.colorScheme === "dark" ? t.colors.dark[8] : t.colors.gray[1],
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
maxWidth: expanded ? 300 : 54,
padding: 0,
zIndex: 99,
boxSizing: "border-box",
[t.fn.smallerThan("md")]: {
position: "absolute",
width: expanded ? 300 : 54,
height: expanded ? "calc(100vh - 75px)" : 54,
bottom: expanded ? "unset" : t.spacing.md,
left: expanded ? "unset" : t.spacing.md,
overflow: "hidden",
paddingTop: expanded ? t.spacing.md : 0,
paddingBottom: expanded ? t.spacing.md : 0,
borderRadius: expanded ? 0 : "100%"
}
})}
>
<Flex h="100%" direction="column" justify="flex-start">
<Box px="sm" my={"sm"}>
<Flex direction="column" sx={{flex: 1}}>
<Flex align="center" justify="apart">
<ActionIcon
onClick={() => setExpanded(!expanded)}
variant="subtle"
sx={t => ({
alignSelf: "center",
color: t.colorScheme === "dark" ? t.white : t.colors.gray[7]
})}
>
<DataSetSVG />
</ActionIcon>
<Group
position="apart"
noWrap
<>
{smallerThanMd && <SideBarControlBtnFixed />}
<Box
id="dex-sidebar"
py="md"
sx={t => ({
height: "calc(100vh - 50px)",
backgroundColor: t.colorScheme === "dark" ? t.colors.dark[8] : t.colors.gray[1],
boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
maxWidth: expanded ? 300 : 54,
padding: 0,
zIndex: 99,
boxSizing: "border-box",
[t.fn.smallerThan("md")]: {
position: "absolute",
width: expanded ? 300 : 0,
height: expanded ? "calc(100vh - 50px)" : 0,
bottom: expanded ? "unset" : t.spacing.md,
left: expanded ? "unset" : t.spacing.md,
overflow: "hidden",
paddingTop: expanded ? t.spacing.md : 0,
paddingBottom: expanded ? t.spacing.md : 0,
borderRadius: expanded ? 0 : "100%"
}
})}
>
<Flex h="100%" direction="column" justify="flex-start">
<Box px="sm" my={"sm"}>
<Flex direction="column" sx={{flex: 1}}>
<Flex align="center" justify="apart">
<SideBarControlBtn />
<Group
position="apart"
noWrap
sx={{
overflow: "hidden",
whiteSpace: "nowrap",
transition:
"width 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
width: expanded ? 300 : 0
}}
>
<Text sx={t => ({color: t.colorScheme === "dark" ? t.white : t.black})} ml={"sm"}>
{t("params.label_dataset")}
</Text>
<LocaleSelector />
</Group>
</Flex>
<Box
my="md"
sx={{
overflow: "hidden",
whiteSpace: "nowrap",
transition:
"width 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
width: expanded ? 300 : 0
width: expanded ? "100%" : 0
}}
>
<Text sx={t => ({color: t.colorScheme === "dark" ? t.white : t.black})} ml={"sm"}>
{t("params.label_dataset")}
</Text>
<LocaleSelector />
</Group>
<Auto />
</Box>
<Box sx={{flexGrow: 1}}></Box>
</Flex>
<Box
my="md"
sx={{
overflow: "hidden",
whiteSpace: "nowrap",
transition:
"width 0.2s cubic-bezier(0.4, 0, 0.2, 1), margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
width: expanded ? "100%" : 0
}}
>
<Auto />
</Box>
<Box sx={{flexGrow: 1}}></Box>
</Flex>
</Box>
<ScrollArea
id="dex-select-cube-area"
sx={theme => ({
borderTopColor:
theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3],
borderTopWidth: "1px",
borderTopStyle: expanded ? "solid" : "none"
})}
>
<Box h={expanded ? "auto" : "0px"}>{props.children}</Box>
</ScrollArea>
<Group
align="center"
position={expanded ? "right" : "center"}
w="100%"
p="md"
sx={{alignSelf: "flex-end", marginTop: "auto"}}
noWrap
>
<ActionIcon
onClick={() => setExpanded(!expanded)}
variant="subtle"
mt="auto"
sx={t => ({alignSelf: "flex-end", color: t.colors.gray[7]})}
</Box>
<ScrollArea
id="dex-select-cube-area"
sx={theme => ({
borderTopColor:
theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[3],
borderTopWidth: "1px",
borderTopStyle: expanded ? "solid" : "none"
})}
>
{expanded ? <IconChevronLeft /> : <IconChevronRight />}
</ActionIcon>
</Group>
</Flex>
</Box>
<Box h={expanded ? "auto" : "0px"}>{props.children}</Box>
</ScrollArea>
<Group
align="center"
position={expanded ? "right" : "center"}
w="100%"
p="md"
sx={{alignSelf: "flex-end", marginTop: "auto"}}
noWrap
>
<ActionIcon
onClick={() => setExpanded(!expanded)}
variant="subtle"
mt="auto"
sx={t => ({alignSelf: "flex-end", color: t.colors.gray[7]})}
>
{expanded ? <IconChevronLeft /> : <IconChevronRight />}
</ActionIcon>
</Group>
</Flex>
</Box>
</>
);
}

Expand Down

0 comments on commit 4c77d80

Please sign in to comment.