added sample settings page

src/layouts/BorisLayout/index.tsx

@@ -1,5 +1,7 @@
 import React, { FC } from 'react';
 
+import { useRouter } from 'next/router';
+
 import { BorisSidebar } from '~/components/boris/BorisSidebar';
 import { Superpower } from '~/components/boris/Superpower';
 import { Card } from '~/components/containers/Card';
@@ -8,6 +10,7 @@ import { Padder } from '~/components/containers/Padder';
 import { Sticky } from '~/components/containers/Sticky';
 import { Button } from '~/components/input/Button';
 import { Dialog } from '~/constants/modal';
+import { URLS } from '~/constants/urls';
 import { BorisComments } from '~/containers/boris/BorisComments';
 import { Container } from '~/containers/main/Container';
 import { SidebarRouter } from '~/containers/main/SidebarRouter';
@@ -28,6 +31,7 @@ type IProps = {
 const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLoadingStats }) => {
   const { isUser } = useAuthProvider();
   const openProfileSidebar = useShowModal(Dialog.ProfileSidebar);
+  const { push } = useRouter();
 
   return (
     <Container>
@@ -46,10 +50,19 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
           <Card className={styles.content}>
             <Superpower>
               <Padder>
-                <h2>Тестовые фичи</h2>
-                <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+                <Group>
+                  <h2>Тестовые фичи</h2>
+                  <div>
+                    <Button onClick={() => openProfileSidebar({})}>Профиль в сайдбаре</Button>
+                  </div>
+
+                  <div>
+                    <Button onClick={() => push(URLS.SETTINGS.BASE)}>
+                      Профиль на отдельной странице
+                    </Button>
+                  </div>
+                </Group>
               </Padder>
-              <Padder />
             </Superpower>
 
             <BorisComments />

src/layouts/MainLayout/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { LoadingProgress } from '~/components/common/LoadingProgress';
+import { Header } from '~/containers/main/Header';
+import { SidebarRouter } from '~/containers/main/SidebarRouter';
+
+import styles from './styles.module.scss';
+
+export const MainLayout = ({ children }) => (
+  <div className={styles.wrapper}>
+    <div className={styles.content}>
+      <Header />
+      {children}
+      <LoadingProgress />
+      <SidebarRouter />
+    </div>
+  </div>
+);

src/layouts/MainLayout/styles.module.scss

@@ -0,0 +1,21 @@
+@import "src/styles/variables";
+
+.wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1;
+}
+
+.content {
+  flex: 1;
+  position: relative;
+  width: 100%;
+  display: flex;
+  padding-bottom: 29px;
+  flex-direction: column;
+  align-items: center;
+}

src/layouts/SettingsLayout/index.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+
+import { Card } from '~/components/containers/Card';
+import { Sticky } from '~/components/containers/Sticky';
+import { SettingsMenu } from '~/components/settings/SettingsMenu';
+import { Container } from '~/containers/main/Container';
+
+import styles from './styles.module.scss';
+
+interface SettingsLayoutProps {}
+
+const SettingsLayout: FC<SettingsLayoutProps> = ({ children }) => {
+  return (
+    <Container className={styles.container}>
+      <Card className={styles.card}>
+        <div className={styles.menu}>
+          <Sticky>
+            <SettingsMenu />
+          </Sticky>
+        </div>
+
+        <div className={styles.content}>{children}</div>
+      </Card>
+    </Container>
+  );
+};
+
+export { SettingsLayout };

src/layouts/SettingsLayout/styles.module.scss

@@ -0,0 +1,26 @@
+@import "src/styles/variables";
+
+.menu {
+  flex: 1 0;
+  padding: $gap;
+}
+
+.content {
+  @include outer_shadow;
+
+  border-radius: $radius;
+  flex: 3;
+  background: $content_bg;
+}
+
+.card {
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  margin-top: $page_top_offset;
+  background: darken($content_bg, 2%);
+
+  @include tablet {
+    margin-top: 0;
+  }
+}