feat: sidebar.

.env

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_FIRST_NAME=Ivan
+NEXT_PUBLIC_LAST_NAME=Li

components/layouts/global-layout.module.css

@@ -0,0 +1,31 @@
+.sidebar {
+  @apply bg-green-400 text-white;
+  @apply overflow-hidden flex flex-col;
+  @apply text-center;
+  height: 100vh;
+  padding-top: 10vh;
+}
+
+.avatar {
+  @apply md:w-36 md:h-36 rounded-full;
+  @apply w-16 h-16;
+  @apply mx-auto md:my-8 flex-none;
+}
+
+.name {
+  @apply md:text-3xl md:tracking-wide font-mono;
+  @apply md:my-8 my-4 flex-none select-all;
+}
+.nav {
+  @apply my-auto;
+}
+.navItem {
+  @apply leading-8 md:text-lg cursor-pointer my-1;
+  &:hover {
+    text-shadow: 0 0px 5px #abbf00;
+  }
+}
+.bio {
+  @apply text-sm text-opacity-70 text-white;
+  @apply my-4;
+}

components/layouts/global-sidebar.tsx

@@ -0,0 +1,41 @@
+import React, { FC } from "react";
+import styles from "./global-layout.module.css";
+import Image from "next/image";
+import Link from "next/link";
+import classnames from 'classnames';
+
+const fullName = `${process.env.NEXT_PUBLIC_FIRST_NAME} ${process.env.NEXT_PUBLIC_LAST_NAME}`;
+
+interface Props {
+  className: string;
+}
+
+export const GlobalSidebar: FC<Props> = ({className}) => {
+
+  return (
+    <aside className={classnames(className, styles.sidebar)}>
+      <img className={styles.avatar} src="/images/avatar.png" />
+      <h2 className={styles.name}>{fullName}</h2>
+
+      <nav className={styles.nav}>
+        <ul>
+          <Link href="/">
+            <li className={styles.navItem}>文章</li>
+          </Link>
+          <Link href="/tags">
+            <li className={styles.navItem}>标签</li>
+          </Link>
+          <Link href="/about">
+            <li className={styles.navItem}>关于</li>
+          </Link>
+        </ul>
+      </nav>
+      <footer className={classnames(styles.bio, "md:block hidden")}>
+        {"“人造的身体，借来的心”"}
+      </footer>
+      <footer className={classnames(styles.bio, "md:hidden block")}>
+        {"好挤 (#`O′)"}
+      </footer>
+    </aside>
+  );
+};

package-lock.json

@@ -8,8 +8,11 @@
       "version": "0.1.0",
       "dependencies": {
         "@apollo/client": "^3.3.16",
+        "classnames": "^2.2.6",
         "graphql": "^15.5.0",
         "next": "10.2.0",
+        "postcss-import": "^14.0.1",
+        "postcss-nested": "^5.0.5",
         "react": "17.0.2",
         "react-dom": "17.0.2"
       },
@@ -20,7 +23,10 @@
         "@graphql-codegen/typescript-operations": "1.17.16",
         "@graphql-codegen/typescript-react-apollo": "2.2.4",
         "@types/autoprefixer": "^10.2.0",
+        "@types/classnames": "^2.3.1",
         "@types/graphql": "^14.5.0",
+        "@types/postcss-import": "^12.0.0",
+        "@types/postcss-nested": "^4.2.3",
         "@types/react": "^17.0.4",
         "@types/tailwindcss": "^2.0.2",
         "autoprefixer": "^10.2.5",
@@ -2339,6 +2345,16 @@
         "autoprefixer": "*"
       }
     },
+    "node_modules/@types/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "deprecated": "This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "classnames": "*"
+      }
+    },
     "node_modules/@types/graphql": {
       "version": "14.5.0",
       "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
@@ -2390,6 +2406,64 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "node_modules/@types/postcss-import": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@types/postcss-import/-/postcss-import-12.0.0.tgz",
+      "integrity": "sha512-AFgOR4zOOp/izuY7n5aEr/0SJ5e8fNYVxMkx49IA3Jf/Bs6Hhd6staMoSkdiTr9fi0z3Q1Ts5SqpFI5vv4k7BQ==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^7.0.27"
+      }
+    },
+    "node_modules/@types/postcss-import/node_modules/postcss": {
+      "version": "7.0.35",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+      "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2",
+        "source-map": "^0.6.1",
+        "supports-color": "^6.1.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      }
+    },
+    "node_modules/@types/postcss-import/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@types/postcss-import/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@types/postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
+      "deprecated": "This is a stub types definition. postcss-nested provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "postcss-nested": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -3640,7 +3714,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -5228,7 +5301,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
       "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
-      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -7230,8 +7302,7 @@
     "node_modules/path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
-      "dev": true
     },
     "node_modules/path-root": {
       "version": "0.1.1",
@@ -7289,6 +7360,14 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -7374,6 +7453,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.1.tgz",
+      "integrity": "sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-js": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
@@ -7395,7 +7490,6 @@
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
       "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.4"
       },
@@ -7414,7 +7508,6 @@
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz",
       "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -7426,8 +7519,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
-      "dev": true
     },
     "node_modules/postcss/node_modules/source-map": {
       "version": "0.6.1",
@@ -7684,6 +7776,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -7984,7 +8084,6 @@
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"
@@ -11307,6 +11406,15 @@
         "autoprefixer": "*"
       }
     },
+    "@types/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "dev": true,
+      "requires": {
+        "classnames": "*"
+      }
+    },
     "@types/graphql": {
       "version": "14.5.0",
       "resolved": "https://registry.npmjs.org/@types/graphql/-/graphql-14.5.0.tgz",
@@ -11357,6 +11465,52 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
+    "@types/postcss-import": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/@types/postcss-import/-/postcss-import-12.0.0.tgz",
+      "integrity": "sha512-AFgOR4zOOp/izuY7n5aEr/0SJ5e8fNYVxMkx49IA3Jf/Bs6Hhd6staMoSkdiTr9fi0z3Q1Ts5SqpFI5vv4k7BQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.27"
+      },
+      "dependencies": {
+        "postcss": {
+          "version": "7.0.35",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz",
+          "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==",
+          "dev": true,
+          "requires": {
+            "chalk": "^2.4.2",
+            "source-map": "^0.6.1",
+            "supports-color": "^6.1.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@types/postcss-nested": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/@types/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "integrity": "sha512-ZhABeFlQIL0Z3rXjWkQ9CIFiQH8383J97N7FB5B4GrfCSdniZ58fri3lxgTlU4kp6PDH3a/LWRDWHk9Mvord6A==",
+      "dev": true,
+      "requires": {
+        "postcss-nested": "*"
+      }
+    },
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
@@ -12420,8 +12574,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
-      "dev": true
     },
     "cssnano-preset-simple": {
       "version": "2.0.0",
@@ -13663,7 +13816,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.3.0.tgz",
       "integrity": "sha512-xSphU2KG9867tsYdLD4RWQ1VqdFl4HTO9Thf3I/3dLEfr0dbPTWKsuCKrgqMljg4nPE+Gq0VCnzT3gr0CyBmsw==",
-      "dev": true,
       "requires": {
         "has": "^1.0.3"
       }
@@ -15254,8 +15406,7 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
-      "dev": true
     },
     "path-root": {
       "version": "0.1.1",
@@ -15295,6 +15446,11 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz",
       "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg=="
     },
+    "pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -15370,6 +15526,16 @@
         }
       }
     },
+    "postcss-import": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.0.1.tgz",
+      "integrity": "sha512-Xn2+z++vWObbEPhiiKO1a78JiyhqipyrXHBb3AHpv0ks7Cdg+GxQQJ24ODNMTanldf7197gSP3axppO9yaG0lA==",
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-js": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-3.0.3.tgz",
@@ -15384,7 +15550,6 @@
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.5.tgz",
       "integrity": "sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==",
-      "dev": true,
       "requires": {
         "postcss-selector-parser": "^6.0.4"
       }
@@ -15393,7 +15558,6 @@
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.5.tgz",
       "integrity": "sha512-aFYPoYmXbZ1V6HZaSvat08M97A8HqO6Pjz+PiNpw/DhuRrC72XWAdp3hL6wusDCN31sSmcZyMGa2hZEuX+Xfhg==",
-      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -15402,8 +15566,7 @@
     "postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
-      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
+      "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
-      "dev": true
     },
     "prepend-http": {
       "version": "2.0.0",
@@ -15600,6 +15763,14 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
+      "requires": {
+        "pify": "^2.3.0"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -15847,7 +16018,6 @@
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dev": true,
       "requires": {
         "is-core-module": "^2.2.0",
         "path-parse": "^1.0.6"

package.json

@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.16",
+    "classnames": "^2.2.6",
     "graphql": "^15.5.0",
     "next": "10.2.0",
+    "postcss-import": "^14.0.1",
+    "postcss-nested": "^5.0.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
@@ -23,7 +26,10 @@
     "@graphql-codegen/typescript-operations": "1.17.16",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
     "@types/autoprefixer": "^10.2.0",
+    "@types/classnames": "^2.3.1",
     "@types/graphql": "^14.5.0",
+    "@types/postcss-import": "^12.0.0",
+    "@types/postcss-nested": "^4.2.3",
     "@types/react": "^17.0.4",
     "@types/tailwindcss": "^2.0.2",
     "autoprefixer": "^10.2.5",

pages/_app.module.css

@@ -0,0 +1,6 @@
+.page {
+  @apply flex;
+}
+.sidebar {
+  @apply md:w-64 w-32;
+}

pages/_app.tsx

@@ -1,8 +1,16 @@
 import '../styles/globals.css'
 import "tailwindcss/tailwind.css";
+import React from 'react';
+import { GlobalSidebar } from '../components/layouts/global-sidebar';
+import styles from './_app.module.css';
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <div className={styles.page}>
+      <GlobalSidebar className={styles.sidebar} />
+      <Component {...pageProps} />
+    </div>
+  );
 }
 
 export default MyApp

postcss.config.js

@@ -1,6 +1,8 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
     tailwindcss: {},
+    'postcss-nested': {},
     autoprefixer: {},
   },
 }