feat: create mobile menu

piro0919 · Nov 13, 2024 · 6124f82 · 6124f82
1 parent 7b56499
commit 6124f82
Show file tree

Hide file tree

Showing 10 changed files with 177 additions and 3 deletions.
diff --git a/apps/user/package.json b/apps/user/package.json
@@ -8,6 +8,7 @@
     "react": "19.0.0-rc-02c0e824-20241028",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "ress": "5.0.2",
+    "use-show-window-size": "0.0.1",
     "zod": "3.23.8"
   },
   "name": "user",

diff --git a/apps/user/src/app/_components/Header/index.tsx b/apps/user/src/app/_components/Header/index.tsx
@@ -0,0 +1,16 @@
+import { Lobster } from "next/font/google";
+import styles from "./style.module.css";
+
+const lobster = Lobster({
+  display: "swap",
+  subsets: ["latin"],
+  weight: "400",
+});
+
+export default function Header(): JSX.Element {
+  return (
+    <header className={styles.header}>
+      <div className={`${styles.title} ${lobster.className}`}>Vmate</div>
+    </header>
+  );
+}
diff --git a/apps/user/src/app/_components/Header/style.module.css b/apps/user/src/app/_components/Header/style.module.css
@@ -0,0 +1,12 @@
+.header {
+  align-items: center;
+  background: #fff;
+  border-bottom: 1px solid #e8eaee;
+  display: flex;
+  height: 48px;
+  justify-content: center;
+}
+
+.title {
+  font-size: 3rem;
+}
diff --git a/apps/user/src/app/_components/Layout/index.tsx b/apps/user/src/app/_components/Layout/index.tsx
@@ -0,0 +1,28 @@
+"use client";
+import { ReactNode } from "react";
+import useShowWindowSize from "use-show-window-size";
+import Header from "../Header";
+import MobileNavigation from "../MobileNavigation";
+import styles from "./style.module.css";
+
+export type LayoutProps = {
+  children: ReactNode;
+};
+
+export default function Layout({ children }: LayoutProps): JSX.Element {
+  useShowWindowSize({
+    disable: process.env.NODE_ENV === "production",
+  });
+
+  return (
+    <div>
+      <div className={styles.header}>
+        <Header />
+      </div>
+      <main className={styles.main}>{children}</main>
+      <aside className={styles.mobileNavigation}>
+        <MobileNavigation />
+      </aside>
+    </div>
+  );
+}
diff --git a/apps/user/src/app/_components/Layout/style.module.css b/apps/user/src/app/_components/Layout/style.module.css
@@ -0,0 +1,13 @@
+.header {
+  inset: 0 0 auto;
+  position: fixed;
+}
+
+.main {
+  margin: 48px 0 0;
+}
+
+.mobileNavigation {
+  inset: auto 0 0;
+  position: fixed;
+}
diff --git a/apps/user/src/app/_components/MobileNavigation/index.tsx b/apps/user/src/app/_components/MobileNavigation/index.tsx
@@ -0,0 +1,40 @@
+import Link from "next/link";
+import { useMemo } from "react";
+import styles from "./style.module.css";
+
+export default function MobileNavigation(): JSX.Element {
+  const items = useMemo(
+    () =>
+      [
+        {
+          path: "/",
+          text: "ホーム",
+        },
+        {
+          path: "community/",
+          text: "コミュニティ",
+        },
+        {
+          path: "/schedule",
+          text: "スケジュール",
+        },
+        {
+          path: "/pypage",
+          text: "マイページ",
+        },
+      ].map(({ path, text }) => (
+        <li key={path}>
+          <Link className={styles.link} href="/">
+            {text}
+          </Link>
+        </li>
+      )),
+    [],
+  );
+
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.list}>{items}</ul>
+    </nav>
+  );
+}
diff --git a/apps/user/src/app/_components/MobileNavigation/style.module.css b/apps/user/src/app/_components/MobileNavigation/style.module.css
@@ -0,0 +1,15 @@
+.nav {
+  background: #fff;
+  border-top: 1px solid #e8eaee;
+  height: 48px;
+}
+
+.list {
+  display: grid;
+  grid-template: auto / repeat(4, 1fr);
+  height: 100%;
+}
+
+.link {
+  display: block;
+}
diff --git a/apps/user/src/app/globals.css b/apps/user/src/app/globals.css
@@ -12,6 +12,10 @@ html {
   }
 }
 
+body {
+  background: #f4f7fa;
+}
+
 * {
   outline: none;
 }

diff --git a/apps/user/src/app/layout.tsx b/apps/user/src/app/layout.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line filenames/match-exported
 import type { Metadata } from "next";
 import "ress";
+import Layout from "./_components/Layout";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -15,7 +16,9 @@ export default function RootLayout({
 }>): JSX.Element {
   return (
     <html lang="ja">
-      <body>{children}</body>
+      <body>
+        <Layout>{children}</Layout>
+      </body>
     </html>
   );
 }
diff --git a/package-lock.json b/package-lock.json
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,6 +12,10 @@ html { @@
       }
     }
+    body {
+      background: #f4f7fa;
+    }
     * {
       outline: none;
     }
@@ Expand Down @@