diff --git a/src/components/profile/ProfileSidebarSettings/styles.module.scss b/src/components/profile/ProfileSidebarSettings/styles.module.scss index d5aa4618..63a90b95 100644 --- a/src/components/profile/ProfileSidebarSettings/styles.module.scss +++ b/src/components/profile/ProfileSidebarSettings/styles.module.scss @@ -1,7 +1,6 @@ @import "src/styles/variables"; .wrap { - @include sidebar_content(600px); display: flex; align-items: center; justify-content: center; diff --git a/src/components/sidebar/SidebarStack/index.tsx b/src/components/sidebar/SidebarStack/index.tsx index e989c1d4..cd251ac4 100644 --- a/src/components/sidebar/SidebarStack/index.tsx +++ b/src/components/sidebar/SidebarStack/index.tsx @@ -1,5 +1,7 @@ import React, { FC, useMemo } from 'react'; import styles from './styles.module.scss'; +import { Button } from '~/components/input/Button'; +import { Filler } from '~/components/containers/Filler'; interface SidebarStackProps {} diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index bb866b81..d65c60b1 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -9,11 +9,10 @@ } .card { - @include sidebar_content(400px); - box-shadow: transparentize(white, 0.9) -1px 0; - max-width: 400px; - width: 100vw; + border-radius: $radius 0 0 $radius; + display: flex; + flex-direction: column; } .content { diff --git a/src/components/sidebar/SidebarStackCard/index.tsx b/src/components/sidebar/SidebarStackCard/index.tsx new file mode 100644 index 00000000..5e2b9003 --- /dev/null +++ b/src/components/sidebar/SidebarStackCard/index.tsx @@ -0,0 +1,31 @@ +import React, { FC, useMemo } from 'react'; +import styles from './styles.module.scss'; +import { Filler } from '~/components/containers/Filler'; +import { Button } from '~/components/input/Button'; + +interface SidebarStackCardProps { + width?: number; + headerFeature?: 'back' | 'close'; + title?: string; +} + +const SidebarStackCard: FC = ({ children, title, width, headerFeature }) => { + const style = useMemo(() => ({ maxWidth: width, flexBasis: width }), [width]); + + return ( +
+ {(headerFeature || title) && ( +
+ {!!title &&
{title}
}
+ + {headerFeature === 'back' &&
+ )} + + {children} +
+ ); +}; + +export { SidebarStackCard }; diff --git a/src/components/sidebar/SidebarStackCard/styles.module.scss b/src/components/sidebar/SidebarStackCard/styles.module.scss new file mode 100644 index 00000000..be618d92 --- /dev/null +++ b/src/components/sidebar/SidebarStackCard/styles.module.scss @@ -0,0 +1,17 @@ +@import "src/styles/variables"; + +.card { + width: 100vw; + max-width: 400px; + flex-basis: 400px; + flex: 1; +} + +.head { + @include row_shadow; + + display: flex; + flex-direction: row; + align-items: center; + padding: $gap $gap $gap $gap * 2; +} diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index 42fc883c..cfcfb11a 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -4,6 +4,7 @@ import { DialogComponentProps } from '~/types/modal'; import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu'; import { SidebarStack } from '~/components/sidebar/SidebarStack'; import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings'; +import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard'; interface ProfileSidebarProps extends DialogComponentProps {} @@ -11,8 +12,13 @@ const ProfileSidebar: VFC = ({ onRequestClose }) => { return ( - - + + + + + + + );