use next.js 13 appdir, add initial navbar drawer
This commit is contained in:
@@ -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
9
client/src/app/head.tsx
Normal 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
58
client/src/app/layout.tsx
Normal 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 © 2023 nize - GitHub</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
3
client/src/app/page.tsx
Normal file
3
client/src/app/page.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function Home() {
|
||||
return <div>Homepage</div>;
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import "@/styles/globals.css";
|
||||
import type { AppProps } from "next/app";
|
||||
|
||||
export default function App({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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" });
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
const index = () => {
|
||||
return <div>index</div>;
|
||||
};
|
||||
|
||||
export default index;
|
||||
@@ -17,8 +17,13 @@
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
]
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user