feat: add sticky layout with slots
This commit is contained in:
parent
bc23361fb0
commit
e16b8cfe3f
24
src/layouts/Files.module.scss
Normal file
24
src/layouts/Files.module.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@import '../styles/colors.scss';
|
||||||
|
@import '../styles/sizes.scss';
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||||
|
grid-gap: 30px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidesWrap {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sides {
|
||||||
|
position: sticky;
|
||||||
|
top: $header-height + $body-vertical-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
.files {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 15px;
|
||||||
|
}
|
29
src/layouts/Files.tsx
Normal file
29
src/layouts/Files.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { PropsWithChildren, ReactNode } from 'react'
|
||||||
|
|
||||||
|
import styles from './Files.module.scss'
|
||||||
|
|
||||||
|
interface FilesProps {
|
||||||
|
left: ReactNode
|
||||||
|
right: ReactNode
|
||||||
|
content: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Files = ({
|
||||||
|
left,
|
||||||
|
right,
|
||||||
|
content,
|
||||||
|
children
|
||||||
|
}: PropsWithChildren<FilesProps>) => {
|
||||||
|
return (
|
||||||
|
<div className={styles.container}>
|
||||||
|
<div className={`${styles.sidesWrap} ${styles.files}`}>
|
||||||
|
<div className={styles.sides}>{left}</div>
|
||||||
|
</div>
|
||||||
|
<div className={styles.content}>{content}</div>
|
||||||
|
<div className={styles.sidesWrap}>
|
||||||
|
<div className={styles.sides}>{right}</div>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user