Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-11 16:05:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix sidebar styling

Browse Source
This commit is contained in:
ajnart
2023-01-13 14:12:09 +09:00
parent e8554890e0
commit 90ee7f2cc7
1 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
View File

@@ -1,4 +1,4 @@
import { Card } from '@mantine/core'; import { Card, Group, Stack } from '@mantine/core';
import { RefObject } from 'react'; import { RefObject } from 'react';
import { useCardStyles } from '../../../layout/useCardStyles'; import { useCardStyles } from '../../../layout/useCardStyles';
import { useGridstack } from '../gridstack/use-gridstack'; import { useGridstack } from '../gridstack/use-gridstack';
@@ -9,18 +9,24 @@ interface DashboardSidebarProps extends DashboardSidebarInnerProps {
isGridstackReady: boolean; isGridstackReady: boolean;
} }
export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => ( export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => {
<Card const {
withBorder cx,
w={300} classes: { card: cardClass },
style={{ } = useCardStyles(false);
background: 'none',
borderStyle: 'dashed', return (
}} <Card
> p={0}
{isGridstackReady && <SidebarInner location={location} />} m={0}
</Card> radius="lg"
); className={cardClass}
w={300}
>
{isGridstackReady && <SidebarInner location={location} />}
</Card>
);
};
interface DashboardSidebarInnerProps { interface DashboardSidebarInnerProps {
location: 'right' | 'left'; location: 'right' | 'left';
@@ -37,17 +43,18 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
} = useCardStyles(false); } = useCardStyles(false);
return ( return (
<Card withBorder mih="100%" p={0} radius="lg" className={cardClass} ref={refs.wrapper}> <div
<div ref={refs.wrapper}
className="grid-stack grid-stack-sidebar" className="grid-stack grid-stack-sidebar"
style={{ transitionDuration: '0s', height: '100%' }} style={{
data-sidebar={location} transitionDuration: '0s',
// eslint-disable-next-line react/no-unknown-property }}
gs-min-row={minRow} data-sidebar={location}
> // eslint-disable-next-line react/no-unknown-property
<WrapperContent apps={apps} refs={refs} widgets={widgets} /> gs-min-row={minRow}
</div> >
</Card> <WrapperContent apps={apps} refs={refs} widgets={widgets} />
</div>
); );
}; };