From 01fac15a00e16eb1d733c838ec3477bdb9ceeaed Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 14 Jan 2022 12:29:51 +0700
Subject: [PATCH] added sample profile sidebar settings

---
 .../profile/ProfileSidebarMenu/index.tsx      | 28 --------
 .../ProfileSidebarMenu/styles.module.scss     | 47 -------------
 src/components/sidebar/SidebarStack/index.tsx | 26 +++++++
 .../sidebar/SidebarStack/styles.module.scss   | 30 ++++++++
 .../profile/ProfileSidebarMenu/index.tsx      | 67 ++++++++++++++++++
 .../ProfileSidebarMenu}/styles.module.scss    | 16 +----
 .../sidebars/ProfileSidebar/index.tsx         | 70 ++-----------------
 src/styles/_mixins.scss                       |  2 -
 8 files changed, 132 insertions(+), 154 deletions(-)
 delete mode 100644 src/components/profile/ProfileSidebarMenu/index.tsx
 delete mode 100644 src/components/profile/ProfileSidebarMenu/styles.module.scss
 create mode 100644 src/components/sidebar/SidebarStack/index.tsx
 create mode 100644 src/components/sidebar/SidebarStack/styles.module.scss
 create mode 100644 src/containers/profile/ProfileSidebarMenu/index.tsx
 rename src/containers/{sidebars/ProfileSidebar => profile/ProfileSidebarMenu}/styles.module.scss (73%)

diff --git a/src/components/profile/ProfileSidebarMenu/index.tsx b/src/components/profile/ProfileSidebarMenu/index.tsx
deleted file mode 100644
index 99d47d21..00000000
--- a/src/components/profile/ProfileSidebarMenu/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { FC } from 'react';
-import styles from './styles.module.scss';
-import { Icon } from '~/components/input/Icon';
-import { Anchor } from '~/components/common/Anchor';
-
-interface IProps {
-  path: string;
-}
-
-const ProfileSidebarMenu: FC<IProps> = ({ path }) => {
-  const cleaned = path.replace(/\/$/, '');
-
-  return (
-    <div className={styles.wrap}>
-      <Anchor className={styles.row} href={`${cleaned}/settings`}>
-        <Icon icon="settings" />
-        <span>Настройки</span>
-      </Anchor>
-
-      <div className={styles.row}>
-        <Icon icon="messages" />
-        <span>Сообщения</span>
-      </div>
-    </div>
-  );
-};
-
-export { ProfileSidebarMenu };
diff --git a/src/components/profile/ProfileSidebarMenu/styles.module.scss b/src/components/profile/ProfileSidebarMenu/styles.module.scss
deleted file mode 100644
index 91eedbdd..00000000
--- a/src/components/profile/ProfileSidebarMenu/styles.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-@import "src/styles/variables";
-
-.wrap {
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-  flex-direction: column;
-  margin: 0 $gap;
-  box-sizing: border-box;
-  box-shadow: $sidebar_border 0 0 0 1px;
-  border-radius: $radius;
-  background-color: transparentize(black, 0.9)
-}
-
-.row {
-  padding: $gap;
-  font: $font_18_semibold;
-  box-shadow: $sidebar_border 0 -1px;
-  cursor: pointer;
-  background-color: transparentize(black, 1);
-  transition: all 250ms;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 30px;
-  opacity: 0.5;
-  text-decoration: none;
-  fill: white;
-  color: white;
-
-  &:hover {
-    background-color: transparentize($wisegreen, 0.5);
-    opacity: 1;
-  }
-
-  &:first-child {
-    border-radius: $radius $radius 0 0;
-  }
-
-  &:last-child {
-    border-radius: 0 0 $radius $radius;
-  }
-
-  svg {
-    margin-right: $gap * 1.2;
-  }
-}
diff --git a/src/components/sidebar/SidebarStack/index.tsx b/src/components/sidebar/SidebarStack/index.tsx
new file mode 100644
index 00000000..e989c1d4
--- /dev/null
+++ b/src/components/sidebar/SidebarStack/index.tsx
@@ -0,0 +1,26 @@
+import React, { FC, useMemo } from 'react';
+import styles from './styles.module.scss';
+
+interface SidebarStackProps {}
+
+const SidebarStack: FC<SidebarStackProps> = ({ children }) => {
+  const nonEmptyChildren = useMemo(() => {
+    if (!children) {
+      return [];
+    }
+
+    return Array.isArray(children) ? children.filter(it => it) : [children];
+  }, [children]);
+
+  return (
+    <div className={styles.stack}>
+      {nonEmptyChildren.map((child, i) => (
+        <div className={styles.card} key={i}>
+          {child}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export { SidebarStack };
diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss
new file mode 100644
index 00000000..bb866b81
--- /dev/null
+++ b/src/components/sidebar/SidebarStack/styles.module.scss
@@ -0,0 +1,30 @@
+@import "src/styles/variables";
+
+.stack {
+  background: transparentize($content_bg, 0.1);
+  display: flex;
+  flex-direction: row-reverse;
+  width: auto;
+  border-radius: $radius 0 0 $radius;
+}
+
+.card {
+  @include sidebar_content(400px);
+
+  box-shadow: transparentize(white, 0.9) -1px 0;
+  max-width: 400px;
+  width: 100vw;
+}
+
+.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;
+}
diff --git a/src/containers/profile/ProfileSidebarMenu/index.tsx b/src/containers/profile/ProfileSidebarMenu/index.tsx
new file mode 100644
index 00000000..aa4c87d8
--- /dev/null
+++ b/src/containers/profile/ProfileSidebarMenu/index.tsx
@@ -0,0 +1,67 @@
+import React, { VFC } from 'react';
+import styles from './styles.module.scss';
+import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
+import { Filler } from '~/components/containers/Filler';
+import classNames from 'classnames';
+import markdown from '~/styles/common/markdown.module.scss';
+import { Group } from '~/components/containers/Group';
+import { Grid } from '~/components/containers/Grid';
+import { Card } from '~/components/containers/Card';
+import { Square } from '~/components/common/Square';
+import { Button } from '~/components/input/Button';
+
+interface ProfileSidebarMenuProps {
+  onClose: () => void;
+}
+
+const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
+  <div className={styles.wrap}>
+    <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={onClose} color="secondary">
+      Закрыть
+    </Button>
+  </div>
+);
+
+export { ProfileSidebarMenu };
diff --git a/src/containers/sidebars/ProfileSidebar/styles.module.scss b/src/containers/profile/ProfileSidebarMenu/styles.module.scss
similarity index 73%
rename from src/containers/sidebars/ProfileSidebar/styles.module.scss
rename to src/containers/profile/ProfileSidebarMenu/styles.module.scss
index b1605314..28d4ba6f 100644
--- a/src/containers/sidebars/ProfileSidebar/styles.module.scss
+++ b/src/containers/profile/ProfileSidebarMenu/styles.module.scss
@@ -1,20 +1,8 @@
-@import "src/styles/variables";
+@import "../../../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;
+  box-sizing: border-box;
 }
 
 .text {
diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx
index f235696b..42fc883c 100644
--- a/src/containers/sidebars/ProfileSidebar/index.tsx
+++ b/src/containers/sidebars/ProfileSidebar/index.tsx
@@ -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>
   );
 };
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 1bc67ece..961dccb3 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -164,8 +164,6 @@
   flex: 0 1 $width;
   max-width: 100vw;
   position: relative;
-  background: transparentize($content_bg, 0.1);
-  box-shadow: transparentize(white, 0.95) -1px 0;
   border-radius: $radius 0 0 $radius;
 }