use next.js 13 appdir, add initial navbar drawer

This commit is contained in:
Nathaniel Tampus
2023-02-15 14:09:33 +08:00
parent 4324ee6c33
commit 2ef5e33b0e
10 changed files with 81 additions and 37 deletions

View File

@@ -1,6 +1,9 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true
reactStrictMode: true,
experimental: {
appDir: true
}
};
module.exports = nextConfig;

9
client/src/app/head.tsx Normal file
View File

@@ -0,0 +1,9 @@
export default function Head() {
return (
<>
<title>Chessu</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</>
);
}

58
client/src/app/layout.tsx Normal file
View File

@@ -0,0 +1,58 @@
import "./globals.css";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html>
<head />
<body>
<div className="drawer drawer-mobile">
<input id="my-drawer-2" type="checkbox" className="drawer-toggle" />
<div className="drawer-content">
<label
htmlFor="my-drawer-2"
className="btn btn-circle btn-ghost drawer-button fixed right-1 top-1 lg:hidden"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16M12 18h8"
/>
</svg>
</label>
{children}
</div>
<nav className="drawer-side">
<label htmlFor="my-drawer-2" className="drawer-overlay"></label>
<ul className="menu text-base-content bg-base-300 w-80 p-4 lg:w-60">
<h1 className="btn btn-ghost btn-block no-animation btn-square hover:bg-transparent">
chessu
</h1>
<li>
<a>Play</a>
</li>
<li>
<a>Login</a>
</li>
<li>
<a>Register</a>
</li>
</ul>
</nav>
</div>
<footer className="footer footer-center bg-base-300 text-base-content p-4">
<div>
<p>Copyright &copy; 2023 nize - GitHub</p>
</div>
</footer>
</body>
</html>
);
}

3
client/src/app/page.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function Home() {
return <div>Homepage</div>;
}

View File

@@ -1,6 +0,0 @@
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}

View File

@@ -1,13 +0,0 @@
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}

View File

@@ -1,10 +0,0 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
type Data = {
name: string;
};
export default function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
res.status(200).json({ name: "John Doe" });
}

View File

@@ -1,5 +0,0 @@
const index = () => {
return <div>index</div>;
};
export default index;

View File

@@ -17,8 +17,13 @@
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"plugins": [
{
"name": "next"
}
]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}