Skip to content

Commit c1df1e3

Browse files
malikpiaramalikpiara
committed
Replacing the navbar in the quiz mode with a navigation that only displays an 'X'.
1 parent dc7635e commit c1df1e3

File tree

3 files changed

+135
-105
lines changed

3 files changed

+135
-105
lines changed

‎app/layout.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import Navbar from '@/components/navbar';
55
import MobileNavbar from '@/components/mobile/navbar';
66
import { Footer } from '@/components/footer';
77
import { CSPostHogProvider } from '@/components/providers';
8-
98
import thumbnail from '../public/thumbnail.jpg';
9+
import ExerciseNavbar from '@/components/mobile/exerciseNavbar';
1010

1111
const robotoFlex = Roboto_Flex({
1212
subsets: ['latin'],
@@ -62,7 +62,9 @@ export default function RootLayout({
6262
<body
6363
className={`antialiased min-h-screen bg-white text-primaryColor ${robotoFlex.className}`}
6464
>
65+
<ExerciseNavbar />
6566
<MobileNavbar />
67+
6668
<Navbar />
6769
<main className={`flex`}>{children}</main>
6870
<Footer />

‎components/mobile/exerciseNavbar.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use client';
2+
import Link from 'next/link';
3+
import { X } from 'lucide-react';
4+
import { usePathname } from 'next/navigation';
5+
6+
const ExerciseNavbar = () => {
7+
const pathname = usePathname();
8+
if (pathname.includes('quiz'))
9+
return (
10+
<nav className='bg-white border-gray-200 md:hidden '>
11+
<div className='flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4'>
12+
<Link
13+
href='/'
14+
className='flex items-center space-x-3 rtl:space-x-reverse'
15+
>
16+
<span className='self-center text-2xl font-bold text-gray-900 whitespace-nowrap font-stretch'>
17+
<X />
18+
</span>
19+
</Link>
20+
</div>
21+
</nav>
22+
);
23+
};
24+
25+
export default ExerciseNavbar;

‎components/mobile/navbar.tsx

Lines changed: 107 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -3,126 +3,129 @@ import Link from 'next/link';
33
import { useState } from 'react';
44
import NavTopic from '../navTopic';
55
import { chapters } from '@/content';
6+
import { usePathname } from 'next/navigation';
67

78
const Navbar = () => {
89
const [isDropdownVisible, setDropdownVisible] = useState(false);
10+
const pathname = usePathname();
911

1012
const toggleMenu = () => {
1113
setDropdownVisible(!isDropdownVisible);
1214
};
1315

1416
const splitIndex = Math.ceil(chapters.length / 2);
1517

16-
return (
17-
<nav className='bg-white border-gray-200 md:hidden '>
18-
<div className='flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4'>
19-
<Link
20-
href='/'
21-
className='flex items-center space-x-3 rtl:space-x-reverse'
22-
>
23-
<span className='self-center text-2xl font-bold text-gray-900 whitespace-nowrap font-stretch'>
24-
LC
25-
</span>
26-
</Link>
18+
if (!pathname.includes('quiz'))
19+
return (
20+
<nav className='bg-white border-gray-200 md:hidden '>
21+
<div className='flex flex-wrap justify-between items-center mx-auto max-w-screen-xl p-4'>
22+
<Link
23+
href='/'
24+
className='flex items-center space-x-3 rtl:space-x-reverse'
25+
>
26+
<span className='self-center text-2xl font-bold text-gray-900 whitespace-nowrap font-stretch'>
27+
LogiCola
28+
</span>
29+
</Link>
2730

28-
<button
29-
type='button'
30-
className='inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-stone-200 '
31-
onClick={() => setDropdownVisible(!isDropdownVisible)}
32-
>
33-
<span className='sr-only'>Open main menu</span>
34-
<svg
35-
className='w-5 h-5'
36-
aria-hidden='true'
37-
xmlns='http://www.w3.org/2000/svg'
38-
fill='none'
39-
viewBox='0 0 17 14'
31+
<button
32+
type='button'
33+
className='inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-stone-200 '
34+
onClick={() => setDropdownVisible(!isDropdownVisible)}
4035
>
41-
<path
42-
stroke='currentColor'
43-
strokeLinecap='round'
44-
strokeLinejoin='round'
45-
strokeWidth='2'
46-
d='M1 1h15M1 7h15M1 13h15'
47-
/>
48-
</svg>
49-
</button>
50-
<div
51-
className={`items-center justify-between font-semibold w-full md:flex md:w-auto md:order-1 hidden`}
52-
>
53-
<ul className='flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white'>
54-
<li>
55-
<button
56-
type='button'
57-
onMouseEnter={toggleMenu}
58-
id='mega-menu-full-dropdown-button'
59-
data-collapse-toggle='mega-menu-full-dropdown'
60-
className='flex items-center justify-between w-full py-2 px-3 text-gray-500 rounded md:w-auto hover:bg-gray-200 md:border-0 md:hover:text-primaryColor'
61-
>
62-
Chapters{' '}
63-
<svg
64-
className='w-2.5 h-2.5 ms-2.5'
65-
aria-hidden='true'
66-
xmlns='http://www.w3.org/2000/svg'
67-
fill='none'
68-
viewBox='0 0 10 6'
36+
<span className='sr-only'>Open main menu</span>
37+
<svg
38+
className='w-5 h-5'
39+
aria-hidden='true'
40+
xmlns='http://www.w3.org/2000/svg'
41+
fill='none'
42+
viewBox='0 0 17 14'
43+
>
44+
<path
45+
stroke='currentColor'
46+
strokeLinecap='round'
47+
strokeLinejoin='round'
48+
strokeWidth='2'
49+
d='M1 1h15M1 7h15M1 13h15'
50+
/>
51+
</svg>
52+
</button>
53+
<div
54+
className={`items-center justify-between font-semibold w-full md:flex md:w-auto md:order-1 hidden`}
55+
>
56+
<ul className='flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white'>
57+
<li>
58+
<button
59+
type='button'
60+
onMouseEnter={toggleMenu}
61+
id='mega-menu-full-dropdown-button'
62+
data-collapse-toggle='mega-menu-full-dropdown'
63+
className='flex items-center justify-between w-full py-2 px-3 text-gray-500 rounded md:w-auto hover:bg-gray-200 md:border-0 md:hover:text-primaryColor'
6964
>
70-
<path
71-
stroke='currentColor'
72-
strokeLinecap='round'
73-
strokeLinejoin='round'
74-
strokeWidth='2'
75-
d='m1 1 4 4 4-4'
76-
/>
77-
</svg>
78-
</button>
79-
</li>
65+
Chapters{' '}
66+
<svg
67+
className='w-2.5 h-2.5 ms-2.5'
68+
aria-hidden='true'
69+
xmlns='http://www.w3.org/2000/svg'
70+
fill='none'
71+
viewBox='0 0 10 6'
72+
>
73+
<path
74+
stroke='currentColor'
75+
strokeLinecap='round'
76+
strokeLinejoin='round'
77+
strokeWidth='2'
78+
d='m1 1 4 4 4-4'
79+
/>
80+
</svg>
81+
</button>
82+
</li>
8083

81-
<li>
82-
<Link
83-
href='https://github.com/sponsors/malikpiara'
84-
className='block py-2 px-3 text-gray-500 rounded hover:bg-gray-200 md:hover:text-primaryColor'
85-
>
86-
Donate
87-
</Link>
88-
</li>
89-
</ul>
84+
<li>
85+
<Link
86+
href='https://github.com/sponsors/malikpiara'
87+
className='block py-2 px-3 text-gray-500 rounded hover:bg-gray-200 md:hover:text-primaryColor'
88+
>
89+
Donate
90+
</Link>
91+
</li>
92+
</ul>
93+
</div>
9094
</div>
91-
</div>
92-
<div
93-
id='mega-menu-full-dropdown'
94-
onMouseLeave={toggleMenu}
95-
className={`${
96-
!isDropdownVisible && 'hidden'
97-
} border-gray-200 shadow-sm bg-gray-50 md:bg-white absolute w-full z-50`}
98-
>
99-
<div className='grid max-w-screen-xl px-4 py-5 mx-auto text-gray-900 sm:grid-cols-2 md:px-6 shadow-sm'>
100-
<ul>
101-
{chapters.slice(0, splitIndex).map((i) => (
102-
<NavTopic
103-
key={i.id}
104-
chapter={i.set}
105-
title={i.title}
106-
path={'/' + i.slugs.join('/') + '/quiz'}
107-
newLabel={i.isNew}
108-
/>
109-
))}
110-
</ul>
111-
<ul>
112-
{chapters.slice(splitIndex).map((i) => (
113-
<NavTopic
114-
key={i.id}
115-
chapter={i.set}
116-
title={i.title}
117-
path={'/' + i.slugs.join('/') + '/quiz'}
118-
newLabel={i.isNew}
119-
/>
120-
))}
121-
</ul>
95+
<div
96+
id='mega-menu-full-dropdown'
97+
onMouseLeave={toggleMenu}
98+
className={`${
99+
!isDropdownVisible && 'hidden'
100+
} border-gray-200 shadow-sm bg-gray-50 md:bg-white absolute w-full z-50`}
101+
>
102+
<div className='grid max-w-screen-xl px-4 py-5 mx-auto text-gray-900 sm:grid-cols-2 md:px-6 shadow-sm'>
103+
<ul>
104+
{chapters.slice(0, splitIndex).map((i) => (
105+
<NavTopic
106+
key={i.id}
107+
chapter={i.set}
108+
title={i.title}
109+
path={'/' + i.slugs.join('/') + '/quiz'}
110+
newLabel={i.isNew}
111+
/>
112+
))}
113+
</ul>
114+
<ul>
115+
{chapters.slice(splitIndex).map((i) => (
116+
<NavTopic
117+
key={i.id}
118+
chapter={i.set}
119+
title={i.title}
120+
path={'/' + i.slugs.join('/') + '/quiz'}
121+
newLabel={i.isNew}
122+
/>
123+
))}
124+
</ul>
125+
</div>
122126
</div>
123-
</div>
124-
</nav>
125-
);
127+
</nav>
128+
);
126129
};
127130

128131
export default Navbar;

0 commit comments

Comments
 (0)