Skip to content

Commit 5f4674b

Browse files
BirushaNdegeyaBirushaNdegeya
authored
Merge pull request #264 from gopavasanth/T389679
Made the tool mobile responsive
2 parents 35eb0e1 + 6a78d47 commit 5f4674b

File tree

2 files changed

+103
-101
lines changed

2 files changed

+103
-101
lines changed

‎src/components/Layouts/NavBar.jsx‎

Lines changed: 79 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,103 @@
11
import { useEffect, useState } from 'react';
2-
import '../../styles/NavBar.css'; // Nous allons ajouter des styles pour la transition
2+
import '../../styles/NavBar.css';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4-
import { faArrowsUpToLine, faBook, faBug, faCode, faComment, faCopyright, faPager, faUsers } from '@fortawesome/free-solid-svg-icons';
4+
import { faBook, faBug, faCode, faComment, faCopyright, faUsers, faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
55
import { useTranslation } from 'react-i18next';
66
import LanguageSelector from '../common/LanguageSelector';
77

88
const NavBar = () => {
99
const [helpMenuOpen, setHelpMenuOpen] = useState(false);
10+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
1011
const { t } = useTranslation();
1112

12-
const toggleHelpMenu = () => {
13-
setHelpMenuOpen(!helpMenuOpen);
14-
};
15-
1613
useEffect(() => {
17-
const closeHelpMenu = (event) => {
18-
if (helpMenuOpen && !event.target.closest('.help-menu')) {
14+
const closeMenus = (event) => {
15+
if (!event.target.closest('.help-menu') && !event.target.closest('.help-icon')) {
1916
setHelpMenuOpen(false);
2017
}
21-
};
2218

23-
window.addEventListener('mousedown', closeHelpMenu);
24-
25-
return () => {
26-
window.removeEventListener('mousedown', closeHelpMenu);
19+
if (!event.target.closest('.mobile-menu') && !event.target.closest('.mobile-toggle')) {
20+
setMobileMenuOpen(false);
21+
}
2722
};
28-
}, [helpMenuOpen]);
23+
24+
window.addEventListener('mousedown', closeMenus);
25+
return () => window.removeEventListener('mousedown', closeMenus);
26+
}, []);
2927

3028
return (
31-
<nav className='fixed top-0 left-0 right-0 shadow-md z-50'>
32-
<div className='flex items-center justify-between bg-blue-800 h-16 px-6 py-2'>
33-
<a href='/'>
34-
<div className='text-white text-xl font-bold'>
35-
Emi <span className=' font-light max-md:hidden'>{t('nav.subtitle')}</span>
36-
</div>
29+
<nav className='fixed top-0 left-0 right-0 shadow-md z-50 bg-blue-800'>
30+
<div className='flex items-center justify-between h-16 px-4 md:px-6'>
31+
{/* Logo */}
32+
<a href='/' className='text-white text-xl font-bold'>
33+
Emi <span className='font-light hidden md:inline'>{t('nav.subtitle')}</span>
3734
</a>
3835

39-
<div className='flex items-center justify-between gap-4'>
40-
<ul className='flex items-center justify-center gap-4 text-white'>
41-
<li>
42-
<a href='/page-views' className=' text-white underline'>
43-
<span className='max-md:hidden'>{t('nav.pageViews')}</span>
44-
<span className='hidden max-md:block'>
45-
<FontAwesomeIcon icon={faPager} style={{ color: '#ffffff' }} />
46-
</span>
47-
</a>
48-
</li>
49-
<li>
50-
<a href='/top-africa' className=' text-white underline'>
51-
<span className='max-md:hidden'>{t('nav.topAfrica')}</span>
52-
<span className='hidden max-md:block'>
53-
<FontAwesomeIcon icon={faArrowsUpToLine} style={{ color: '#ffffff' }} />
54-
</span>
55-
</a>
56-
</li>
57-
</ul>
36+
{/* Desktop Menu */}
37+
<div className='hidden md:flex items-center gap-4'>
38+
<a href='/page-views' className='text-white underline'>
39+
{t('nav.pageViews')}
40+
</a>
41+
<a href='/top-africa' className='text-white underline'>
42+
{t('nav.topAfrica')}
43+
</a>
5844
<LanguageSelector />
59-
<div>
60-
<button onClick={toggleHelpMenu} className='help-icon'>
61-
{t('common.help')} ▼
62-
</button>
63-
{helpMenuOpen && (
64-
<div className='help-menu absolute shadow-2xl right-1 rounded-xl bg-white'>
65-
<a href='https://meta.wikimedia.org/wiki/Emi_Solution' className='footer-link' target='_blank'>
66-
<FontAwesomeIcon icon={faBook} /> {t('common.documentation')}
67-
</a>
68-
<a href='https://github.com/kaliacad/mostvisitedarticle' className='footer-link' target='_blank'>
69-
<FontAwesomeIcon icon={faCode} /> {t('common.viewSource')}
70-
</a>
71-
<a href='https://github.com/kaliacad/mostvisitedarticle/issues' className='footer-link' target='_blank'>
72-
<FontAwesomeIcon icon={faBug} /> {t('common.reportIssue')}
73-
</a>
74-
<a
75-
href='https://meta.wikimedia.org/w/index.php?title=Talk:Emi_Solution&action=edit&redlink=1'
76-
className='footer-link'
77-
target='_blank'
78-
>
79-
<FontAwesomeIcon icon={faComment} /> {t('common.feedback')}
80-
</a>
81-
<a href='https://github.com/kaliacad.org/' className='footer-link' target='_blank'>
82-
<FontAwesomeIcon icon={faUsers} /> {t('common.developedBy')}
83-
</a>
84-
<a href='https://kaliacademy.org/' className='footer-link' target='_blank'>
85-
<FontAwesomeIcon icon={faCopyright} /> {t('common.kaliAcademy')}
86-
</a>
87-
</div>
88-
)}
89-
</div>
45+
<button onClick={() => setHelpMenuOpen(!helpMenuOpen)} className='help-icon text-white'>
46+
{t('common.help')} ▼
47+
</button>
9048
</div>
49+
50+
{/* Mobile Toggle */}
51+
<button className='md:hidden text-white text-xl mobile-toggle' onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
52+
<FontAwesomeIcon icon={mobileMenuOpen ? faXmark : faBars} />
53+
</button>
9154
</div>
55+
56+
{/* Mobile Menu */}
57+
{mobileMenuOpen && (
58+
<div className='mobile-menu md:hidden bg-blue-700 px-4 py-3 space-y-3 text-white'>
59+
<a href='/page-views' className='block underline'>
60+
{t('nav.pageViews')}
61+
</a>
62+
<a href='/top-africa' className='block underline'>
63+
{t('nav.topAfrica')}
64+
</a>
65+
66+
<LanguageSelector />
67+
68+
<button onClick={() => setHelpMenuOpen(!helpMenuOpen)} className='block w-full text-left'>
69+
{t('common.help')} ▼
70+
</button>
71+
</div>
72+
)}
73+
74+
{/* Help Menu */}
75+
{helpMenuOpen && (
76+
<div className='help-menu absolute right-2 mt-2 rounded-xl bg-white shadow-2xl w-56'>
77+
<a href='https://meta.wikimedia.org/wiki/Emi_Solution' className='footer-link' target='_blank'>
78+
<FontAwesomeIcon icon={faBook} /> {t('common.documentation')}
79+
</a>
80+
<a href='https://github.com/kaliacad/mostvisitedarticle' className='footer-link' target='_blank'>
81+
<FontAwesomeIcon icon={faCode} /> {t('common.viewSource')}
82+
</a>
83+
<a href='https://github.com/kaliacad/mostvisitedarticle/issues' className='footer-link' target='_blank'>
84+
<FontAwesomeIcon icon={faBug} /> {t('common.reportIssue')}
85+
</a>
86+
<a
87+
href='https://meta.wikimedia.org/w/index.php?title=Talk:Emi_Solution&action=edit&redlink=1'
88+
className='footer-link'
89+
target='_blank'
90+
>
91+
<FontAwesomeIcon icon={faComment} /> {t('common.feedback')}
92+
</a>
93+
<a href='https://github.com/kaliacad.org/' className='footer-link' target='_blank'>
94+
<FontAwesomeIcon icon={faUsers} /> {t('common.developedBy')}
95+
</a>
96+
<a href='https://kaliacademy.org/' className='footer-link' target='_blank'>
97+
<FontAwesomeIcon icon={faCopyright} /> {t('common.kaliAcademy')}
98+
</a>
99+
</div>
100+
)}
92101
</nav>
93102
);
94103
};

‎src/components/Layouts/footer.jsx‎

Lines changed: 24 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,30 @@ export function Footer() {
66
const { t } = useTranslation();
77

88
return (
9-
<footer className='footer fixed bottom-0 w-full bg-white max-md:relative max-md:text-center items-center'>
10-
<a href='https://meta.wikimedia.org/wiki/Emi_Solution' className='footer-link max-md:text-xs lg:flex items-center gap-2' target='_blank'>
11-
<FontAwesomeIcon icon={faBook} /> <span className='md:hidden block lg:block lg:text-sm'>{t('footer.documentation')}</span>
12-
</a>
13-
<a
14-
href='https://github.com/kaliacad/mostvisitedarticle'
15-
className='footer-link max-md:text-xs lg:flex items-center gap-2'
16-
target='_blank'
17-
>
18-
<FontAwesomeIcon icon={faCode} /> <span className='md:hidden block lg:block lg:text-sm'>{t('footer.viewSource')}</span>
19-
</a>
20-
<a
21-
href='https://github.com/kaliacad/mostvisitedarticle/issues'
22-
className='footer-link max-md:text-xs lg:flex items-center gap-2'
23-
target='_blank'
24-
>
25-
<FontAwesomeIcon icon={faBug} /> <span className='md:hidden block lg:block lg:text-sm'>{t('footer.reportIssue')}</span>
26-
</a>
27-
<a
28-
href='https://meta.wikimedia.org/w/index.php?title=Talk:Emi_Solution&action=edit&redlink=1'
29-
className='footer-link max-md:text-xs lg:flex items-center gap-2'
30-
target='_blank'
31-
>
32-
<FontAwesomeIcon icon={faComment} /> <span className='md:hidden block lg:block'>{t('footer.feedback')}</span>
33-
</a>
34-
<a href='https://github.com/kaliacad.org/' className='footer-link max-md:text-xs lg:flex items-center gap-2' target='_blank'>
35-
<FontAwesomeIcon icon={faUsers} /> <span className='md:hidden block lg:block lg:text-sm'>{t('footer.developedBy')}</span>
36-
</a>
37-
<a href='https://kaliacademy.org/' className='footer-link max-md:text-xs lg:flex items-center gap-2' target='_blank'>
38-
<FontAwesomeIcon icon={faCopyright} /> <span className='md:hidden block lg:block lg:text-sm'>{t('footer.kaliAcademy')}</span>
39-
</a>
9+
<footer className='bg-white border-t md:fixed md:bottom-0 w-full'>
10+
<div className='max-w-7xl mx-auto px-4 py-3'>
11+
<div className='flex flex-wrap justify-center md:justify-between gap-4 text-sm'>
12+
<FooterLink href='https://meta.wikimedia.org/wiki/Emi_Solution' icon={faBook} label={t('footer.documentation')} />
13+
<FooterLink href='https://github.com/kaliacad/mostvisitedarticle' icon={faCode} label={t('footer.viewSource')} />
14+
<FooterLink href='https://github.com/kaliacad/mostvisitedarticle/issues' icon={faBug} label={t('footer.reportIssue')} />
15+
<FooterLink
16+
href='https://meta.wikimedia.org/w/index.php?title=Talk:Emi_Solution&action=edit&redlink=1'
17+
icon={faComment}
18+
label={t('footer.feedback')}
19+
/>
20+
<FooterLink href='https://github.com/kaliacad.org/' icon={faUsers} label={t('footer.developedBy')} />
21+
<FooterLink href='https://kaliacademy.org/' icon={faCopyright} label={t('footer.kaliAcademy')} />
22+
</div>
23+
</div>
4024
</footer>
4125
);
4226
}
27+
28+
function FooterLink({ href, icon, label }) {
29+
return (
30+
<a href={href} target='_blank' className='flex items-center gap-2 text-gray-700 hover:text-blue-700 transition' rel='noreferrer'>
31+
<FontAwesomeIcon icon={icon} />
32+
<span className='hidden sm:inline'>{label}</span>
33+
</a>
34+
);
35+
}

0 commit comments

Comments
 (0)