added legal pages, resized tablet view, fixed prettier

src/components/Sidebar/Author/Author.tsx

@@ -2,9 +2,9 @@ import React from "react";
 
 import { Link } from "gatsby";
 
+import * as styles from "./Author.module.scss";
 import { Image } from "@/components/Image";
 
-import * as styles from "./Author.module.scss";
 
 type Props = {
   author: {

src/components/Sidebar/Contacts/Contacts.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 
+import * as styles from "./Contacts.module.scss";
 import { Icon } from "@/components/Icon";
 import { ICONS } from "@/constants";
 import { Dictionary } from "@/types";
 import { getContactHref, getIcon } from "@/utils";
 
-import * as styles from "./Contacts.module.scss";
 
 type Props = {
   contacts: Dictionary<string>;

src/components/Sidebar/Menu/Menu.tsx

@@ -14,13 +14,9 @@ type Props = {
 const Menu: React.FC<Props> = ({ menu }: Props) => (
   <nav className={styles.menu}>
     <ul className={styles.list}>
-      {menu.map((item) => (
+      {menu?.map((item) => (
         <li className={styles.item} key={item.path}>
-          <Link
-            to={item.path}
-            className={styles.link}
-            activeClassName={styles.active}
-          >
+          <Link to={item.path} className={styles.link} activeClassName={styles.active}>
             {item.label}
           </Link>
         </li>

src/components/Sidebar/Sidebar.module.scss

@@ -12,7 +12,7 @@
 
 @include breakpoint-sm {
   .sidebar {
-    lost-column: 5/12;
+    lost-column: 3/12;
 
     .inner {
       @include padding(1.25, 0.75, 0);
@@ -40,8 +40,6 @@
 @include breakpoint-md {
   .sidebar {
     lost-column: 1/4;
-    // TODO: column to 1/4?
-    // lost-column: 1/3;?
 
     .inner {
       @include padding-equal(1.5);

src/components/Sidebar/Sidebar.tsx

@@ -1,20 +1,19 @@
 import React from "react";
 
-import { useSiteMetadata } from "@/hooks";
-
 import { Author } from "./Author";
 import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
 import { Menu } from "./Menu";
 
 import * as styles from "./Sidebar.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 type Props = {
   isIndex?: boolean;
 };
 
 const Sidebar = ({ isIndex }: Props) => {
-  const { author, copyright, menu } = useSiteMetadata();
+  const { author, copyright, menu, legalMenu } = useSiteMetadata();
 
   return (
     <div className={styles.sidebar}>
@@ -23,6 +22,7 @@ const Sidebar = ({ isIndex }: Props) => {
         <Menu menu={menu} />
         <Contacts contacts={author.contacts} />
         <Copyright copyright={copyright} />
+        <Menu menu={legalMenu} />
       </div>
     </div>
   );

src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -138,6 +138,9 @@ exports[`Sidebar renders correctly 1`] = `
     <div>
       All rights reserved.
     </div>
+    <nav>
+      <ul />
+    </nav>
   </div>
 </div>
 `;