MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: header style

Browse Source
This commit is contained in:
arraysid
2025-05-27 04:03:26 +07:00
parent dbaaddab2e
commit 0a4921f2ef
3 changed files with 55 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/app/(public)/_components/header.tsx
+36 -68
View File
@@ -1,11 +1,13 @@
'use client'; 'use client';
import { Button, MenuIcon, XIcon } from '@components'; import navigations from '@/data/navigations.json';
import { Button } from '@components';
import { cn } from '@utils'; import { cn } from '@utils';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { LuMenu, LuX } from 'react-icons/lu';
export function Header() { export function Header() {
const router = useRouter(); const router = useRouter();
@@ -47,55 +49,39 @@ export function Header() {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden md:flex items-center gap-8"> <nav className="hidden md:flex items-center gap-8">
<Link href="#fitur" className="text-sm font-medium relative group"> {navigations.map(({ link, title }) => (
<span className="transition-colors hover:text-primary">Fitur</span> <Link
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span> key={link}
</Link> href={link}
<Link className="text-sm font-medium relative group"
href="#komunitas" >
className="text-sm font-medium relative group" <span className="transition-colors hover:text-primary">
> {title}
<span className="transition-colors hover:text-primary"> </span>
Komunitas <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span>
</span> </Link>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span> ))}
</Link>
<Link
href="#sumber-belajar"
className="text-sm font-medium relative group"
>
<span className="transition-colors hover:text-primary">
Sumber Belajar
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span>
</Link>
<Link
href="#testimoni"
className="text-sm font-medium relative group"
>
<span className="transition-colors hover:text-primary">
Testimoni
</span>
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary-500 transition-all duration-300 group-hover:w-full"></span>
</Link>
</nav> </nav>
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<Button onClick={() => router.push('/signin')}>Login</Button> <Button
onClick={() => router.push('/signin')}
className="hidden md:flex"
>
Login
</Button>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
<Button <button
variant="secondary"
size="icon"
className="md:hidden"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="flex md:hidden"
> >
{mobileMenuOpen ? ( {mobileMenuOpen ? (
<XIcon className="h-6 w-6" /> <LuX className="size-5" />
) : ( ) : (
<MenuIcon className="h-6 w-6" /> <LuMenu className="size-5" />
)} )}
</Button> </button>
</div> </div>
</div> </div>
@@ -103,34 +89,16 @@ export function Header() {
{mobileMenuOpen && ( {mobileMenuOpen && (
<div className="md:hidden border-t bg-background/95 backdrop-blur-md"> <div className="md:hidden border-t bg-background/95 backdrop-blur-md">
<nav className="container flex flex-col py-4 text-center"> <nav className="container flex flex-col py-4 text-center">
<Link {navigations.map(({ link, title }) => (
href="#fitur" <Link
className="py-3 text-sm font-medium border-b border-border/50" key={link}
onClick={() => setMobileMenuOpen(false)} href={link}
> className="py-3 text-sm font-medium border-b border-border/50"
Fitur onClick={() => router.push(link)}
</Link> >
<Link {title}
href="#komunitas" </Link>
className="py-3 text-sm font-medium border-b border-border/50" ))}
onClick={() => setMobileMenuOpen(false)}
>
Komunitas
</Link>
<Link
href="#sumber-belajar"
className="py-3 text-sm font-medium border-b border-border/50"
onClick={() => setMobileMenuOpen(false)}
>
Sumber Belajar
</Link>
<Link
href="#testimoni"
className="py-3 text-sm font-medium"
onClick={() => setMobileMenuOpen(false)}
>
Testimoni
</Link>
<Button onClick={() => router.push('/signin')}>Login</Button> <Button onClick={() => router.push('/signin')}>Login</Button>
</nav> </nav>
apps/landing/src/app/(public)/events/page.tsx
+9
View File
@@ -0,0 +1,9 @@
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'IMPHNEN - Event',
};
export default function Page() {
return <></>;
}
apps/landing/src/data/navigations.json
+10
View File
@@ -0,0 +1,10 @@
[
{
"title": "Home",
"link": "/"
},
{
"title": "Event",
"link": "/events"
}
]