added working profile sidebar

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -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 };

src/containers/profile/ProfileSidebarMenu/styles.module.scss

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

src/containers/profile/ProfileTabs/index.tsx

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