Skip to content

Commit 15513ef

Browse files
gottasellemall69gottasellemall69
committed
hh
1 parent 933cb07 commit 15513ef

15 files changed

Lines changed: 1141 additions & 432 deletions

File tree

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,17 @@ next-env.d.ts
3838
/utils/cardDataApi.js
3939
.aider*
4040
server/changeStreamHandler.js
41+
.codex
4142

42-
.vscode
43+
/.vscode/
4344
/rift
4445
/.gpteng
4546
repomix-output.*
4647
/public/*
4748
!/public/images/
4849
!/public/images/**
50+
!/public/yugioh-parallax/
51+
!/public/yugioh-parallax/**
4952
!/public/card-data/
5053
!/public/card-data/**
5154
!/public/favicon.ico

‎components/Layout.js‎

Lines changed: 60 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,82 @@
11
import { useState } from 'react';
22
import Link from 'next/link';
3+
import { useRouter } from 'next/router';
34
import { Dialog, DialogBackdrop, DialogPanel, TransitionChild } from '@headlessui/react';
45
import { Bars3Icon as MenuIcon, XMarkIcon as X } from '@heroicons/react/24/outline';
56
import SideNav from '@/components/Navigation/SideNav';
7+
import YugiohSiteBackground from '@/components/Yugioh/YugiohSiteBackground';
68

79

810
export default function Layout( { children } ) {
911
const [ isSidebarOpen, setIsSidebarOpen ] = useState( false );
12+
const router = useRouter();
13+
const showYugiohBackground = router.pathname.startsWith( '/yugioh' );
14+
1015
const toggleSidebar = () => {
1116
setIsSidebarOpen( !isSidebarOpen );
1217
};
1318

1419
return (
15-
<div className="mx-auto h-full w-full glass dark:bg-gray-900">
16-
<Dialog open={ isSidebarOpen } onClose={ setIsSidebarOpen } className="relative z-50 lg:hidden">
17-
<DialogBackdrop
18-
transition
19-
className="fixed inset-0 backdrop bg-black/20 transition-opacity duration-300 ease-linear data-closed:opacity-0"
20-
/>
21-
<div className="fixed inset-0 flex">
22-
<DialogPanel
20+
<div className="relative mx-auto min-h-screen w-full glass dark:bg-gray-900">
21+
{ showYugiohBackground ? <YugiohSiteBackground /> : null }
22+
<div className="relative z-10">
23+
<Dialog open={ isSidebarOpen } onClose={ setIsSidebarOpen } className="relative z-50 lg:hidden">
24+
<DialogBackdrop
2325
transition
24-
className="relative flex w-auto max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full"
25-
>
26-
<TransitionChild>
27-
<div className="absolute top-0 left-full flex w-auto justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0">
28-
<button type="button" onClick={ toggleSidebar } className="-m-2.5 p-2.5">
29-
<span className="sr-only">Close sidebar</span>
30-
<X title="Close" onClick={ setIsSidebarOpen } aria-hidden="true" className="size-7 text-red-600" />
31-
</button>
26+
className="fixed inset-0 backdrop bg-black/20 transition-opacity duration-300 ease-linear data-closed:opacity-0"
27+
/>
28+
<div className="fixed inset-0 flex">
29+
<DialogPanel
30+
transition
31+
className="relative flex w-auto max-w-xs flex-1 transform transition duration-300 ease-in-out data-closed:-translate-x-full"
32+
>
33+
<TransitionChild>
34+
<div className="absolute top-0 left-full flex w-auto justify-center pt-5 duration-300 ease-in-out data-closed:opacity-0">
35+
<button type="button" onClick={ toggleSidebar } className="-m-2.5 p-2.5">
36+
<span className="sr-only">Close sidebar</span>
37+
<X title="Close" aria-hidden="true" className="size-7 text-red-600" />
38+
</button>
39+
</div>
40+
</TransitionChild>
41+
<div className="glass backdrop flex grow flex-col gap-y-5 overflow-y-auto pb-2 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
42+
<nav className="relative flex flex-1 flex-col mt-10">
43+
<SideNav />
44+
</nav>
3245
</div>
33-
</TransitionChild>
34-
<div className="glass backdrop flex grow flex-col gap-y-5 overflow-y-auto pb-2 dark:bg-gray-900 dark:ring dark:ring-white/10 dark:before:pointer-events-none dark:before:absolute dark:before:inset-0 dark:before:bg-black/10">
35-
<nav className="relative flex flex-1 flex-col mt-10">
36-
<SideNav />
37-
</nav>
38-
</div>
39-
</DialogPanel>
40-
</div>
41-
</Dialog>
42-
<div className="glass hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col dark:bg-gray-900">
43-
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 px-6 dark:border-white/10 dark:bg-black/10">
44-
<nav className="flex flex-1 flex-col mt-10">
45-
<SideNav />
46-
</nav>
47-
</div>
48-
</div>
49-
<div className="lg:pl-72 w-full">
50-
<div className="sticky top-0 z-40 flex items-center gap-x-6 glass backdrop px-4 py-4 shadow-xs sm:px-6 lg:hidden dark:bg-gray-900 dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:border-b dark:after:border-white/10 dark:after:bg-black/10">
51-
<button
52-
type="button"
53-
onClick={ toggleSidebar }
54-
className=" text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white justify-self-end place-items-end"
55-
title="Open sidebar"
56-
>
57-
<span className="sr-only">Open sidebar</span>
58-
<MenuIcon color={ "white" } aria-hidden="true" className="size-6" />
59-
</button>
60-
<Link href="/" className="flex-1 text-sm font-semibold leading-6 text-shadow text-white">
61-
CARD PRICE APP
62-
</Link>
63-
<div className="flex items-center">
64-
<span className="rounded-full border border-dashed border-white py-1 px-1 font-black text-shadow text-sm">PIC</span>
46+
</DialogPanel>
47+
</div>
48+
</Dialog>
49+
<div className="glass hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col dark:bg-gray-900">
50+
<div className="flex grow flex-col gap-y-5 overflow-y-auto border-r border-gray-200 px-6 dark:border-white/10 dark:bg-black/10">
51+
<nav className="flex flex-1 flex-col mt-10">
52+
<SideNav />
53+
</nav>
6554
</div>
6655
</div>
67-
<main className="min-h-screen mx-auto">
68-
<div className="max-w-full w-auto">
69-
{ children }
56+
<div className="lg:pl-72 w-full">
57+
<div className="sticky top-0 z-40 flex items-center gap-x-6 glass backdrop px-4 py-4 shadow-xs sm:px-6 lg:hidden dark:bg-gray-900 dark:shadow-none dark:after:pointer-events-none dark:after:absolute dark:after:inset-0 dark:after:border-b dark:after:border-white/10 dark:after:bg-black/10">
58+
<button
59+
type="button"
60+
onClick={ toggleSidebar }
61+
className=" text-gray-700 hover:text-gray-900 lg:hidden dark:text-gray-400 dark:hover:text-white justify-self-end place-items-end"
62+
title="Open sidebar"
63+
>
64+
<span className="sr-only">Open sidebar</span>
65+
<MenuIcon color={ "white" } aria-hidden="true" className="size-6" />
66+
</button>
67+
<Link href="/" className="flex-1 text-sm font-semibold leading-6 text-shadow text-white">
68+
CARD PRICE APP
69+
</Link>
70+
<div className="flex items-center">
71+
<span className="rounded-full border border-dashed border-white py-1 px-1 font-black text-shadow text-sm">PIC</span>
72+
</div>
7073
</div>
71-
</main>
74+
<main className="min-h-screen mx-auto">
75+
<div className="max-w-full w-auto">
76+
{ children }
77+
</div>
78+
</main>
79+
</div>
7280
</div>
7381
</div>
7482
);

0 commit comments

Comments
 (0)