Archives/Athou_commafeed
1
0
Fork 1
mirror of https://github.com/Athou/commafeed.git synced 2026-03-21 21:37:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix sidebar scrolling (#1084)

Browse Source
This commit is contained in:
Athou
2023-06-17 01:14:54 +02:00
parent fa06d321d5
commit 437401e73f
1 changed files with 22 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
commafeed-client/src/pages/app/Layout.tsx
View File

@@ -13,7 +13,7 @@ import {
Title, Title,
useMantineTheme, useMantineTheme,
} from "@mantine/core" } from "@mantine/core"
import { useViewportSize } from "@mantine/hooks" import { useMediaQuery, useViewportSize } from "@mantine/hooks"
import { Constants } from "app/constants" import { Constants } from "app/constants"
import { redirectToAdd, redirectToRootCategory } from "app/slices/redirect" import { redirectToAdd, redirectToRootCategory } from "app/slices/redirect"
import { reloadTree, setMobileMenuOpen, setSidebarWidth } from "app/slices/tree" import { reloadTree, setMobileMenuOpen, setSidebarWidth } from "app/slices/tree"
@@ -43,7 +43,7 @@ const sidebarRightBorderWidth = "1px"
const useStyles = createStyles((theme, props: LayoutProps) => ({ const useStyles = createStyles((theme, props: LayoutProps) => ({
sidebarContentResizeWrapper: { sidebarContentResizeWrapper: {
padding: sidebarPadding, padding: sidebarPadding,
minHeight: "100vh", minHeight: `calc(100vh - ${Constants.layout.headerHeight}px)`,
}, },
sidebarContent: { sidebarContent: {
maxWidth: `calc(${props.sidebarWidth}px - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`, maxWidth: `calc(${props.sidebarWidth}px - ${sidebarPadding} * 2 - ${sidebarRightBorderWidth})`,
@@ -87,6 +87,7 @@ export default function Layout(props: LayoutProps) {
const theme = useMantineTheme() const theme = useMantineTheme()
const viewport = useViewportSize() const viewport = useViewportSize()
const { loading } = useAppLoading() const { loading } = useAppLoading()
const mobile = !useMediaQuery(`(min-width: ${Constants.layout.mobileBreakpoint})`)
const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen) const mobileMenuOpen = useAppSelector(state => state.tree.mobileMenuOpen)
const sidebarHidden = props.sidebarWidth === 0 const sidebarHidden = props.sidebarWidth === 0
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
@@ -135,26 +136,25 @@ export default function Layout(props: LayoutProps) {
hidden={sidebarHidden || !mobileMenuOpen} hidden={sidebarHidden || !mobileMenuOpen}
width={{ md: props.sidebarWidth }} width={{ md: props.sidebarWidth }}
> >
<Resizable <Navbar.Section grow component={ScrollArea} mx={mobile ? 0 : "-sm"} px={mobile ? 0 : "sm"}>
enable={{ <Resizable
top: false, enable={{
right: true, top: false,
bottom: false, right: !mobile,
left: false, bottom: false,
topRight: false, left: false,
bottomRight: false, topRight: false,
bottomLeft: false, bottomRight: false,
topLeft: false, bottomLeft: false,
}} topLeft: false,
onResize={(e, dir, el) => handleResize(el)} }}
minWidth={120} onResize={(e, dir, el) => handleResize(el)}
> minWidth={120}
<Box className={classes.sidebarContentResizeWrapper}> className={classes.sidebarContentResizeWrapper}
<Navbar.Section grow component={ScrollArea} mx="-xs" px="xs"> >
<Box className={classes.sidebarContent}>{props.sidebar}</Box> <Box className={classes.sidebarContent}>{props.sidebar}</Box>
</Navbar.Section> </Resizable>
</Box> </Navbar.Section>
</Resizable>
</Navbar> </Navbar>
} }
header={ header={