Skip to content

Commit af41af4

Browse files
anandmindfireanandmindfire
authored
Merge pull request #175 from ayusmanmindfire/feat/navbarResponsive
Feat/navbar responsive
2 parents 6acb6ec + 91955be commit af41af4

File tree

4 files changed

+179
-85
lines changed

4 files changed

+179
-85
lines changed

‎src/app/contributors/components/TopContributors.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -25,33 +25,35 @@ const TopContributors = ({ contributors }: TopContributorsProps) => {
2525
};
2626

2727
return (
28-
<div className='relative items-center max-w-5xl mx-auto px-4 py-8'>
28+
<div className='relative items-center justify-center max-w-xl md:max-w-5xl px-2 sm:px-4 py-6'>
29+
{/* Title for mobile visibility */}
2930
{/* Contributors scroll container */}
30-
<div className='flex gap-6 overflow-x-auto scrollbar-hide snap-x snap-mandatory scroll-px-6 px-8'>
31+
<div className='flex gap-2 sm:gap-6 overflow-x-auto scrollbar-hide snap-x snap-mandatory pb-4 px-2 sm:px-8 -mx-2 sm:mx-0 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]'>
3132
{contributors.slice(0, 6).map((contributor) => (
3233
<Link
3334
key={contributor.login}
3435
href={contributor.html_url}
3536
target='_blank'
36-
className='flex-shrink-0 snap-center group'
37+
className='flex-shrink-0 snap-center group w-[100px] sm:w-auto mx-1 sm:mx-0'
3738
>
38-
<div className='flex flex-col items-center gap-2'>
39-
{/* Avatar with gradient border */}
40-
<div className='p-1 rounded-full bg-gradient-to-tr from-mindfire-text-red via-orange-500 to-yellow-500'>
39+
<div className='flex flex-col items-center gap-1 sm:gap-2'>
40+
{/* Avatar with gradient border - smaller on mobile */}
41+
<div className='p-0.5 sm:p-1 rounded-full bg-gradient-to-tr from-mindfire-text-red via-orange-500 to-yellow-500'>
4142
<div className='p-0.5 rounded-full bg-white'>
42-
<div className='relative w-20 h-20 rounded-full overflow-hidden group-hover:scale-105 transition-transform'>
43+
<div className='relative w-14 h-14 sm:w-20 sm:h-20 rounded-full overflow-hidden group-hover:scale-105 transition-transform'>
4344
<Image
4445
src={contributor.avatar_url}
4546
alt={contributor.login}
4647
fill
4748
className='object-cover'
49+
sizes='(max-width: 640px) 56px, 80px'
4850
/>
4951
</div>
5052
</div>
5153
</div>
52-
{/* Username and contributions */}
53-
<div className='text-center'>
54-
<p className='font-medium text-sm text-gray-800 truncate max-w-[100px]'>
54+
{/* Username and contributions - adjusted for mobile */}
55+
<div className='text-center w-full'>
56+
<p className='font-medium text-xs sm:text-sm text-gray-800 truncate max-w-[90px] sm:max-w-[100px]'>
5557
{contributor.login}
5658
</p>
5759
<p className='text-xs text-gray-500'>

‎src/app/contributors/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,15 @@ const Contributors = () => {
5050
<h2 className='text-2xl font-medium text-gray-800 mb-6'>
5151
Top Active Contributors
5252
</h2>
53-
<p className='text-xl text-mf-light-grey tracking-wide mb-2'>
53+
<p className='text-xl text-mf-light-grey tracking-wide mb-2 flex flex-wrap'>
5454
Meet our top six contributors — the people who help turn ideas
5555
into impact.
5656
</p>
5757
<TopContributors contributors={activeTopContributors} />
5858
</div>
5959

6060
{/* All Contributors Section */}
61-
<div className='mt-12 flex flex-col items-center justify-center'>
61+
<div className='mt-6 flex flex-col items-center justify-center'>
6262
<h2 className='text-2xl font-medium text-gray-800 mb-6'>
6363
All Contributors
6464
</h2>

‎src/components/layout/Header.tsx‎

Lines changed: 163 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22

33
import React from "react";
4+
import { Disclosure } from "@headlessui/react";
45
import { navigations } from "@/constants";
56
import Image from "next/image";
67
import Link from "next/link";
@@ -13,85 +14,176 @@ const Header = () => {
1314
const pathname = usePathname();
1415

1516
return (
16-
<header className='px-6 py-2 flex justify-between md:items-center sticky z-50 top-0 bg-white'>
17-
<Link href='/'>
18-
<Image src={mindfireFossLogo} width='140' alt='logo' />
19-
</Link>
20-
<div className='flex flex-col gap-2 md:flex-row md:gap-20 items-center'>
21-
<div>
22-
<ul className='flex gap-9'>
23-
{navigations.map((navigation, index) => (
24-
<li key={index} className='group'>
25-
{navigation.name === "Projects" ? (
26-
<div className='relative header-projects'>
27-
<Link
28-
href={navigation.path[0]}
29-
type='button'
30-
className={cn("group-hover:text-mf-red", {
31-
"text-mf-red": navigation.path.includes(pathname),
32-
})}
33-
id='menu-button'
34-
aria-expanded='true'
35-
aria-haspopup='true'
36-
>
37-
<span>Projects</span>
38-
</Link>
39-
<div
40-
className='projects-dropdown transition-all invisible absolute py-2 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
41-
role='menu'
42-
aria-orientation='vertical'
43-
aria-labelledby='menu-button'
44-
>
17+
<Disclosure as='header' className='bg-white sticky top-0 z-50'>
18+
{({ open }) => (
19+
<>
20+
<div className='px-6 py-2 flex justify-between items-center'>
21+
<Link href='/'>
22+
<Image src={mindfireFossLogo} width={140} alt='logo' />
23+
</Link>
24+
25+
<Disclosure.Button className='md:hidden focus:outline-none'>
26+
<span className='sr-only'>Open main menu</span>
27+
<div className='flex flex-col gap-1'>
28+
<span
29+
className={cn(
30+
"w-6 h-0.5 bg-black transition-transform",
31+
open && "rotate-45 translate-y-1.5"
32+
)}
33+
/>
34+
<span
35+
className={cn(
36+
"w-6 h-0.5 bg-black transition-opacity",
37+
open && "opacity-0"
38+
)}
39+
/>
40+
<span
41+
className={cn(
42+
"w-6 h-0.5 bg-black transition-transform",
43+
open && "-rotate-45 -translate-y-1.5"
44+
)}
45+
/>
46+
</div>
47+
</Disclosure.Button>
48+
49+
<div className='hidden md:flex items-center gap-20'>
50+
<ul className='flex gap-9'>
51+
{navigations.map((navigation, index) => (
52+
<li key={index} className='group'>
53+
{navigation.name === "Projects" ? (
54+
<div className='relative header-projects'>
55+
<Link
56+
href={navigation.path[0]}
57+
type='button'
58+
className={cn("group-hover:text-mf-red", {
59+
"text-mf-red": navigation.path.includes(pathname),
60+
})}
61+
id='menu-button'
62+
aria-expanded='true'
63+
aria-haspopup='true'
64+
>
65+
<span>Projects</span>
66+
</Link>
67+
<div
68+
className='projects-dropdown transition-all invisible absolute py-2 z-10 mt-2 w-48 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none'
69+
role='menu'
70+
aria-orientation='vertical'
71+
aria-labelledby='menu-button'
72+
>
73+
<Link
74+
className='block px-4 py-2 hover:bg-mindfire-text-red hover:text-white'
75+
href={`${navigation.path[1]}#current-projects`}
76+
>
77+
Current Projects
78+
</Link>
79+
<Link
80+
className='block px-4 py-2 hover:bg-mindfire-text-red hover:text-white'
81+
href={`${navigation.path[2]}#upcoming-projects`}
82+
>
83+
Upcoming Projects
84+
</Link>
85+
</div>
86+
</div>
87+
) : (
4588
<Link
46-
className='block px-4 py-2 hover:bg-mindfire-text-red hover:text-white'
47-
href={`${navigation.path[1]}#current-projects`}
89+
href={navigation.path[0]}
90+
className={cn(
91+
"group-hover:text-mf-red flex items-center gap-1",
92+
{
93+
"text-mf-red": navigation.path.includes(pathname),
94+
}
95+
)}
96+
{...(navigation.target
97+
? { target: navigation.target }
98+
: {})}
4899
>
49-
Current Projects
100+
<span>{navigation.name}</span>
101+
{navigation.icon && navigation.iconAlt && (
102+
<ExternalRedirectIcon
103+
height='1.2em'
104+
width='1.2em'
105+
className='group-hover:stroke-mf-red inline-block'
106+
/>
107+
)}
50108
</Link>
109+
)}
110+
</li>
111+
))}
112+
</ul>
113+
<Link
114+
href='/join-us'
115+
className='text-white bg-mf-red font-medium text-base rounded-full px-5 py-2 text-center tracking-wide'
116+
>
117+
Join Us!
118+
</Link>
119+
</div>
120+
</div>
121+
122+
{/* Mobile Menu */}
123+
<Disclosure.Panel className='md:hidden px-6 pb-6'>
124+
<ul className='flex flex-col gap-5'>
125+
{navigations.map((navigation, index) => (
126+
<li key={index}>
127+
{navigation.name === "Projects" ? (
128+
<div>
51129
<Link
52-
className='block px-4 py-2 hover:bg-mindfire-text-red hover:text-white'
53-
href={`${navigation.path[2]}#upcoming-projects`}
130+
href={navigation.path[0]}
131+
className='text-mf-red font-semibold'
54132
>
55-
Upcoming Projects
133+
Projects
56134
</Link>
135+
<ul className='ml-4 mt-2 flex flex-col gap-2'>
136+
<li>
137+
<Link
138+
href={`${navigation.path[1]}#current-projects`}
139+
className='text-gray-700 hover:text-mf-red'
140+
>
141+
Current Projects
142+
</Link>
143+
</li>
144+
<li>
145+
<Link
146+
href={`${navigation.path[2]}#upcoming-projects`}
147+
className='text-gray-700 hover:text-mf-red'
148+
>
149+
Upcoming Projects
150+
</Link>
151+
</li>
152+
</ul>
57153
</div>
58-
</div>
59-
) : (
60-
<Link
61-
href={navigation.path[0]}
62-
className={cn(
63-
"group-hover:text-mf-red flex items-center gap-1 align-middle",
64-
{
154+
) : (
155+
<Link
156+
href={navigation.path[0]}
157+
className={cn("flex items-center gap-1", {
65158
"text-mf-red": navigation.path.includes(pathname),
66-
}
67-
)}
68-
{...(navigation.target
69-
? { target: navigation.target }
70-
: {})}
71-
>
72-
<span>{navigation.name}</span>
73-
{navigation.icon && navigation.iconAlt ? (
74-
<ExternalRedirectIcon
75-
height='1.2em'
76-
width='1.2em'
77-
className='group-hover:stroke-mf-red -pt-2 inline-block'
78-
/>
79-
) : null}
80-
</Link>
81-
)}
82-
</li>
83-
))}
84-
</ul>
85-
</div>
86-
<Link
87-
href='/join-us'
88-
type='button'
89-
className='text-white bg-mf-red font-medium text-base rounded-full px-5 py-2 text-center tracking-wide'
90-
>
91-
Join Us!
92-
</Link>
93-
</div>
94-
</header>
159+
})}
160+
{...(navigation.target
161+
? { target: navigation.target }
162+
: {})}
163+
>
164+
<span>{navigation.name}</span>
165+
{navigation.icon && navigation.iconAlt && (
166+
<ExternalRedirectIcon
167+
height='1.2em'
168+
width='1.2em'
169+
className='inline-block'
170+
/>
171+
)}
172+
</Link>
173+
)}
174+
</li>
175+
))}
176+
</ul>
177+
<Link
178+
href='/join-us'
179+
className='mt-6 inline-block text-white bg-mf-red font-medium text-base rounded-full px-5 py-2 text-center tracking-wide'
180+
>
181+
Join Us!
182+
</Link>
183+
</Disclosure.Panel>
184+
</>
185+
)}
186+
</Disclosure>
95187
);
96188
};
97189

‎updateProject.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@ async function getLastContributionDate(username) {
106106
let page = 1;
107107
let hasMoreEvents = true;
108108

109-
while (hasMoreEvents && page <= 3) {
110-
// Check up to 3 pages of events
109+
while (hasMoreEvents && page <= 5) {
110+
// Check up to 5 pages of events
111111
const response = await fetch(
112112
`https://api.github.com/users/${username}/events?per_page=100&page=${page}`,
113113
{

0 commit comments

Comments
 (0)