SephiGame
/
Monelia-Nails
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Maj

This commit is contained in:
Thomas 2025-06-21 15:29:26 +02:00
parent 2fe922fa3a
commit 22706bd63c
4 changed files with 0 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/components/header/desktop.tsx
View File

@ -1,32 +0,0 @@
import Image from "next/image"
import Link from "next/link"
const DesktopHeader = () => {
return (
<>
<div className="gap-4 pl-8 my-auto w-1/3 bg-text">
<div className='flex justify-self-center'>
<Image src={'/Ryo.png'} alt={"Ryo"} width={40} height={40} />
<Image src={'/Kiki.png'} alt={"Ryo"} width={40} height={40} />
</div>
<div className='flex text-xs justify-self-center'>
<span className='cursor-pointer mr-2'>Se connecter</span> · <span className='cursor-pointer ml-2'>S'inscrire</span>
</div>
</div>
<div className='my-auto text-4xl logo '>
Monelia Nails
</div>
<div className='grid h-full'>
<ul className='flex gap-8 self-center justify-self-end mr-8'>
<li><Link href='/'>Accueil</Link></li>
<li><Link href='/qui-suis-je'>Qui suis-je ?</Link></li>
<li><Link href='/prestations'>Mes prestations</Link></li>
<li><Link href='/formations'>Mes formations</Link></li>
<li><Link href='/contact'>Me contacter</Link></li>
</ul>
</div>
</>
)
}
export default DesktopHeader

25
src/app/components/header/header.tsx
View File

@ -1,25 +0,0 @@
'use client'
import { useState } from "react"
import DesktopHeader from "./desktop"
import MobileHeader from "./mobile"
const Header = () => {
return (
<header className='fixed bottom-0 w-screen h-[7.5vh]
tablet:h-[6.5vh] bg-(--accent)
laptop:relative laptop:block laptop:h-auto'>
<div className='hidden laptop:grid laptop:grid-cols-3 w-full'>
<DesktopHeader />
</div>
<div className='laptop:hidden grid h-full'>
<MobileHeader />
</div>
</header>
)
}
export default Header

60
src/app/components/header/mobile.tsx
View File

@ -1,60 +0,0 @@
import { Home, LayoutGrid, UserRound } from "lucide-react"
import { useState } from "react"
const items = [
{
id: "menu",
icon: <LayoutGrid />,
label: 'Menu'
},
{
id: "home",
icon: <Home />,
label: "Accueil"
},
{
id: "user",
icon: <UserRound />,
label: "Profil"
},
]
const MobileHeader = () => {
const [menuSelected, setMenuSelected] = useState<string>('menu')
const [openMenu, setOpenMenu] = useState(false)
const activeIndex = items.findIndex((item) => item.id === menuSelected);
return (
<div className='max-w-screen w-full grid relative grid-cols-3 self-center transition-all duration-300'>
<div
className="absolute -top-[50%] tablet:-top-[60%] left-0 w-1/3 flex justify-center transition-all duration-300 ease-in-out"
style={{
transform: `translateX(${activeIndex * 100}%)`,
}}
>
<div className="w-2/3 tablet:w-1/2 h-14 bg-(--accent) rounded-[100%]"></div>
</div>
{items.map((item) => (
<div
key={item.id}
onClick={() => setMenuSelected(item.id)}
className="flex flex-col items-center justify-center relative"
>
<div className="text-xl">{item.icon}</div>
<span
className={`text-xs tablet:text-lg duration-300 ${menuSelected === item.id ? "text-white font-semibold" : "text-(--background)"
}`}
>
{item.label}
</span>
</div>
))}
</div>
)
}
export default MobileHeader

2
src/app/layout.tsx
View File

@ -1,7 +1,6 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import Header from "./components/header/header";
import Footer from "./components/footer";
const geistSans = Geist({
@ -29,7 +28,6 @@ export default function RootLayout({
<body
className={`antialiased grid grid-rows-[auto_1fr_auto] h-screen w-screen`}
>
<Header />
{children}
<Footer />
</body>