added compact mode switcher

src/components/Sidebar/Menu/Menu.module.scss

@@ -2,8 +2,6 @@
 @import "../../../assets/scss/mixins";
 
 .menu {
-  @include margin-bottom(1);
-
   .list {
     list-style: none;
     @include margin-equal(0);

src/components/Sidebar/Sidebar.tsx

@@ -1,13 +1,12 @@
+import { useSiteMetadata } from "@/hooks";
 import React from "react";
+import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 
 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";
-import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
 
 type Props = {
   isIndex?: boolean;
@@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => {
         <Contacts contacts={author.contacts} />
         <Copyright copyright={copyright} />
         <Menu menu={legalMenu} />
-        <ThemeSwitcher />
+        <ThemeSwitcher showLabel />
       </div>
     </div>
   );

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

@@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = `
     <nav>
       <ul />
     </nav>
-    <a
-      href="#"
+    Switch color mode:
+    <br />
+    <div
+      className="react-toggle"
       onClick={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
     >
-      Switch to light mode
-    </a>
+      <div
+        className="react-toggle-track"
+      >
+        <div
+          className="react-toggle-track-check"
+        >
+          <div
+            style={
+              Object {
+                "color": "#f1c40f",
+                "fontSize": "1.1em",
+                "position": "absolute",
+                "top": "-4px",
+              }
+            }
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-moon "
+              data-icon="moon"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 384 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          className="react-toggle-track-x"
+        >
+          <div
+            style={
+              Object {
+                "color": "#f39c12",
+                "fontSize": "1em",
+                "left": "-3px",
+                "position": "absolute",
+                "top": "-3px",
+              }
+            }
+          >
+            <svg
+              aria-hidden="true"
+              className="svg-inline--fa fa-sun "
+              data-icon="sun"
+              data-prefix="fas"
+              focusable="false"
+              role="img"
+              style={Object {}}
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                fill="currentColor"
+                style={Object {}}
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+      <div
+        className="react-toggle-thumb"
+      />
+      <input
+        checked={false}
+        className="react-toggle-screenreader-only"
+        onBlur={[Function]}
+        onChange={[Function]}
+        onFocus={[Function]}
+        type="checkbox"
+      />
+    </div>
   </div>
 </div>
 `;