muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 21:06:42 +07:00
Code Packages Activity Actions

added sample profile sidebar settings

Browse source
This commit is contained in:
Fedor Katurov 2022-01-14 12:29:51 +07:00
parent 14b93d5dbb
commit 01fac15a00
8 changed files with 132 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/containers/sidebars/ProfileSidebar/index.tsx
View file

@ -1,75 +1,19 @@
import React, { VFC } from 'react';
import { SidebarWrapper } from '~/containers/sidebars/SidebarWrapper';
import styles from './styles.module.scss';
import { DialogComponentProps } from '~/types/modal';
import markdown from '~/styles/common/markdown.module.scss';
import { Button } from '~/components/input/Button';
import { Filler } from '~/components/containers/Filler';
import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
import classNames from 'classnames';
import { Group } from '~/components/containers/Group';
import { Card } from '~/components/containers/Card';
import { Grid } from '~/components/containers/Grid';
import { Square } from '~/components/common/Square';
import { Padder } from '~/components/containers/Padder';
import { useUser } from '~/hooks/auth/useUser';
import { ProfileSidebarMenu } from '~/containers/profile/ProfileSidebarMenu';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
interface ProfileSidebarProps extends DialogComponentProps {}
const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
const { user } = useUser();
return (
<SidebarWrapper onClose={onRequestClose}>
<div className={styles.wrap}>
<div className={styles.content}>
<div>
<ProfileSidebarHead />
</div>
<Filler className={classNames(markdown.wrapper, styles.text)}>
<Group>
<ul className={styles.menu}>
<li>Настройки</li>
<li>Заметки</li>
<li>Удалённые посты</li>
</ul>
<Grid columns="2fr 1fr">
<Card>
<h4>1 год 2 месяца</h4>
<small>в убежище</small>
</Card>
<Card>
<Square>
<h4>24 поста</h4>
<small>Создано</small>
</Square>
</Card>
</Grid>
<Grid columns="1fr 2fr">
<Card>
<Square>
<h4>16545 лайка</h4>
<small>получено</small>
</Square>
</Card>
<Card>
<h4>123123 комментария</h4>
<small>под постами</small>
</Card>
</Grid>
</Group>
</Filler>
<Button round onClick={onRequestClose} color="secondary">
Закрыть
</Button>
</div>
</div>
<SidebarStack>
<ProfileSidebarMenu onClose={onRequestClose} />
<ProfileSidebarSettings />
</SidebarStack>
</SidebarWrapper>
);
};

54
src/containers/sidebars/ProfileSidebar/styles.module.scss
View file

@ -1,54 +0,0 @@
@import "src/styles/variables";
.wrap {
@include sidebar_content(400px);
}
.content {
border-radius: $radius;
height: 100%;
box-sizing: border-box;
overflow: auto;
display: flex;
min-height: 0;
flex-direction: column;
width: 100%;
max-width: 400px;
padding: $gap;
}
.text {
margin-top: $gap * 2;
}
.menu {
@include outer_shadow;
list-style: none;
border-radius: $radius;
padding: 0 !important;
& > li {
@include row_shadow;
list-style: none;
margin: 0 !important;
padding: $gap;
font: $font_16_semibold;
cursor: pointer;
background-color: transparentize($secondary, 1);
transition: background-color 0.25s;
&:hover {
background-color: transparentize($secondary, 0.5);
}
&:first-child {
border-radius: $radius $radius 0 0;
}
&:last-child {
border-radius: 0 0 $radius $radius;
}
}
}