Skip to content

Commit 153b2f3

Browse files
ldev6ldev6
committed
Fix mobile header
1 parent 7b9124d commit 153b2f3

10 files changed

Lines changed: 138 additions & 44 deletions

File tree

‎public/images/logo/gdg.png‎

3.93 KB
Loading

‎src/components/elements/CommunityCard.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ const CommunityCard = ({ communities }) => {
9797
<div className="flex gap-2 mt-auto">
9898
<a
9999
href={meetup.website}
100-
className="flex-1 text-center bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors"
100+
className="flex-1 text-center bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors flex items-center justify-center"
101101
>
102102
{buttonText.learnMore}
103103
</a>
104104
<a
105105
href={meetup.meetupUrl}
106-
className="flex-1 text-center border border-blue-600 text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50 transition-colors"
106+
className="flex-1 text-center border border-blue-600 text-blue-600 px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-50 transition-colors flex items-center justify-center"
107107
>
108108
{buttonText.joinMeetup}
109109
</a>

‎src/components/elements/MobileDrawer.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ const MobileDrawer = ({ isOpen, onClose }) => {
66

77

88
<div
9-
className={`lg:hidden
10-
w-full
9+
className={`w-full
1110
fixed
1211
bottom-0
1312
left-0

‎src/components/elements/Navbar.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import Link from 'next/link';
22
import { usePathname, useRouter } from 'next/navigation';
3-
import { getHeaderNavData } from '@/data/headerNavData';
3+
import { getHeaderNavData, getDrawerNavData } from '@/data/headerNavData';
44
import { useLanguage } from '@/contexts/LanguageContext';
55
import { v4 as uuidv4 } from 'uuid';
66

77
const Navbar = ({ isMobile }) => {
88
const router = useRouter();
99
const pathname = usePathname();
1010
const { language } = useLanguage();
11-
const headerNavData = getHeaderNavData(language);
11+
const navData = isMobile ? getDrawerNavData(language) : getHeaderNavData(language);
1212

1313

1414
return (
1515
<nav className={isMobile ? 'flex flex-col space-y-2 ' : 'hidden md:flex space-x-2 items-center'}>
16-
{headerNavData.map((link) => (
16+
{navData.map((link) => (
1717
<Link
1818
key={uuidv4()}
1919
href={link.href}
2020
className={`
21-
text-gray-800
21+
text-gray-800
2222
px-4
2323
py-2
2424
text-md

‎src/components/elements/PillButton.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const Button = ({
2323
onClick={onClick}
2424
aria-label={aria_label}
2525
className={clsx(
26-
'px-6 py-2.5 text-base font-medium shadow-md w-fit rounded-full',
26+
'px-6 py-2.5 text-base font-medium shadow-md w-fit rounded-full text-center',
2727
action === 'primary' &&
2828
'bg-black text-white hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-black',
2929
action === 'secondary' &&

‎src/components/sections/Header.js‎

Lines changed: 53 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,82 @@ import Image from 'next/image';
33
import Link from 'next/link';
44
import Navbar from '@/components/elements/Navbar';
55
import MobileDrawer from '@/components/elements/MobileDrawer';
6-
import { useState } from 'react';
6+
import { useState, useEffect, useRef } from 'react';
77
import { Bars3Icon } from '@heroicons/react/24/outline';
88
import PillButton from '@/components/elements/PillButton';
99
import LanguageSwitcher from '@/components/elements/LanguageSwitcher';
1010
import { useLanguage } from '@/contexts/LanguageContext';
11-
import headerConfig from '@/data/header.json';
11+
import { headerConfig } from '@/data/headerConfig';
1212

1313
const Header = () => {
1414
const [isMenuOpen, setIsMenuOpen] = useState(false);
15+
const [useSmallLogo, setUseSmallLogo] = useState(false);
1516
const { language } = useLanguage();
17+
const headerRef = useRef(null);
18+
19+
useEffect(() => {
20+
const checkHeaderFit = () => {
21+
if (headerRef.current) {
22+
const headerWidth = headerRef.current.offsetWidth;
23+
24+
// Switch to small logo when header is getting tight
25+
// This threshold can be adjusted based on when overflow starts happening
26+
const shouldUseSmallLogo = headerWidth < 1200 && headerWidth > 700; // Adjust this value as needed
27+
28+
setUseSmallLogo(shouldUseSmallLogo);
29+
}
30+
};
31+
32+
// Use ResizeObserver for better performance
33+
const resizeObserver = new ResizeObserver(checkHeaderFit);
34+
35+
if (headerRef.current) {
36+
resizeObserver.observe(headerRef.current);
37+
}
38+
39+
// Initial check
40+
checkHeaderFit();
41+
42+
return () => {
43+
resizeObserver.disconnect();
44+
};
45+
}, [language]);
1646

1747
return (
1848
<header className="sticky top-0 z-50 mt-0 px-3">
1949
<div className="bg-white container mx-auto flex items-center justify-between pt-5">
20-
<div className="bg-gray-100 container mx-auto flex items-center justify-between p-5 rounded-2xl">
50+
<div ref={headerRef} className="bg-gray-100 container mx-auto flex items-center justify-between p-5 rounded-2xl">
2151

22-
{/* Logo and other elements on the left */}
23-
<Link href={headerConfig.logo.href}>
52+
{/* Logo - switches to small version when space is tight */}
53+
<Link href={headerConfig.logo.href} className="flex-shrink-0 min-w-0 pr-6">
2454
<Image
25-
src={headerConfig.logo.src}
26-
width={headerConfig.logo.width}
27-
height={headerConfig.logo.height}
55+
src={useSmallLogo ? headerConfig.smallLogo.src : headerConfig.logo.src}
56+
width={useSmallLogo ? headerConfig.smallLogo.width : headerConfig.logo.width}
57+
height={useSmallLogo ? headerConfig.smallLogo.height : headerConfig.logo.height}
2858
alt={headerConfig.logo.alt[language]}
2959
priority={true}
60+
className="max-w-full h-auto object-contain"
3061
/>
3162
</Link>
3263

3364
<div className="flex flex-row items-center gap-4">
3465
{/* Navigation (Desktop) on the right */}
3566
<Navbar isMobile={false} />
3667
<LanguageSwitcher className="hidden md:flex" />
37-
<PillButton className="ml-3 hidden md:flex" href={headerConfig.cta.href}
38-
label={headerConfig.cta.label[language]} />
68+
{useSmallLogo ? (
69+
<a
70+
href={headerConfig.cta.href}
71+
target="_blank"
72+
rel="noopener noreferrer"
73+
className="hidden md:flex p-2 hover:bg-gray-200 rounded-full"
74+
aria-label={headerConfig.compactIcon.ariaLabel[language]}
75+
>
76+
<headerConfig.compactIcon.component className={headerConfig.compactIcon.className} />
77+
</a>
78+
) : (
79+
<PillButton className="ml-3 hidden md:flex" href={headerConfig.cta.href}
80+
label={headerConfig.cta.label[language]} />
81+
)}
3982

4083
</div>
4184
{/* Hamburger Menu (Mobile) */}

‎src/data/header.json‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎src/data/headerConfig.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { FaDiscord } from 'react-icons/fa';
2+
3+
export const headerConfig = {
4+
logo: {
5+
src: "/images/logo/gdg_montreal.png",
6+
alt: {
7+
en: "Montreal Google Developer Group",
8+
fr: "Groupe de Développeurs Google Montréal"
9+
},
10+
width: 250,
11+
height: 100,
12+
href: "/"
13+
},
14+
smallLogo: {
15+
src: "/images/logo/gdg.png",
16+
alt: {
17+
en: "Montreal Google Developer Group",
18+
fr: "Groupe de Développeurs Google Montréal"
19+
},
20+
width: 60,
21+
height: 60,
22+
href: "/"
23+
},
24+
cta: {
25+
href: "https://discord.gg/QpVZjYFQhF",
26+
label: {
27+
en: "Join Community",
28+
fr: "Rejoindre la Communauté"
29+
}
30+
},
31+
compactIcon: {
32+
component: FaDiscord,
33+
className: "w-6 h-6 text-indigo-600",
34+
ariaLabel: {
35+
en: "Join our Discord community",
36+
fr: "Rejoindre notre communauté Discord"
37+
}
38+
},
39+
mobileMenu: {
40+
ariaLabel: {
41+
en: "menu",
42+
fr: "menu"
43+
}
44+
}
45+
};

‎src/data/headerNavData.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ export const getHeaderNavData = (language = 'en') => {
44
return navigationData[language].header;
55
};
66

7+
export const getDrawerNavData = (language = 'en') => {
8+
return navigationData[language].drawer;
9+
};
10+
711
export const getFooterNavData = (language = 'en') => {
812
return navigationData[language].footer;
913
};

‎src/data/navigationData.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
export const navigationData = {
22
en: {
33
header: [
4+
{
5+
href: "/events",
6+
label: "Events"
7+
},
8+
{
9+
href: "#events",
10+
label: "Special Events"
11+
},
12+
{
13+
href: "/team",
14+
label: "Organizers"
15+
}
16+
],
17+
drawer: [
418
{
519
href: "/",
620
label: "Home"
@@ -35,6 +49,20 @@ export const navigationData = {
3549
},
3650
fr: {
3751
header: [
52+
{
53+
href: "/events",
54+
label: "Événements"
55+
},
56+
{
57+
href: "#events",
58+
label: "Événements Spéciaux"
59+
},
60+
{
61+
href: "/team",
62+
label: "Organisateur·trice·s"
63+
}
64+
],
65+
drawer: [
3866
{
3967
href: "/",
4068
label: "Accueil"

0 commit comments

Comments
 (0)