fixed appearance for profile sidebar

src/components/profile/ProfileSidebarNotes/index.tsx

@@ -0,0 +1,23 @@
+import React, { VFC } from 'react';
+
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
+import { SettingsNotes } from '~/containers/settings/SettingsNotes';
+
+import styles from './styles.module.scss';
+
+interface ProfileSidebarNotesProps {}
+
+const ProfileSidebarNotes: VFC<ProfileSidebarNotesProps> = () => {
+  const { closeAllTabs } = useStackContext();
+
+  return (
+    <SidebarStackCard width={800} headerFeature="back" title="Заметки" onBackPress={closeAllTabs}>
+      <div className={styles.scroller}>
+        <SettingsNotes />
+      </div>
+    </SidebarStackCard>
+  );
+};
+
+export { ProfileSidebarNotes };

src/components/profile/ProfileSidebarNotes/styles.module.scss

@@ -0,0 +1,7 @@
+@import "src/styles/variables";
+
+.scroller {
+  flex: 1;
+  overflow: auto;
+  padding: $gap;
+}

src/components/settings/SettingsMenu/index.tsx

@@ -1,6 +1,5 @@
 import React, { VFC } from 'react';
 
-import classNames from 'classnames';
 import Link from 'next/link';
 
 import { Filler } from '~/components/containers/Filler';
@@ -9,9 +8,10 @@ import { Button } from '~/components/input/Button';
 import { VerticalMenu } from '~/components/menu/VerticalMenu';
 import { URLS } from '~/constants/urls';
 import { ProfileSidebarHead } from '~/containers/profile/ProfileSidebarHead';
-import styles from '~/containers/profile/ProfileSidebarMenu/styles.module.scss';
 import { ProfileStats } from '~/containers/profile/ProfileStats';
 
+import styles from './styles.module.scss';
+
 interface SettingsMenuProps {}
 
 const SettingsMenu: VFC<SettingsMenuProps> = () => (
@@ -35,9 +35,9 @@ const SettingsMenu: VFC<SettingsMenuProps> = () => (
         </Link>
       </VerticalMenu>
 
-      <br />
+      <div className={styles.stats}>
-
         <ProfileStats />
+      </div>
 
       <Group horizontal>
         <Filler />

src/components/settings/SettingsMenu/styles.module.scss

@@ -0,0 +1,21 @@
+@import "../../../styles/variables";
+
+.wrap {
+  padding: $gap;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.text {
+  margin-top: $gap * 2;
+}
+
+.stats {
+  margin-top: 1em;
+
+  @include tablet {
+    display: none;
+  }
+}

src/components/sidebar/SidebarStackCard/styles.module.scss

@@ -8,6 +8,8 @@
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  box-shadow: transparentize(black, 0.8) -5px 0 5px;
+  border-radius: $radius;
 }
 
 .head {

src/containers/profile/ProfileSidebarHead/index.tsx

@@ -6,6 +6,8 @@ import { ProfileAvatar } from '~/components/profile/ProfileAvatar';
 import { usePatchUser } from '~/hooks/auth/usePatchUser';
 import { useUser } from '~/hooks/auth/useUser';
 
+import styles from './styles.module.scss';
+
 interface ProfileSidebarHeadProps {}
 
 const ProfileSidebarHead: VFC<ProfileSidebarHeadProps> = () => {
@@ -17,7 +19,8 @@ const ProfileSidebarHead: VFC<ProfileSidebarHeadProps> = () => {
       <ProfileAvatar canEdit onChangePhoto={updatePhoto} photo={user.photo} size={72} />
 
       <Filler>
-        <h2>{user.fullname || user.username}</h2>
+        <div className={styles.name}>{user.fullname || user.username}</div>
+        <div className={styles.username}>{!!user.fullname && `~${user.username}`}</div>
       </Filler>
     </Group>
   );

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

@@ -0,0 +1,11 @@
+@import "src/styles/variables";
+
+.name {
+  font: $font_20_semibold;
+}
+
+.username {
+  margin-top: 2px;
+  opacity: 0.5;
+  font: $font_14_medium;
+}

src/containers/profile/ProfileSidebarMenu/index.tsx

@@ -37,13 +37,21 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
             <VerticalMenu.Item onClick={() => setActiveTab(2)}>Удалённые посты</VerticalMenu.Item>
           </VerticalMenu>
 
+          <div className={styles.stats}>
             <ProfileStats />
+          </div>
         </Group>
       </Filler>
 
-      <Button round onClick={onClose} color="secondary">
+      <Group className={styles.buttons}>
+        <Button round onClick={onClose} color="outline">
+          Выйти
+        </Button>
+
+        <Button round onClick={onClose} color="outline-white">
           Закрыть
         </Button>
+      </Group>
     </div>
   );
 };

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

@@ -11,3 +11,11 @@
 .text {
   margin-top: $gap * 2;
 }
+
+.buttons {
+  flex: 0;
+}
+
+.stats {
+  display: none;
+}

src/containers/sidebars/ProfileSidebar/index.tsx

@@ -1,5 +1,6 @@
 import React, { VFC } from 'react';
 
+import { ProfileSidebarNotes } from '~/components/profile/ProfileSidebarNotes';
 import { ProfileSidebarSettings } from '~/components/profile/ProfileSidebarSettings';
 import { SidebarStack } from '~/components/sidebar/SidebarStack';
 import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
@@ -19,6 +20,7 @@ const ProfileSidebar: VFC<ProfileSidebarProps> = ({ onRequestClose }) => {
 
         <SidebarStack.Cards>
           <ProfileSidebarSettings />
+          <ProfileSidebarNotes />
         </SidebarStack.Cards>
       </SidebarStack>
     </SidebarWrapper>

src/layouts/SettingsLayout/styles.module.scss

@@ -22,5 +22,6 @@
 
   @include tablet {
     margin-top: 0;
+    flex-direction: column;
   }
 }