added sample settings page

src/components/input/InputText/index.tsx

@@ -18,6 +18,7 @@ const InputText: FC<IInputTextProps> = ({
   error,
   value = '',
   suffix,
+  prefix,
   ...props
 }) => {
   const { focused, onFocus, onBlur } = useFocusEvent();
@@ -43,6 +44,8 @@ const InputText: FC<IInputTextProps> = ({
   return (
     <InputWrapper title={title} error={translatedError} focused={focused} notEmpty={!!value}>
       <div className={classNames(styles.input, { [styles.has_error]: !!error })}>
+        {!!prefix && <div className={styles.prefix}>{prefix}</div>}
+
         <input
           {...props}
           onFocus={onFocus}

src/components/input/InputText/styles.module.scss

@@ -23,7 +23,7 @@
   }
 }
 
-.suffix {
+.suffix, .prefix{
   fill: currentColor;
   stroke: currentColor;
 

src/components/lab/LabHead/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 
 import { Group } from '~/components/containers/Group';
-import { LabHeadItem } from '~/components/lab/LabHeadItem';
+import { HorizontalMenu } from '~/components/menu/HorizontalMenu';
 import { LabNodesSort } from '~/types/lab';
 import { useLabContext } from '~/utils/context/LabContextProvider';
 
@@ -16,8 +16,8 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
 
   return (
     <Group className={styles.wrap} horizontal>
-      <div className={styles.group}>
-        <LabHeadItem
+      <HorizontalMenu>
+        <HorizontalMenu.Item
           color="green"
           icon="recent"
           active={sort === LabNodesSort.New}
@@ -25,9 +25,9 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.New)}
         >
           Свежие
-        </LabHeadItem>
+        </HorizontalMenu.Item>
 
-        <LabHeadItem
+        <HorizontalMenu.Item
           color="orange"
           icon="hot"
           active={sort === LabNodesSort.Hot}
@@ -35,9 +35,9 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.Hot)}
         >
           Популярные
-        </LabHeadItem>
+        </HorizontalMenu.Item>
 
-        <LabHeadItem
+        <HorizontalMenu.Item
           color="yellow"
           icon="star_full"
           isLoading={isLoading}
@@ -45,8 +45,8 @@ const LabHead: FC<IProps> = ({ isLoading }) => {
           onClick={() => setSort(LabNodesSort.Heroic)}
         >
           Важные
-        </LabHeadItem>
-      </div>
+        </HorizontalMenu.Item>
+      </HorizontalMenu>
     </Group>
   );
 };

src/components/lab/LabHead/styles.module.scss

@@ -3,21 +3,3 @@
 .wrap {
   border-radius: $radius;
 }
-
-.group {
-  @include inner_shadow;
-  display: flex;
-  background-color: $content_bg;
-  border-radius: $radius;
-
-  @include tablet {
-    flex-wrap: wrap;
-    align-items: stretch;
-    justify-content: center;
-    flex: 1;
-  }
-
-  & > * {
-    padding: $gap;
-  }
-}

src/components/menu/HorizontalMenu/index.tsx

@@ -1,22 +1,38 @@
-import React, { FC } from 'react';
+import React, { PropsWithChildren } from 'react';
 
 import classNames from 'classnames';
 
-import { Group } from '~/components/containers/Group';
 import { Icon } from '~/components/input/Icon';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';
 
-interface IProps {
-  icon: string;
-  color: 'green' | 'orange' | 'yellow';
+interface HorizontalMenuProps extends DivProps {}
+interface HorizontalMenuItemProps {
   isLoading?: boolean;
+  icon?: string;
+  color?: 'green' | 'orange' | 'yellow';
   active?: boolean;
   onClick?: () => void;
 }
 
-const LabHeadItem: FC<IProps> = ({ icon, color, children, isLoading, active, onClick }) => {
+function HorizontalMenu({ children, ...props }: HorizontalMenuProps) {
+  return (
+    <div {...props} className={classNames(styles.menu, props.className)}>
+      {children}
+    </div>
+  );
+}
+
+HorizontalMenu.Item = ({
+  icon,
+  color = 'green',
+  children,
+  isLoading,
+  active,
+  onClick,
+}: PropsWithChildren<HorizontalMenuItemProps>) => {
   if (isLoading) {
     return (
       <div className={styles.item} key="loading">
@@ -31,10 +47,9 @@ const LabHeadItem: FC<IProps> = ({ icon, color, children, isLoading, active, onC
       className={classNames(styles.item, { [styles.active]: active }, styles[color])}
       onClick={onClick}
     >
-      <Icon icon={icon} size={24} />
+      {!!icon && <Icon icon={icon} size={24} />}
       <span className={styles.text}>{children}</span>
     </div>
   );
 };
-
-export { LabHeadItem };
+export { HorizontalMenu };

src/components/menu/HorizontalMenu/styles.module.scss

@@ -1,8 +1,27 @@
 @import "src/styles/variables.scss";
 
+.menu {
+  @include inner_shadow;
+
+  display: flex;
+  background-color: $content_bg;
+  border-radius: $radius;
+
+  @include tablet {
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: center;
+    flex: 1;
+  }
+
+  & > * {
+    padding: $gap;
+  }
+}
+
 .item {
   flex: 0 0 auto;
-  padding: $gap * 0.5 $gap * 4 $gap * 0.5 $gap;
+  padding: $gap * 0.5 $gap  $gap * 0.5 $gap;
   fill: currentColor;
   color: darken(white, 50%);
   transition: color 0.25s;
@@ -43,7 +62,6 @@
 .text {
   font: $font_14_semibold;
   text-transform: uppercase;
-  padding-bottom: 1px;
   padding-left: $gap * 0.75;
   padding-right: $gap * 0.35;
 

src/components/menu/VerticalMenu/index.tsx

@@ -0,0 +1,32 @@
+import React, { PropsWithChildren } from 'react';
+
+import classNames from 'classnames';
+
+import { Card } from '~/components/containers/Card';
+import { DivProps, LinkProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface VerticalMenuProps extends DivProps {
+  appearance?: 'inset' | 'flat' | 'default';
+}
+
+interface VerticalMenuItemProps extends Omit<LinkProps, 'href'> {}
+
+function VerticalMenu({
+  children,
+  appearance = 'default',
+  ...props
+}: PropsWithChildren<VerticalMenuProps>) {
+  return (
+    <Card {...props} className={classNames(styles.menu, styles[appearance], props.className)}>
+      {children}
+    </Card>
+  );
+}
+
+VerticalMenu.Item = ({ ...props }: VerticalMenuItemProps) => (
+  <a {...props} className={classNames(styles.item, props.className)} />
+);
+
+export { VerticalMenu };

src/components/menu/VerticalMenu/styles.module.scss

@@ -0,0 +1,47 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+.menu {
+  border-radius: $radius;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+
+  &.flat {
+    box-shadow: none;
+  }
+
+  &.default {
+    @include outer_shadow;
+  }
+
+  &.inset {
+    @include inner_shadow;
+  }
+}
+
+a.item {
+  @include row_shadow;
+
+  color: inherit;
+  text-decoration: none;
+  list-style: none;
+  margin: 0 !important;
+  padding: $gap;
+  font: $font_16_semibold;
+  cursor: pointer;
+  background-color: transparentize($secondary, 1);
+  transition: background-color 0.25s;
+
+  &:hover {
+    background-color: transparentize($secondary, 0.5);
+  }
+
+  &:first-child {
+    border-radius: $radius $radius 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 $radius $radius;
+  }
+}

src/components/settings/SettingsMenu/index.tsx

@@ -0,0 +1,53 @@
+import React, { VFC } from 'react';
+
+import classNames from 'classnames';
+import Link from 'next/link';
+
+import { Filler } from '~/components/containers/Filler';
+import { Group } from '~/components/containers/Group';
+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';
+
+interface SettingsMenuProps {}
+
+const SettingsMenu: VFC<SettingsMenuProps> = () => (
+  <Group>
+    <ProfileSidebarHead />
+
+    <br />
+
+    <Group>
+      <VerticalMenu className={styles.menu}>
+        <Link href={URLS.SETTINGS.BASE} passHref>
+          <VerticalMenu.Item onClick={console.log}>Настройки</VerticalMenu.Item>
+        </Link>
+
+        <Link href={URLS.SETTINGS.NOTES} passHref>
+          <VerticalMenu.Item onClick={console.log}>Заметки</VerticalMenu.Item>
+        </Link>
+
+        <Link href={URLS.SETTINGS.TRASH} passHref>
+          <VerticalMenu.Item onClick={console.log}>Удалённые посты</VerticalMenu.Item>
+        </Link>
+      </VerticalMenu>
+
+      <br />
+
+      <ProfileStats />
+
+      <Group horizontal>
+        <Filler />
+
+        <Button color="outline" iconLeft="enter">
+          Выйти
+        </Button>
+      </Group>
+    </Group>
+  </Group>
+);
+
+export { SettingsMenu };