Skip to content

Commit 8a7b7cd

Browse files
Copilotaymanaboghonim
Copilot
and
aymanaboghonim
authored
Implement full-screen mobile menu with branded theming and close functionality (#16)
* Initial plan * Implement full-screen mobile menu with theming and X icon Co-authored-by: aymanaboghonim <62246708+aymanaboghonim@users.noreply.github.com> * Refactor: Extract magic numbers and colors to CSS variables Co-authored-by: aymanaboghonim <62246708+aymanaboghonim@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: aymanaboghonim <62246708+aymanaboghonim@users.noreply.github.com>
1 parent 7ab2ae0 commit 8a7b7cd

File tree

3 files changed

+94
-43
lines changed

3 files changed

+94
-43
lines changed

‎src/components/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ export default function Header() { const [scrolled, setScrolled] = useState(fal
152152
</div>
153153
</div>
154154
)}
155-
{isMobile && menuOpen && <div className="elmentor-menu-backdrop" onClick={closeMenu} tabIndex={-1} aria-hidden="true"></div>}
155+
{isMobile && <div className={`elmentor-menu-backdrop${menuOpen ? ' open' : ''}`} onClick={closeMenu} tabIndex={-1} aria-hidden="true"></div>}
156156
</header>
157157
);
158158
}

‎src/styles/Header.css‎

Lines changed: 85 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -125,35 +125,51 @@
125125
flex-direction: column;
126126
justify-content: center;
127127
align-items: center;
128-
width: 44px; /* Microsoft uses larger touch targets */
128+
width: 44px;
129129
height: 44px;
130130
background: none;
131131
border: none;
132132
cursor: pointer;
133-
z-index: 1100;
133+
z-index: 1300;
134+
padding: 0;
135+
position: relative;
134136
}
135137
.hamburger-bar {
136138
width: 22px;
137-
height: 2px; /* Microsoft uses thinner lines */
138-
background: var(--color-gray-800); /* Microsoft uses consistent dark color */
139-
margin: 4px 0; /* Microsoft has more spacing between bars */
140-
border-radius: 0; /* Microsoft uses flat lines */
141-
transition: var(--transition-all);
139+
height: 2px;
140+
background: var(--color-white);
141+
margin: 4px 0;
142+
border-radius: 0;
143+
transition: all 0.3s ease;
144+
transform-origin: center;
142145
}
143146
.elmentor-header.scrolled .hamburger-bar {
144-
background: var(--color-gray-800); /* Microsoft maintains consistent color */
147+
background: var(--color-gray-800);
148+
}
149+
/* Transform hamburger to X when menu is open */
150+
.elmentor-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
151+
transform: rotate(45deg) translate(var(--hamburger-transform-offset), var(--hamburger-transform-offset));
152+
background: var(--color-gray-800);
153+
}
154+
.elmentor-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
155+
opacity: 0;
156+
transform: scale(0);
157+
}
158+
.elmentor-hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
159+
transform: rotate(-45deg) translate(var(--hamburger-transform-offset), calc(-1 * var(--hamburger-transform-offset)));
160+
background: var(--color-gray-800);
145161
}
146162
/* Mobile Styles */
147163
@media (max-width: 900px) {
148164
.elmentor-hamburger {
149165
display: flex !important;
150-
position: fixed;
151-
right: var(--spacing-lg);
152-
top: var(--spacing-md);
166+
position: relative;
167+
right: auto;
168+
top: auto;
153169
transform: none;
154-
background: var(--color-primary);
155-
border-radius: 50%;
156-
box-shadow: var(--shadow-md);
170+
background: transparent;
171+
border-radius: 0;
172+
box-shadow: none;
157173
}
158174
.elmentor-nav-links {
159175
display: none !important;
@@ -174,68 +190,88 @@
174190
left: 0;
175191
width: 100vw;
176192
height: 100vh;
177-
background: var(--color-white); /* Microsoft uses white background */
178-
color: var(--color-gray-800);
193+
background: linear-gradient(135deg, var(--color-mobile-menu-bg-start) 0%, var(--color-mobile-menu-bg-end) 100%);
194+
color: var(--color-white);
179195
z-index: 1200;
180196
flex-direction: column;
181-
align-items: flex-start; /* Microsoft aligns to left */
182-
justify-content: flex-start; /* Microsoft starts from top */
183-
padding: calc(var(--spacing-4xl) + 40px) var(--spacing-xl) var(--spacing-xl); /* Account for header */
184-
transition: var(--transition-all);
197+
align-items: flex-start;
198+
justify-content: flex-start;
199+
padding: calc(var(--spacing-4xl) + 40px) var(--spacing-xl) var(--spacing-xl);
200+
transition: opacity 0.3s ease, transform 0.3s ease;
185201
opacity: 0;
202+
transform: translateY(-20px);
186203
pointer-events: none;
187-
box-shadow: var(--shadow-lg); /* Microsoft uses subtle shadows */
204+
overflow-y: auto;
188205
}
189206
.elmentor-mobile-menu.open {
190207
display: flex;
191208
opacity: 1;
209+
transform: translateY(0);
192210
pointer-events: auto;
193211
}
194212
.elmentor-mobile-menu ul {
195213
list-style: none;
196214
padding: 0;
197-
margin: 0 0 var(--spacing-xl) 0;
215+
margin: 0 0 var(--spacing-2xl) 0;
198216
display: flex;
199217
flex-direction: column;
200-
gap: var(--spacing-lg); /* Microsoft uses consistent spacing */
201-
align-items: flex-start; /* Microsoft aligns to left */
202-
width: 100%; /* Full width for touch targets */
218+
gap: var(--spacing-md);
219+
align-items: flex-start;
220+
width: 100%;
203221
}
204222
.elmentor-mobile-menu a {
205-
color: var(--color-gray-800); /* Microsoft uses dark gray */
206-
font-size: var(--font-size-lg); /* Microsoft uses consistent font sizes */
207-
font-weight: var(--font-weight-medium);
223+
color: var(--color-white);
224+
font-size: var(--font-size-2xl);
225+
font-weight: var(--font-weight-semibold);
208226
text-decoration: none;
209-
transition: var(--transition-all);
210-
padding: var(--spacing-sm) 0;
227+
transition: all 0.3s ease;
228+
padding: var(--spacing-md) 0;
211229
display: block;
212-
width: 100%; /* Full width for touch targets */
230+
width: 100%;
231+
border-bottom: 2px solid transparent;
232+
letter-spacing: 0.5px;
213233
}
214234
.elmentor-mobile-menu a:hover,
215235
.elmentor-mobile-menu a:focus {
216-
color: var(--color-primary); /* Microsoft uses primary blue */
236+
color: var(--color-white);
237+
border-bottom: 2px solid var(--color-white);
238+
transform: translateX(8px);
217239
outline: none;
218240
}
219241
.elmentor-lang-switcher-mobile {
220242
display: flex;
221243
gap: var(--spacing-md);
222244
align-items: center;
223-
margin-top: var(--spacing-xl);
224-
border-top: 1px solid var(--color-gray-200); /* Microsoft-style separator */
225-
padding-top: var(--spacing-lg);
245+
margin-top: auto;
246+
padding-top: var(--spacing-2xl);
247+
border-top: 1px solid rgba(255, 255, 255, 0.2);
226248
width: 100%;
227249
}
228250

229251
.elmentor-lang-switcher-mobile .lang-btn {
230-
color: var(--color-gray-700);
231-
font-size: var(--font-size-base);
232-
text-shadow: none; /* Microsoft doesn't use text shadows */
233-
padding: var(--spacing-xs) var(--spacing-sm);
252+
color: var(--color-white);
253+
font-size: var(--font-size-lg);
254+
font-weight: var(--font-weight-semibold);
255+
text-shadow: none;
256+
padding: var(--spacing-sm) var(--spacing-md);
257+
background: rgba(255, 255, 255, 0.1);
258+
border-radius: var(--border-radius-sm);
259+
transition: all 0.3s ease;
260+
}
261+
262+
.elmentor-lang-switcher-mobile .lang-btn:hover,
263+
.elmentor-lang-switcher-mobile .lang-btn:focus {
264+
background: rgba(255, 255, 255, 0.2);
265+
}
266+
267+
.elmentor-lang-switcher-mobile .lang-btn.active {
268+
background: rgba(255, 255, 255, 0.25);
269+
text-decoration: none;
234270
}
235271

236272
.elmentor-lang-switcher-mobile .lang-divider {
237-
color: var(--color-gray-400);
238-
opacity: 1; /* Microsoft uses full opacity with lighter colors */
273+
color: rgba(255, 255, 255, 0.5);
274+
opacity: 1;
239275
}
240276

241277
.elmentor-menu-backdrop {
@@ -244,6 +280,13 @@
244280
left: 0;
245281
width: 100vw;
246282
height: 100vh;
247-
background: rgba(0,0,0,0.2);
283+
background: var(--color-mobile-menu-backdrop);
248284
z-index: 1100;
285+
opacity: 0;
286+
transition: opacity 0.3s ease;
287+
pointer-events: none;
288+
}
289+
.elmentor-menu-backdrop.open {
290+
opacity: 1;
291+
pointer-events: auto;
249292
}

‎src/styles/globals.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@
2525
--color-gray-800: #262626;
2626
--color-gray-900: #171717;
2727

28+
/* Mobile Menu Colors */
29+
--color-mobile-menu-bg-start: rgba(0, 69, 120, 0.98);
30+
--color-mobile-menu-bg-end: rgba(0, 120, 212, 0.98);
31+
--color-mobile-menu-backdrop: rgba(0, 0, 0, 0.5);
32+
33+
/* Animation & Transform Values */
34+
--hamburger-transform-offset: 7px;
35+
2836
/* Typography */
2937
--font-family-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
3038
--font-family-heading: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

0 commit comments

Comments
 (0)