added sample settings page

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