added working profile sidebar

src/components/dialogs/Tabs/index.tsx

@@ -13,7 +13,7 @@ const TabContext = createContext({
   setActiveTab: (activeTab: number) => {},
 });
 
-const List: VFC<TabProps> = ({ items }) => {
+const HorizontalList: VFC<TabProps> = ({ items }) => {
   const { activeTab, setActiveTab } = useContext(TabContext);
 
   return (
@@ -54,7 +54,7 @@ const Tabs = function({ children }) {
   return <TabContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabContext.Provider>;
 };
 
-Tabs.List = List;
+Tabs.Horizontal = HorizontalList;
 Tabs.Content = Content;
 
 export { Tabs };

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -3,12 +3,18 @@ import React, { FC } from 'react';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
 import { ProfileSettings } from '~/components/profile/ProfileSettings';
+import { useStackContext } from '~/components/sidebar/SidebarStack';
+import { SidebarStackCard } from '~/components/sidebar/SidebarStackCard';
 
 import styles from './styles.module.scss';
 
 interface IProps {}
 
-const ProfileSidebarSettings: FC<IProps> = () => (
+const ProfileSidebarSettings: FC<IProps> = () => {
+  const { closeAllTabs } = useStackContext();
+
+  return (
+    <SidebarStackCard width={600} headerFeature="back" title="Настройки" onBackPress={closeAllTabs}>
       <div className={styles.wrap}>
         <div className={styles.scroller}>
           <ProfileSettings />
@@ -16,10 +22,15 @@ const ProfileSidebarSettings: FC<IProps> = () => (
 
         <div className={styles.buttons}>
           <Filler />
-      <Button color="outline">Отмена</Button>
-      <Button>Сохранить</Button>
+          <Button color="outline" onClick={closeAllTabs}>
+            Отмена
+          </Button>
+
+          <Button color="secondary">Сохранить</Button>
         </div>
       </div>
+    </SidebarStackCard>
   );
+};
 
 export { ProfileSidebarSettings };

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

@@ -6,6 +6,7 @@
   justify-content: center;
   flex-direction: column;
   z-index: 4;
+  height: 100%;
 }
 
 .scroller {
@@ -15,6 +16,8 @@
 }
 
 .buttons {
+  @include outer_shadow;
+
   width: 100%;
   padding: $gap;
   box-sizing: border-box;

src/components/sidebar/SidebarStack/index.tsx

@@ -1,10 +1,36 @@
-import React, { FC, useMemo } from 'react';
+import React, {
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+
+import { isNil } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-interface SidebarStackProps {}
+interface SidebarStackProps extends PropsWithChildren<{}> {
+  initialTab?: number;
+}
+
+interface SidebarStackContextValue {
+  activeTab?: number;
+  setActiveTab: (val: number) => void;
+  closeAllTabs: () => void;
+}
+
+const SidebarStackContext = createContext<SidebarStackContextValue>({
+  activeTab: undefined,
+  setActiveTab: () => {},
+  closeAllTabs: () => {},
+});
+
+const SidebarCards: FC = ({ children }) => {
+  const { activeTab } = useStackContext();
 
-const SidebarStack: FC<SidebarStackProps> = ({ children }) => {
   const nonEmptyChildren = useMemo(() => {
     if (!children) {
       return [];
@@ -13,15 +39,26 @@ const SidebarStack: FC<SidebarStackProps> = ({ children }) => {
     return Array.isArray(children) ? children.filter(it => it) : [children];
   }, [children]);
 
+  if (isNil(activeTab) || !nonEmptyChildren[activeTab]) {
+    return null;
+  }
+
+  return <div className={styles.card}>{nonEmptyChildren[activeTab]}</div>;
+};
+
+const SidebarStack = function({ children, initialTab }: SidebarStackProps) {
+  const [activeTab, setActiveTab] = useState<number | undefined>(initialTab);
+  const closeAllTabs = useCallback(() => setActiveTab(undefined), []);
+
   return (
-    <div className={styles.stack}>
-      {nonEmptyChildren.map((child, i) => (
-        <div className={styles.card} key={i}>
-          {child}
-        </div>
-      ))}
-    </div>
+    <SidebarStackContext.Provider value={{ activeTab, setActiveTab, closeAllTabs }}>
+      <div className={styles.stack}>{children}</div>
+    </SidebarStackContext.Provider>
   );
 };
 
-export { SidebarStack };
+SidebarStack.Cards = SidebarCards;
+
+const useStackContext = () => useContext(SidebarStackContext);
+
+export { SidebarStack, useStackContext };

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

@@ -6,6 +6,12 @@
   flex-direction: row-reverse;
   width: auto;
   border-radius: $radius 0 0 $radius;
+
+  @include sidebar_stack_limit {
+    & > *:not(:last-child) {
+      display: none;
+    }
+  }
 }
 
 .card {

src/components/sidebar/SidebarStackCard/index.tsx

@@ -9,19 +9,28 @@ interface SidebarStackCardProps {
   width?: number;
   headerFeature?: 'back' | 'close';
   title?: string;
+  onBackPress?: () => void;
 }
 
-const SidebarStackCard: FC<SidebarStackCardProps> = ({ children, title, width, headerFeature }) => {
+const SidebarStackCard: FC<SidebarStackCardProps> = ({
+  children,
+  title,
+  width,
+  headerFeature,
+  onBackPress,
+}) => {
   const style = useMemo(() => ({ maxWidth: width, flexBasis: width }), [width]);
+  const backIcon = headerFeature === 'close' ? 'close' : 'right';
 
   return (
     <div style={style} className={styles.card}>
-      {(headerFeature || title) && (
+      {!!(headerFeature || title) && (
         <div className={styles.head}>
-          <Filler>{!!title && <h5>{title}</h5>}</Filler>
+          <Filler>{!!title && <h6>{title}</h6>}</Filler>
 
-          {headerFeature === 'back' && <Button color="link" iconRight="right" />}
-          {headerFeature === 'close' && <Button color="link" iconRight="close" />}
+          {!!(headerFeature && onBackPress) && (
+            <Button color="link" iconRight={backIcon} onClick={onBackPress} />
+          )}
         </div>
       )}
 

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

@@ -17,10 +17,12 @@
   flex-direction: row;
   align-items: center;
   padding: $gap $gap $gap $gap * 2;
+  height: 48px;
 }
 
 .content {
   flex: 1;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }

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,7 +18,10 @@ interface ProfileSidebarMenuProps {
   onClose: () => void;
 }
 
-const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
+const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => {
+  const { setActiveTab } = useStackContext();
+
+  return (
     <div className={styles.wrap}>
       <div>
         <ProfileSidebarHead />
@@ -26,9 +30,9 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
       <Filler className={classNames(markdown.wrapper, styles.text)}>
         <Group>
           <ul className={styles.menu}>
-          <li>Настройки</li>
-          <li>Заметки</li>
-          <li>Удалённые посты</li>
+            <li onClick={() => setActiveTab(0)}>Настройки</li>
+            <li onClick={() => setActiveTab(1)}>Заметки</li>
+            <li onClick={() => setActiveTab(2)}>Удалённые посты</li>
           </ul>
 
           <Grid columns="2fr 1fr">
@@ -66,5 +70,6 @@ const ProfileSidebarMenu: VFC<ProfileSidebarMenuProps> = ({ onClose }) => (
       </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>
   );
 };

src/containers/sidebars/ProfileSidebar/index.tsx

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

src/containers/sidebars/SidebarWrapper/index.tsx

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

src/containers/sidebars/SidebarWrapper/styles.module.scss

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

src/layouts/BorisLayout/index.tsx

@@ -1,12 +1,17 @@
 import React, { FC } from 'react';
 
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
+import { Superpower } from '~/components/boris/Superpower';
 import { Card } from '~/components/containers/Card';
 import { Group } from '~/components/containers/Group';
+import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
+import { Button } from '~/components/input/Button';
+import { Dialog } from '~/constants/modal';
 import { BorisComments } from '~/containers/boris/BorisComments';
 import { Container } from '~/containers/main/Container';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
+import { useShowModal } from '~/hooks/modal/useShowModal';
 import { BorisUsageStats } from '~/types/boris';
 import { useAuthProvider } from '~/utils/providers/AuthProvider';
 
@@ -22,6 +27,7 @@ type IProps = {
 
 const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
   const { isUser } = useAuthProvider();
+  const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
 
   return (
     <Container>
@@ -38,6 +44,14 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
 
         <div className={styles.container}>
           <Card className={styles.content}>
+            <Superpower>
+              <Padder>
+                <h2>Тестовые фичи</h2>
+                <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+              </Padder>
+              <Padder />
+            </Superpower>
+
             <BorisComments />
           </Card>
 

src/styles/_global.scss

@@ -129,11 +129,16 @@ button {
   outline: none;
 }
 
-h5, h4, h3, h2, h1 {
+h3, h2, h1 {
   color: white;
   font-weight: 800;
 }
 
+h6, h5, h4 {
+  color: white;
+  font-weight: 600;
+}
+
 h1 {
   font-size: 2em;
 }
@@ -154,6 +159,10 @@ h5 {
   font-size: 1.2em;
 }
 
+h6 {
+  font-size: 1em;
+}
+
 p {
   margin-bottom: $gap;
 

src/styles/_mixins.scss

@@ -85,6 +85,12 @@
   }
 }
 
+@mixin sidebar_stack_limit {
+  @media (max-width: 1000px) {
+    @content;
+  }
+}
+
 @mixin desktop {
   @media (max-width: $content_width) {
     @content;