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

added working profile sidebar

Browse source
This commit is contained in:
Fedor Katurov 2022-02-15 16:11:29 +07:00
parent c6c7dbe75d
commit 07b4874f69
16 changed files with 202 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/containers/profile/ProfileSidebarMenu/index.tsx
View file

@ -8,6 +8,7 @@ import { Filler } from '~/components/containers/Filler';
import { Grid } from '~/components/containers/Grid';
import { Group } from '~/components/containers/Group';
import { Button } from '~/components/input/Button';
import { useStackContext } from '~/components/sidebar/SidebarStack';
import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
import markdown from '~/styles/common/markdown.module.scss';
@ -17,54 +18,58 @@ interface ProfileSidebarMenuProps {
onClose: () => void;
}
const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
<div className={styles.wrap}>
<div>
<ProfileSidebarHead />
const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
const { setActiveTab } = useStackContext();
return (
<div className={styles.wrap}>
<div>
<ProfileSidebarHead />
</div>
<Filler className={classNames(markdown.wrapper, styles.text)}>
<Group>
<ul className={styles.menu}>
<li onClick={() => setActiveTab(0)}>Настройки</li>
<li onClick={() => setActiveTab(1)}>Заметки</li>
<li onClick={() => setActiveTab(2)}>Удалённые посты</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={onClose} color="secondary">
Закрыть
</Button>
</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={onClose} color="secondary">
Закрыть
</Button>
</div>
);
);
};
export { ProfileSidebarMenu };

3
src/containers/profile/ProfileSidebarMenu/styles.module.scss
View file

@ -3,6 +3,9 @@
.wrap {
padding: $gap;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
}
.text {

2
src/containers/profile/ProfileTabs/index.tsx
View file

@ -13,7 +13,7 @@ const ProfileTabs: FC<IProps> = ({ is_own }) => {
return (
<div className={styles.wrap}>
<Tabs.List items={items} />
<Tabs.Horizontal items={items} />
</div>
);
};

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

@ -1,5 +1,6 @@
import React, { VFC } from 'react';
import { Tabs } from '~/components/dialogs/Tabs';
import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
import { SidebarStack } from '~/components/sidebar/SidebarStack';
import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
@ -13,13 +14,13 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
return (
<SidebarWrapper onClose={onRequestClose}>
<SidebarStack>
<SidebarStackCard headerFeature="close" title="Профиль">
<SidebarStackCard headerFeature="close" title="Профиль" onBackPress={onRequestClose}>
<ProfileSidebarMenu onClose={onRequestClose} />
</SidebarStackCard>
<SidebarStackCard width={600} headerFeature="back" title="Настройки">
<SidebarStack.Cards>
<ProfileSidebarSettings />
</SidebarStackCard>
</SidebarStack.Cards>
</SidebarStack>
</SidebarWrapper>
);

4
src/containers/sidebars/SidebarWrapper/index.tsx
View file

@ -8,9 +8,10 @@ import styles from './styles.module.scss';
interface IProps {
onClose?: () => void;
closeOnBackdropClick?: boolean;
}
const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
const SidebarWrapper: FC<IProps> = ({ children, onClose, closeOnBackdropClick = true }) => {
const ref = useRef<HTMLDivElement>(null);
useCloseOnEscape(onClose);
@ -24,6 +25,7 @@ const SidebarWrapper: FC<IProps> = ({ children, onClose }) => {
return (
<div className={styles.wrapper} ref={ref}>
{closeOnBackdropClick && <div className={styles.backdrop} onClick={onClose} />}
{children}
</div>
);

10
src/containers/sidebars/SidebarWrapper/styles.module.scss
View file

@ -23,3 +23,13 @@
z-index: 4;
}
}
.backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
cursor: pointer;
}