Skip to content

Commit 0fd4870

Browse files
codewithdevcodewithdev
committed
fixed the mobile menu
1 parent 883089b commit 0fd4870

File tree

2 files changed

+34
-19
lines changed

2 files changed

+34
-19
lines changed

‎components/MobileMenu.tsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -45,72 +45,75 @@ export default function MobileMenu() {
4545
<ul
4646
className={cn(
4747
styles.menu,
48-
'flex flex-col fixed top-16 right-0 left-0 bg-gray-100 dark:bg-gray-900 px-6 z-50 items-center py-4 space-y-4',
48+
'flex flex-col fixed mx-auto inset-x-0',
49+
'top-24',
50+
'w-[85%] max-w-sm rounded-lg shadow-lg',
51+
'px-4 py-6 space-y-6',
4952
isMenuRendered && styles.menuRendered
5053
)}
5154
>
5255
<li
53-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
56+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
5457
style={{ transitionDelay: '150ms' }}
5558
>
5659
<Link
5760
href="/"
58-
className="flex w-auto pb-4 justify-center"
61+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
5962
>
6063
Home
6164
</Link>
6265
</li>
6366
<li
64-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
67+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
6568
style={{ transitionDelay: '175ms' }}
6669
>
6770
<Link
6871
href="/about"
69-
className="flex w-auto pb-4 justify-center"
72+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
7073
>
7174
About
7275
</Link>
7376
</li>
7477
<li
75-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
78+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
7679
style={{ transitionDelay: '200ms' }}
7780
>
7881
<Link
7982
href="/guestbook"
80-
className="flex w-auto pb-4 justify-center"
83+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
8184
>
8285
Guestbook
8386
</Link>
8487
</li>
8588
<li
86-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
89+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
8790
style={{ transitionDelay: '225ms' }}
8891
>
8992
<Link
9093
href="/dashboard"
91-
className="flex w-auto pb-4 justify-center"
94+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
9295
>
9396
Dashboard
9497
</Link>
9598
</li>
9699
<li
97-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
100+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
98101
style={{ transitionDelay: '250ms' }}
99102
>
100103
<Link
101104
href="/blog"
102-
className="flex w-auto pb-4 justify-center"
105+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
103106
>
104107
Blog
105108
</Link>
106109
</li>
107110
<li
108-
className="border-b border-gray-300 dark:border-gray-700 text-gray-900 dark:text-gray-100 text-sm font-semibold text-center w-full"
111+
className="text-gray-900 dark:text-gray-100 text-base font-semibold w-full text-center"
109112
style={{ transitionDelay: '275ms' }}
110113
>
111114
<Link
112115
href="/snippets"
113-
className="flex w-auto pb-4 justify-center"
116+
className="flex w-full justify-center pb-3 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
114117
>
115118
Snippets
116119
</Link>

‎pages/about.tsx‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { FaGithub, FaLinkedin, FaGlobe } from 'react-icons/fa';
55
import { FaXTwitter as FaXTwitter } from 'react-icons/fa6';
66
import { LuExternalLink } from "react-icons/lu";
77
import { motion } from 'framer-motion';
8-
import { useState } from 'react';
8+
import { useState, useEffect } from 'react';
99
import { BsArrowLeftCircle, BsArrowRightCircle } from 'react-icons/bs';
1010

1111
import Container from 'components/Container';
@@ -17,6 +17,18 @@ export default function About() {
1717
const { resolvedTheme } = useTheme();
1818
const [currentIndex, setCurrentIndex] = useState(0);
1919
const [direction, setDirection] = useState(0);
20+
const [windowWidth, setWindowWidth] = useState(0);
21+
22+
useEffect(() => {
23+
// Set initial width
24+
setWindowWidth(window.innerWidth);
25+
26+
// Handle resize
27+
const handleResize = () => setWindowWidth(window.innerWidth);
28+
window.addEventListener('resize', handleResize);
29+
30+
return () => window.removeEventListener('resize', handleResize);
31+
}, []);
2032

2133
const timeline = [
2234
{
@@ -120,7 +132,7 @@ export default function About() {
120132
</div>
121133
<p>Technical Writer and Open Source Developer</p>
122134
<h3 className="mb-1">Work Experience</h3>
123-
<div className="relative h-[400px] w-full">
135+
<div className="relative h-[500px] md:h-[400px] w-full">
124136
<div className="absolute inset-0 flex items-center justify-between z-10 px-2">
125137
{currentIndex !== 0 && (
126138
<button
@@ -140,7 +152,7 @@ export default function About() {
140152
)}
141153
</div>
142154

143-
<div className="relative h-full flex justify-center items-center">
155+
<div className="relative h-full flex justify-center items-center overflow-hidden">
144156
{[-1, 0, 1].map((offset) => {
145157
const index = (currentIndex + offset + timeline.length) % timeline.length;
146158
const shouldShow = !(
@@ -154,16 +166,16 @@ export default function About() {
154166
initial={false}
155167
animate={{
156168
scale: offset === 0 ? 1 : 0.8,
157-
x: offset * 260,
169+
x: offset * (windowWidth < 768 ? 160 : 260),
158170
opacity: 1 - Math.abs(offset) * 0.3,
159171
zIndex: 2 - Math.abs(offset)
160172
}}
161173
transition={{
162174
duration: 0.5
163175
}}
164-
className="absolute w-[240px]"
176+
className="absolute w-[180px] md:w-[240px]"
165177
>
166-
<div className={`${timeline[index].bgColor} p-4 rounded-lg shadow-sm dark:border dark:border-gray-700 transition-colors duration-300 relative overflow-hidden`}>
178+
<div className={`${timeline[index].bgColor} p-3 md:p-4 rounded-lg shadow-sm dark:border dark:border-gray-700 transition-colors duration-300 relative overflow-hidden`}>
167179
<div className="flex flex-col items-start space-y-0.5">
168180
<span className="text-xs text-gray-500 dark:text-gray-400">{timeline[index].period}</span>
169181
<h4 className="text-base text-gray-900 dark:text-white">{timeline[index].company}</h4>

0 commit comments

Comments
 (0)