Skip to content

Commit 5d1e485

Browse files
tabyrockettabyrocket
committed
Mobile improvements
Navbar + events dropdown
1 parent 00ce488 commit 5d1e485

File tree

2 files changed

+58
-103
lines changed

2 files changed

+58
-103
lines changed

‎src/app/(frontend)/components/EventDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const EventDropdown: React.FC<EventDropdownProps> = ({
6161
{open && (
6262
<div className="mt-4 flex flex-col md:flex-row gap-4">
6363
<div className="md:basis-3/5" style={{ color: desc}}>
64-
<p className="md:hidden text-2xl font-semibold font-[Montserrat] text-purple-800 mb-3">{date}</p>
64+
<p className="md:hidden text-2xl font-semibold font-[Montserrat] mb-3" style={{ color: desc }}>{date}</p>
6565
<div className="text-lg font-[Montserrat]">{description}</div>
6666
</div>
6767
<div className="md:basis-2/5 flex flex-col gap-2">

‎src/app/(frontend)/components/Navbar.tsx‎

Lines changed: 57 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,6 @@ export default function Navbar() {
316316
{/* Hamburger button for dropdown menu (mobile) */}
317317
{/* Mobile hamburger + logo row */}
318318
<div className="navbar-mobile-row">
319-
{/* Rainbow Engineering button (logo) on mobile */}
320319
<Link
321320
href="/"
322321
style={{
@@ -325,11 +324,11 @@ export default function Navbar() {
325324
textDecoration: "none",
326325
padding: "0.25rem 0.75rem",
327326
borderRadius: "12px",
328-
color: "#5f249f",
327+
color: isDark ? "#F4EFFF" : "#5f249f",
329328
fontWeight: "bold",
330329
fontFamily: "Montserrat, sans-serif",
331-
fontSize: "1.2rem",
332-
background: "#ccb8f0",
330+
fontSize: "1.5rem",
331+
background: isDark ? "#1C1730" : "#ccb8f0",
333332
border: "none",
334333
boxShadow: "none",
335334
transition: "background 0.2s, color 0.2s, border-radius 0.2s, border 0.2s",
@@ -339,15 +338,12 @@ export default function Navbar() {
339338
<Image
340339
src="/rainbow_logo_bb.png"
341340
alt="Rainbow Logo"
342-
width={100}
343-
height={100}
341+
width={110}
342+
height={110}
344343
style={{ objectFit: "contain" }}
345344
priority
346345
/>
347-
<span className="rainbow-title">
348-
<span>Rainbow</span>
349-
<span>Engineering</span>
350-
</span>
346+
{/* Removed Rainbow Engineering text for mobile logo */}
351347
</Link>
352348
<button
353349
className={`hamburger ${open ? "is-open" : ""} navbar-mobile`}
@@ -361,93 +357,6 @@ export default function Navbar() {
361357
<span />
362358
<span />
363359
</button>
364-
{/* Rainbow Engineering button (logo) on mobile */}
365-
<Link
366-
href="/"
367-
style={{
368-
display: "flex",
369-
alignItems: "center",
370-
textDecoration: "none",
371-
padding: "0.25rem 0.75rem",
372-
borderRadius: "12px",
373-
// Mobile logo text: dark mode = #F4EFFF (main text), light = #5f249f (purple)
374-
color: isDark ? "#F4EFFF" : "#5f249f",
375-
fontWeight: "bold",
376-
fontFamily: "Montserrat, sans-serif",
377-
fontSize: "1.5rem",
378-
// Mobile logo background matches navbar
379-
background: isDark ? "#1C1730" : "#ccb8f0",
380-
border: "none",
381-
boxShadow: "none",
382-
transition: "background 0.2s, color 0.2s, border-radius 0.2s, border 0.2s",
383-
height: "60px",
384-
flex: 1
385-
}}
386-
>
387-
<Image
388-
src="/rainbow_logo_bb.png"
389-
alt="Rainbow Logo"
390-
width={110}
391-
height={110}
392-
style={{ objectFit: "contain" }}
393-
priority
394-
/>
395-
<span style={{
396-
marginLeft: "1rem",
397-
// Mobile logo span text: dark mode = #F4EFFF, light = #5f249f
398-
color: isDark ? "#F4EFFF" : "#5f249f",
399-
fontWeight: "bold",
400-
fontFamily: "Montserrat, sans-serif",
401-
fontSize: "1.5rem",
402-
display: "flex",
403-
flexDirection: "column",
404-
lineHeight: 1.1
405-
}}>
406-
<span>Rainbow</span>
407-
<span>Engineering</span>
408-
</span>
409-
</Link>
410-
{/* Theme toggle button (mobile) - same functionality as desktop */}
411-
<button
412-
onClick={toggleDarkMode}
413-
aria-label="Toggle theme"
414-
className="navbar-mobile"
415-
style={{
416-
padding: "0.5rem",
417-
marginLeft: "0.5rem",
418-
borderRadius: "12px",
419-
// Mobile button background: dark mode = #7E57C2, light = #5f249f
420-
background: isDark ? "#7E57C2" : "#5f249f",
421-
border: "none",
422-
cursor: "pointer",
423-
display: "flex",
424-
alignItems: "center",
425-
justifyContent: "center",
426-
width: "48px",
427-
height: "48px",
428-
boxShadow: "0 2px 8px rgba(127,21,215,0.12)",
429-
transition: "transform 0.2s, background 0.2s",
430-
}}
431-
>
432-
{/* Show sun icon in dark mode, moon icon in light mode */}
433-
{isDark ? (
434-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F4EFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
435-
<circle cx="12" cy="12" r="5"></circle>
436-
<line x1="12" y1="1" x2="12" y2="3"></line>
437-
<line x1="12" y1="21" x2="12" y2="23"></line>
438-
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
439-
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
440-
<line x1="1" y1="12" x2="3" y2="12"></line>
441-
<line x1="21" y1="12" x2="23" y2="12"></line>
442-
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
443-
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
444-
</svg>
445-
) : (
446-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#f1eafb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
447-
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
448-
</svg>
449-
)}
450-
</button>
451360
</div>
452361
{/* Dropdown menu for mobile displays */}
453362
<div
@@ -471,7 +380,6 @@ export default function Navbar() {
471380
{navLinks.filter(link => !link.isLogo).map(({ href, label }) => (
472381
// Each dropdown item with border
473382
<li key={href} style={{
474-
// Border color: dark mode = #3D3463 (border/divider), light = #5f249f
475383
borderBottom: isDark ? "1px solid #3D3463" : "1px solid #5f249f"
476384
}}>
477385
<Link
@@ -482,7 +390,6 @@ export default function Navbar() {
482390
alignItems: "center",
483391
padding: "1rem 1rem 1rem 3rem",
484392
textDecoration: "none",
485-
// Dropdown link text: dark mode = #F4EFFF (main text), light = #5f249f
486393
color: isDark ? "#F4EFFF" : "#5f249f",
487394
fontWeight: "bold",
488395
fontFamily: "Montserrat, sans-serif",
@@ -494,11 +401,59 @@ export default function Navbar() {
494401
</Link>
495402
</li>
496403
))}
404+
{/* Dark mode toggle button inside hamburger menu */}
405+
<li style={{ borderBottom: isDark ? "1px solid #3D3463" : "1px solid #5f249f", textAlign: "left" }}>
406+
<button
407+
onClick={toggleDarkMode}
408+
aria-label="Toggle theme"
409+
style={{
410+
margin: "1rem 0 1rem 3rem",
411+
padding: "0.5rem 1.5rem",
412+
borderRadius: "12px",
413+
background: isDark ? "#7E57C2" : "#5f249f",
414+
color: isDark ? "#F4EFFF" : "#f1eafb",
415+
border: "none",
416+
cursor: "pointer",
417+
fontWeight: "bold",
418+
fontFamily: "Montserrat, sans-serif",
419+
fontSize: "1.2rem",
420+
display: "inline-flex",
421+
alignItems: "center",
422+
justifyContent: "flex-start",
423+
boxShadow: "0 2px 8px rgba(127,21,215,0.12)",
424+
transition: "transform 0.2s, background 0.2s"
425+
}}
426+
>
427+
{isDark ? (
428+
<>
429+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#F4EFFF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "0.5rem" }}>
430+
<circle cx="12" cy="12" r="5"></circle>
431+
<line x1="12" y1="1" x2="12" y2="3"></line>
432+
<line x1="12" y1="21" x2="12" y2="23"></line>
433+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
434+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
435+
<line x1="1" y1="12" x2="3" y2="12"></line>
436+
<line x1="21" y1="12" x2="23" y2="12"></line>
437+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
438+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
439+
</svg>
440+
Light Mode
441+
</>
442+
) : (
443+
<>
444+
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f1eafb" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: "0.5rem" }}>
445+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
446+
</svg>
447+
Dark Mode
448+
</>
449+
)}
450+
</button>
451+
</li>
497452
</ul>
498453
</div>
499454
</nav>
500-
{/* Spacer to prevent navbar overlap */}
501-
<div style={{ height: "60px" }} />
502-
</>
455+
{/* Spacer to prevent navbar overlap */}
456+
<div style={{ height: "60px" }}></div>
457+
</>
503458
);
504459
}

0 commit comments

Comments
 (0)