Skip to content

Commit 20f4bf7

Browse files
heydoyouknowme0heydoyouknowme0
committed
mobile additions
1 parent 642a391 commit 20f4bf7

File tree

2 files changed

+151
-37
lines changed

2 files changed

+151
-37
lines changed

‎app/[locale]/header.tsx‎

Lines changed: 106 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -119,16 +119,16 @@ export default async function Header({ locale }: { locale: string }) {
119119
<nav
120120
className={cn(
121121
'container flex justify-between',
122-
'gap-4 xl:gap-6 2xl:gap-8',
122+
'sm:gap-4 xl:gap-6 2xl:gap-8',
123123
'py-2 sm:py-4 md:py-6'
124124
)}
125125
>
126126
<Link href={`/${locale}`}>
127127
<Image
128128
alt={text.logo}
129-
className="rounded-md bg-neutral-50 p-[6px]"
130-
height={40}
131-
width={40}
129+
className="rounded-md bg-neutral-50"
130+
height={45}
131+
width={45}
132132
src="assets/nitlogo.png"
133133
/>
134134
</Link>
@@ -242,35 +242,53 @@ export default async function Header({ locale }: { locale: string }) {
242242
<aside
243243
className={cn(
244244
'fixed left-0 top-0',
245-
'hidden peer-aria-expanded:block',
245+
'invisible opacity-0 peer-aria-expanded:visible peer-aria-expanded:opacity-100',
246+
'transition-all',
247+
'translate-y-[-100%] peer-aria-expanded:translate-y-0',
246248
'bg-background',
247249
'h-screen w-screen '
248250
)}
249251
>
250252
<NavStyleSwitcher />
251-
<main className="container flex h-full flex-col justify-between gap-4 gap-y-4 p-6 py-2 sm:py-4 md:py-6 xl:gap-6 2xl:gap-8">
252-
<header></header>
253-
<ul className="nav-column-default space-y-4 text-base font-semibold duration-300 animate-in slide-in-from-left slide-out-to-left">
254-
{items.map(({ label, href }, index) => (
253+
<main className="container flex h-dvh flex-col px-6 xl:gap-6 2xl:gap-8">
254+
<header className="mb-6 mt-2 h-10 sm:mb-8 sm:mt-4 md:mb-10 md:mt-6">
255+
<SwitchNavButton
256+
column="default"
257+
text={'〉'}
258+
props={{
259+
className:
260+
'nav-column-academics nav-column-institute invisible my-auto !h-full text-xl mx-2 font-bold',
261+
variant: 'link',
262+
}}
263+
/>
264+
</header>
265+
<ul className="nav-column-default space-y-4 text-base font-semibold">
266+
{items.map(({ label, href, listItems }, index) => (
255267
<li key={index} className="w-fit">
256-
<NavButton
257-
asChild
258-
className="text-left text-shade-dark"
259-
variant="link"
260-
>
261-
<Link href={`/${locale}/${href}`}>{label}</Link>
262-
</NavButton>
268+
{listItems ? (
269+
<SwitchNavButton
270+
column={href}
271+
text={label + '>'}
272+
props={{
273+
className: 'text-left text-shade-dark',
274+
variant: 'link',
275+
}}
276+
/>
277+
) : (
278+
<NavButton
279+
asChild
280+
className="text-left text-shade-dark"
281+
variant="link"
282+
>
283+
<Link href={`/${locale}/${href}`}>{label}</Link>
284+
</NavButton>
285+
)}
263286
</li>
264287
))}
265-
<li>
266-
<SwitchNavButton
267-
column="1"
268-
text={text.profile.view}
269-
props={{ className: 'text-left text-shade-dark' }}
270-
/>
271-
</li>
272288
</ul>
273-
<footer className="flex flex-col gap-y-4">
289+
<MobileSubNavMenu locale={locale} {...items[0]} />
290+
<MobileSubNavMenu locale={locale} {...items[1]} />
291+
<footer className="mt-auto flex flex-col gap-y-4 py-4">
274292
<hr className="opacity-50" />
275293
<Suspense>
276294
<AuthAction
@@ -401,3 +419,67 @@ const ProfileImage = ({
401419
</Button>
402420
);
403421
};
422+
423+
const MobileSubNavMenu = ({
424+
label,
425+
href,
426+
listItems,
427+
locale,
428+
}: {
429+
label: string;
430+
href: string;
431+
listItems?: {
432+
title: string;
433+
href: string;
434+
description: string;
435+
}[];
436+
locale: string;
437+
}) => {
438+
if (!listItems) return null;
439+
return (
440+
<>
441+
<NavButton asChild variant="icon">
442+
<Link
443+
href={'/' + href}
444+
className="group relative mb-2 !flex aspect-[5/2] select-none !flex-col justify-end overflow-hidden rounded-xl no-underline outline-none"
445+
>
446+
<Image
447+
className="absolute inset-0 z-0 h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-125"
448+
alt={href}
449+
src={`${href}/image01.jpg`}
450+
width={0}
451+
height={0}
452+
/>
453+
<section className="relative z-30 flex h-full w-full flex-col justify-end rounded-xl bg-gradient-to-b from-primary-500/0 to-primary-500 p-2 focus:shadow-md">
454+
<h2 className="!mb-0 origin-bottom-left text-shade-light transition-transform duration-500 ease-in-out group-hover:scale-125">
455+
{label + '→'}
456+
</h2>
457+
</section>
458+
</Link>
459+
</NavButton>
460+
<ul
461+
className={`nav-column-${href} invisible grid h-0 w-full gap-2 overflow-y-auto overflow-x-hidden pb-1 xl:gap-6 2xl:gap-8`}
462+
>
463+
{listItems.map(({ title, description, href }, index) => (
464+
<li key={index}>
465+
<NavButton variant="icon" asChild>
466+
<Link
467+
className={cn(
468+
'group !flex max-w-full origin-left select-none flex-col !items-start space-y-1 !whitespace-break-spaces rounded-xl px-1 py-3 leading-none no-underline outline-none transition-colors duration-500 ease-in-out hover:bg-neutral-50 focus:bg-neutral-50'
469+
)}
470+
href={`/${locale}/${href}`}
471+
>
472+
<h4 className="mb-0 origin-bottom-left font-sans font-semibold leading-none text-shade-dark transition-colors transition-transform group-hover:scale-105 group-hover:text-primary-500 group-focus:text-primary-500">
473+
{title}
474+
</h4>
475+
<p className="line-clamp-3 origin-top-left text-sm leading-snug !text-neutral-600 transition-colors transition-transform group-hover:scale-105 group-hover:text-primary-500 group-focus:text-primary-500">
476+
{description}
477+
</p>
478+
</Link>
479+
</NavButton>
480+
</li>
481+
))}
482+
</ul>
483+
</>
484+
);
485+
};

‎components/buttons/hamburger.tsx‎

Lines changed: 45 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { cn } from '~/lib/utils';
88

99
const HamburgerButton = ({ className }: { className: string }) => {
1010
const [isDropdownOpen, setDropdownOpen] = useAtom(dropdownAtom);
11-
const setNavCurrValue = useSetAtom(NavCurrValueAtom);
11+
const [navCurrValue, setNavCurrValue] = useAtom(NavCurrValueAtom);
1212

1313
return (
1414
<Button
@@ -21,7 +21,9 @@ const HamburgerButton = ({ className }: { className: string }) => {
2121
)}
2222
onClick={() => {
2323
setDropdownOpen(!isDropdownOpen);
24-
//!isDropdownOpen && setNavCurrValue({ current: 'default', prev: '' });
24+
!isDropdownOpen
25+
? setNavCurrValue({ current: 'default', prev: '' })
26+
: setNavCurrValue({ current: '', prev: navCurrValue.current });
2527
}}
2628
>
2729
<svg viewBox="0 0 100 100">
@@ -57,22 +59,52 @@ const HamburgerButton = ({ className }: { className: string }) => {
5759
const NavStyleSwitcher = () => {
5860
const NavCurr = useAtomValue(NavCurrValueAtom);
5961
return (
60-
<style>{`.nav-column-${NavCurr.current}{
61-
animation-name: enter;
62+
<style>{`
63+
@keyframes slideInRight {
64+
from {
65+
transform: translateX(-100%);
66+
opacity: 0;
67+
}
68+
to {
69+
transform: translateX(0);
70+
opacity: 1;
71+
}
72+
}
73+
74+
@keyframes slideOutLeft {
75+
from {
76+
transform: translateX(0);
77+
opacity: 1;
78+
}
79+
to {
80+
transform: translateX(-100%);
81+
opacity: 0;
82+
visibility: hidden;
83+
}
84+
}
85+
86+
.nav-column-${NavCurr.current}{
87+
animation-name: slideInRight;
88+
animation-duration: 300ms;
89+
animation-fill-mode: forwards;
6290
--tw-enter-opacity: initial;
6391
--tw-enter-scale: initial;
6492
--tw-enter-rotate: initial;
6593
--tw-enter-translate-y: initial;
94+
visibility: visible;
95+
height: auto;
6696
}
67-
.nav-column-${NavCurr.prev}{
68-
animation-name: exit;
69-
animation-duration: 150ms;
70-
--tw-exit-opacity: initial;
71-
--tw-exit-scale: initial;
72-
--tw-exit-rotate: initial;
73-
--tw-exit-translate-x: initial;
74-
--tw-exit-translate-y: initial;
75-
}`}</style>
97+
.nav-column-${NavCurr.prev}{
98+
animation-name: slideOutLeft;
99+
animation-duration: 300ms;
100+
animation-fill-mode: forwards;
101+
--tw-exit-opacity: initial;
102+
--tw-exit-scale: initial;
103+
--tw-exit-rotate: initial;
104+
--tw-exit-translate-x: initial;
105+
--tw-exit-translate-y: initial;
106+
height:0;
107+
}`}</style>
76108
);
77109
};
78110

0 commit comments

Comments
 (0)