Ivan/blog-fs
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: sidebar.

Browse Source
This commit is contained in:
Ivan Li 2021-05-01 23:10:28 +08:00
parent 3d2982b846
commit d22f8075a2
9 changed files with 286 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

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

31
components/layouts/global-layout.module.css Normal file
View File

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

41
components/layouts/global-sidebar.tsx Normal file
View File

@ -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>
);
};

208
package-lock.json generated
View File

@ -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==",
"dev": true
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
"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==",
"dev": true
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"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==",
"dev": true
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
},
"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==",
"dev": true
"integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
},
"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==",
"dev": true
"integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ=="
},
"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"

6
package.json
View File

@ -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",

6
pages/_app.module.css Normal file
View File

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

10
pages/_app.tsx
View File

@ -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

2
postcss.config.js
View File

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

BIN
public/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB