Skip to content

Commit f4f898c

Browse files
alcercualcercu
committed
fix(frontend): improve navbar and footer responsiveness
1 parent d004f60 commit f4f898c

File tree

2 files changed

+92
-83
lines changed

2 files changed

+92
-83
lines changed

‎frontend/src/components/Footer.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Footer: React.FC = async () => {
2020
cta: result.footerSubscribeCta,
2121
}));
2222
return (
23-
<div>
23+
<div className="mx-auto max-w-7xl">
2424
<div className={"bg-background-dark py-16 md:px-16 xl:px-32"}>
2525
<div
2626
className={clsx(
@@ -54,22 +54,23 @@ const Footer: React.FC = async () => {
5454
</div>
5555
<div
5656
className={clsx(
57-
["flex flex-col items-center justify-center"],
58-
["bg-background-2 py-16"],
57+
"relative grid grid-cols-1 items-center justify-items-center gap-8",
58+
"bg-background-2 py-16 md:grid-cols-3 md:gap-0 md:px-16 xl:px-32",
5959
)}
6060
>
61-
<Image
62-
src={cta.logo.url}
63-
alt="kleros logo"
64-
width="185"
65-
height="48"
66-
className="mb-8"
67-
/>
68-
<p className="mb-8">{cta.notice}</p>
69-
<p className="mb-6">{cta.cta_text}</p>
70-
<Button>
71-
<span className="text-background-2">{cta.cta_button}</span>
72-
</Button>
61+
<Image src={cta.logo.url} alt="kleros logo" width="185" height="48" />
62+
<p className="md:justify-self-center"> {cta.notice} </p>
63+
<div
64+
className={clsx(
65+
"flex flex-col items-center justify-items-center gap-6 md:flex-row",
66+
"md:justify-self-end",
67+
)}
68+
>
69+
<p>{cta.cta_text}</p>
70+
<Button>
71+
<span className="text-background-2">{cta.cta_button}</span>
72+
</Button>
73+
</div>
7374
</div>
7475
</div>
7576
);

‎frontend/src/components/Navbar/index.tsx‎

Lines changed: 76 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -34,84 +34,92 @@ const Navbar: React.FC<INavbar> = ({ navbarData }) => {
3434
return (
3535
<header
3636
className={clsx(
37-
"fixed left-0 right-0 top-0 z-50 h-20 w-full bg-black/35 px-2",
38-
"backdrop-blur-md md:px-16 xl:px-32",
37+
"fixed left-0 right-0 top-0 z-50 h-20 w-full bg-black/35",
38+
"backdrop-blur-md",
3939
)}
4040
>
41-
<div
42-
className={clsx(
43-
"mx-auto flex h-full max-w-7xl items-center justify-between",
44-
"text-base text-white",
45-
)}
46-
>
47-
<CustomLink
48-
href="/home"
49-
className="flex items-center"
50-
onClick={() => toggleMenuOpen(false)}
41+
<div className="mx-auto h-full max-w-7xl px-2 md:px-16 xl:px-32">
42+
<div
43+
className={clsx(
44+
"flex h-full items-center justify-between",
45+
"text-base text-white",
46+
)}
5147
>
52-
<Image
53-
alt="Kleros"
54-
src={klerosLogo?.logo_svg.url}
55-
width={184}
56-
height={48}
57-
/>
58-
</CustomLink>
48+
<CustomLink
49+
href="/home"
50+
className="flex items-center"
51+
onClick={() => toggleMenuOpen(false)}
52+
>
53+
<Image
54+
alt="Kleros"
55+
src={klerosLogo?.logo_svg.url}
56+
width={184}
57+
height={48}
58+
/>
59+
</CustomLink>
5960

60-
<button
61-
className="ml-auto block text-white lg:hidden"
62-
onClick={toggleMenuOpen}
63-
>
64-
<HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
65-
</button>
61+
<button
62+
className="ml-auto block text-white lg:hidden"
63+
onClick={toggleMenuOpen}
64+
>
65+
<HamburgerButton className="h-5 w-6" isOpen={menuOpen} />
66+
</button>
6667

67-
<div className="hidden lg:flex">
68-
<DesktopNavigation
69-
{...{ pathname, navLinks, resourceSections, appsSection, socials }}
70-
/>
71-
</div>
68+
<div className="hidden lg:flex">
69+
<DesktopNavigation
70+
{...{
71+
pathname,
72+
navLinks,
73+
resourceSections,
74+
appsSection,
75+
socials,
76+
}}
77+
/>
78+
</div>
7279

73-
<div className="hidden items-center lg:flex">
74-
<CustomLink href={navbarButton?.link.url}>
75-
<Button className="text-background-2">
76-
{navbarButton?.link.name}
77-
</Button>
78-
</CustomLink>
79-
</div>
80+
<div className="hidden items-center lg:flex">
81+
<CustomLink href={navbarButton?.link.url}>
82+
<Button className="text-background-2">
83+
{navbarButton?.link.name}
84+
</Button>
85+
</CustomLink>
86+
</div>
8087

81-
<AnimatePresence>
82-
{menuOpen ? (
83-
<motion.div
84-
className={clsx(
85-
"fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
86-
)}
87-
initial={{ opacity: 0 }}
88-
animate={{ opacity: 1 }}
89-
exit={{ opacity: 0 }}
90-
onClick={() => toggleMenuOpen(false)}
91-
>
88+
<AnimatePresence>
89+
{menuOpen ? (
9290
<motion.div
93-
className="absolute bottom-0 top-0"
94-
initial={{ right: "-100%" }}
95-
animate={{ right: 0 }}
96-
exit={{ right: "-100%" }}
91+
className={clsx(
92+
"fixed inset-0 top-20 z-40 h-[calc(100dvh-5rem)] bg-black/50",
93+
)}
94+
initial={{ opacity: 0 }}
95+
animate={{ opacity: 1 }}
96+
exit={{ opacity: 0 }}
97+
onClick={() => toggleMenuOpen(false)}
9798
>
98-
<MobileMenu
99-
{...{
100-
pathname,
101-
navLinks,
102-
resourceSections,
103-
appsSection,
104-
socials,
105-
navbarButton,
106-
}}
107-
className="h-full overflow-y-auto md:h-auto"
108-
closeFn={() => toggleMenuOpen(false)}
109-
onClick={(e) => e.stopPropagation()}
110-
/>
99+
<motion.div
100+
className="absolute bottom-0 top-0"
101+
initial={{ right: "-100%" }}
102+
animate={{ right: 0 }}
103+
exit={{ right: "-100%" }}
104+
>
105+
<MobileMenu
106+
{...{
107+
pathname,
108+
navLinks,
109+
resourceSections,
110+
appsSection,
111+
socials,
112+
navbarButton,
113+
}}
114+
className="h-full overflow-y-auto md:h-auto"
115+
closeFn={() => toggleMenuOpen(false)}
116+
onClick={(e) => e.stopPropagation()}
117+
/>
118+
</motion.div>
111119
</motion.div>
112-
</motion.div>
113-
) : null}
114-
</AnimatePresence>
120+
) : null}
121+
</AnimatePresence>
122+
</div>
115123
</div>
116124
</header>
117125
);

0 commit comments

Comments
 (0)