Skip to content

Commit

Permalink
feat: add drawer menu
Browse files Browse the repository at this point in the history
piro0919 committed Nov 13, 2024
1 parent fdcd583 commit a812f83
Showing 14 changed files with 1,576 additions and 13,733 deletions.
1 change: 1 addition & 0 deletions apps/liver/package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"dependencies": {
"@clerk/localizations": "3.6.1",
"@clerk/nextjs": "6.2.0",
"@prisma/client": "5.21.1",
"@t3-oss/env-nextjs": "0.11.1",
9 changes: 8 additions & 1 deletion apps/user/package.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
{
"dependencies": {
"@clerk/localizations": "3.6.1",
"@clerk/nextjs": "6.2.0",
"@prisma/client": "5.21.1",
"@t3-oss/env-nextjs": "0.11.1",
"@vercel/postgres": "0.10.0",
"hamburger-react": "2.5.1",
"next": "15.0.2",
"react": "19.0.0-rc-02c0e824-20241028",
"react-dom": "19.0.0-rc-02c0e824-20241028",
"react-modern-drawer": "1.4.0",
"ress": "5.0.2",
"use-show-window-size": "0.0.1",
"usehooks-ts": "3.1.0",
"zod": "3.23.8"
},
"name": "user",
@@ -20,5 +24,8 @@
"lint:fix": "next lint --fix",
"start": "next start"
},
"version": "0.1.0"
"version": "0.1.0",
"devDependencies": {
"@types/react": "18.3.12"
}
}
Binary file added apps/user/public/background.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions apps/user/src/app/(auth)/_components/App/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import styles from "./style.module.css";

export default function App(): JSX.Element {
return <div className={styles.top}>aaa</div>;
}
5 changes: 5 additions & 0 deletions apps/user/src/app/(auth)/_components/App/style.module.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.top {
background-image: url(/background.jpg);
background-position: center bottom;
background-size: cover;
}
20 changes: 14 additions & 6 deletions apps/user/src/app/(auth)/_components/AuthLayout/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
"use client";
import { Spin as Hamburger } from "hamburger-react";
import { ReactNode } from "react";
import useShowWindowSize from "use-show-window-size";
import { useBoolean } from "usehooks-ts";
import Drawer from "../Drawer";
import Header from "../Header";
import MobileNavigation from "../MobileNavigation";
import styles from "./style.module.css";
@@ -10,19 +12,25 @@ export type AuthLayoutProps = {
};

export default function AuthLayout({ children }: AuthLayoutProps): JSX.Element {
useShowWindowSize({
disable: process.env.NODE_ENV === "production",
});
const {
setFalse: offIsOpen,
toggle: toggleIsOpen,
value: isOpen,
} = useBoolean(false);

return (
<div>
<>
<div className={styles.header}>
<Header />
</div>
<main className={styles.main}>{children}</main>
<aside className={styles.mobileNavigation}>
<MobileNavigation />
</aside>
</div>
<Drawer onClose={offIsOpen} open={isOpen} />
<div className={styles.hamburger}>
<Hamburger size={24} toggle={toggleIsOpen} toggled={isOpen} />
</div>
</>
);
}
11 changes: 11 additions & 0 deletions apps/user/src/app/(auth)/_components/AuthLayout/style.module.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.header {
inset: 0 0 auto;
z-index: 1;
position: fixed;
}

@@ -10,4 +11,14 @@
.mobileNavigation {
inset: auto 0 0;
position: fixed;

@media (width >= 740px) {
display: none;
}
}

.hamburger {
position: fixed;
inset: 0 0 auto auto;
z-index: 1000;
}
24 changes: 24 additions & 0 deletions apps/user/src/app/(auth)/_components/Drawer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { useClerk } from "@clerk/nextjs";
import dynamic from "next/dynamic";
import { ComponentProps } from "react";

const ReactModernDrawer = dynamic(() => import("react-modern-drawer"), {
ssr: false,
});

export type DrawerProps = Pick<
ComponentProps<typeof ReactModernDrawer>,
"onClose" | "open"
>;

export default function Drawer({ onClose, open }: DrawerProps): JSX.Element {
const { signOut } = useClerk();

return (
<ReactModernDrawer direction="right" onClose={onClose} open={open}>
<button onClick={() => signOut({ redirectUrl: "/" })}>
サインアウト
</button>
</ReactModernDrawer>
);
}
4 changes: 0 additions & 4 deletions apps/user/src/app/(auth)/_components/Header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useClerk } from "@clerk/nextjs";
import { Lobster } from "next/font/google";
import styles from "./style.module.css";

@@ -9,12 +8,9 @@ const lobster = Lobster({
});

export default function Header(): JSX.Element {
const { signOut } = useClerk();

return (
<header className={styles.header}>
<div className={`${styles.title} ${lobster.className}`}>Vmate</div>
<button onClick={() => signOut({ redirectUrl: "/" })}>Sign out</button>
</header>
);
}
4 changes: 3 additions & 1 deletion apps/user/src/app/(auth)/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import App from "./_components/App";

export default function Page(): JSX.Element {
return <div>user</div>;
return <App />;
}
13 changes: 13 additions & 0 deletions apps/user/src/app/_components/Layout/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
"use client";
import { ReactNode } from "react";
import useShowWindowSize from "use-show-window-size";

export type LayoutProps = { children: ReactNode };

export default function Layout({ children }: LayoutProps): JSX.Element {
useShowWindowSize({
disable: process.env.NODE_ENV === "production",
});

return <>{children}</>;
}
7 changes: 6 additions & 1 deletion apps/user/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// eslint-disable-next-line filenames/match-exported
import { jaJP } from "@clerk/localizations";
import { ClerkProvider } from "@clerk/nextjs";
import type { Metadata } from "next";
import "react-modern-drawer/dist/index.css";
import "ress";
import Layout from "./_components/Layout";
import "./globals.css";

export const metadata: Metadata = {
@@ -17,7 +20,9 @@ export default function RootLayout({
return (
<html lang="ja">
<body>
<ClerkProvider>{children}</ClerkProvider>
<ClerkProvider localization={jaJP}>
<Layout>{children}</Layout>
</ClerkProvider>
</body>
</html>
);
15,201 changes: 1,485 additions & 13,716 deletions package-lock.json

Large diffs are not rendered by default.

5 changes: 1 addition & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -76,8 +76,5 @@
"version": "0.1.0",
"workspaces": [
"apps/*"
],
"dependencies": {
"@clerk/nextjs": "6.3.1"
}
]
}

0 comments on commit a812f83

Please sign in to comment.