Skip to content

navbar cleanup #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lazarusA merged 1 commit into from
Aug 22, 2025
Merged

navbar cleanup #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
--border: oklch(0.2 0 0 / 10%);
/* Default light theme colors */
--background-funding: rgb(0, 109, 102);
--navbar-bg: rgba(255, 255, 255, 0.95);
--navbar-bg: rgba(255, 255, 255, 0.15);
--navbar-border: #E1E5EB;
--link-color: #1E293B;
--secondary-link-color: #4B5563;
Expand Down Expand Up @@ -67,6 +67,9 @@

[data-theme='light'] {
--funding-text: #ebebed;
a:hover {
color:var(--accent-2); /* Remove hover color for light theme */
}
}

[data-theme='dark'] {
Expand All @@ -90,7 +93,7 @@

/* Dark theme custom colors */
--background-funding: rgb(32, 33, 38);
--navbar-bg: rgba(22, 22, 24, 0.95);
--navbar-bg: rgba(22, 22, 24, 0.15);
--navbar-border:var(--border);
--link-color: #e2e8f0;
--secondary-link-color: #c4c6ca;
Expand Down Expand Up @@ -146,8 +149,9 @@ a {
transition: color 0.3s ease;
}

/* Use accent-1 color for all hover links */
a:hover {
color: var(--accent-1); /* Use accent-1 color for all hover links */
color: var(--accent-3);
}

/* Paragraph Styling */
Expand Down
21 changes: 10 additions & 11 deletions src/app/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,15 @@ export default function Landing() {
{/* Hero Content */}
<div className="relative z-10 flex flex-col items-center text-center max-w-4xl px-6 pt-24">
{/* Small badge */}
<div className="mb-4 inline-flex items-center gap-2 rounded-full bg-gray-600/20 px-4 py-1 text-sm text-white hover:bg-gray-900/30 transition">
<Link href="/science/weathergenerator" className="flex items-center gap-2">
<WiStars size={18} className="text-white-300" />
<span>New: WeatherGenerator Project</span>
</Link>
</div>
<div className="mb-4 inline-flex items-center gap-2 rounded-full bg-white/5 px-4 py-1 text-sm hover:bg-black/80 dark:bg-black/20 dark:hover:bg-transparent/20 transition-colors">
<Link href="/science/weathergenerator" className="flex items-center gap-2">
<WiStars size={24} />
New: WeatherGenerator Project
</Link>
</div>

{/* Main headline */}
<h1 className="text-4xl md:text-6xl font-bold leading-tight text-white">
<h1 className="text-4xl md:text-6xl font-bold leading-tight">
Forecasting Earth’s Future with AI
</h1>

Expand All @@ -49,22 +49,21 @@ export default function Landing() {
we help predict the future of Earth’s surface.
</p>

{/* CTA */}
<div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
className="bg-gradient-to-r from-blue-600 to-teal-600 hover:from-blue-700 hover:to-teal-700 text-white px-8"
asChild
>
<a href="/science">Explore Our Research</a>
<Link href="/science" className="cursor-pointer">Explore Our Research</Link>
</Button>
<Button
size="lg"
variant="outline"
className="border-2 border-gray-300 text-gray-200 bg-black hover:bg-gray-200/10"
className="border-2 border-gray-300 text-gray-200 bg-black hover:bg-gray-900/80"
asChild
>
<Link href="/resources/datasets">Access Datasets</Link>
<Link href="/resources/datasets"><span>Access Datasets</span></Link>
</Button>
</div>
</div>
Expand Down
109 changes: 73 additions & 36 deletions src/components/Menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client'

import { useState } from 'react'
import { useState, useEffect } from 'react'
import LogoProject from './Logo'
import ThemeToggle from '@/components/ThemeToggle'
import Socials from '@/components/Socials'
Expand All @@ -11,55 +11,92 @@ import { socialLinks } from '@/utils/socials'

export default function Menu() {
const [isOpen, setIsOpen] = useState(false)

// Enhanced scroll lock effect
useEffect(() => {
if (isOpen) {
// Save current scroll position
const scrollY = window.scrollY
// Add styles to prevent background scroll while maintaining position
document.body.style.position = 'fixed'
document.body.style.top = `-${scrollY}px`
document.body.style.width = '100%'
} else {
// Restore scroll position when menu closes
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
document.body.style.width = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}

return () => {
// Cleanup styles on unmount
document.body.style.position = ''
document.body.style.top = ''
document.body.style.width = ''
}
}, [isOpen])

const handleLinkClick = () => {
setIsOpen(false)
}

return (
<nav className="fixed top-0 left-0 right-0 bg-[var(--navbar-bg)] border-b border-[var(--navbar-border)] z-50">
<div className="max-w-[1440px] mx-auto px-2 md:px-8 py-1">
<div className="flex justify-between h-12">
<div className="flex">
<LogoProject icon="/logo.png" title={navigation[0]?.name || ''} />
<div className="hidden md:ml-6 md:block py-1">
<DesktopMenu items={navigation} />
<nav className="fixed top-0 left-0 right-0 z-50">
{/* Blur backdrop as pseudo-element */}
<div className="absolute inset-0 bg-[var(--navbar-bg)]">
<div className="absolute inset-0 backdrop-blur-[10px] backdrop-saturate-[180%]" />
</div>

{/* Main content with higher z-index */}
<div className="relative z-10">
<div className="max-w-[1440px] mx-auto px-2 md:px-8 py-1">
<div className="flex justify-between h-12">
<div className="flex">
<LogoProject icon="/logo.png" title={navigation[0]?.name || ''} />
<div className="hidden md:ml-6 md:block py-1">
<DesktopMenu items={navigation} />
</div>
</div>
</div>
<div className="hidden md:flex items-center space-x-4">
<div className="hidden lg:block">
<Socials socialLinks={socialLinks} />
<div className="hidden md:flex items-center space-x-4">
<div className="hidden lg:block">
<Socials socialLinks={socialLinks} />
</div>
<ThemeToggle />
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<ThemeToggle />
<button
onClick={() => setIsOpen(!isOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-[var(--secondary-link-color)] hover:text-[var(--link-hover)] hover:bg-[var(--toggle-hover)]"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
) : (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
)}
</button>
</div>
<ThemeToggle />
</div>
{/* Mobile Menu Button */}
<div className="md:hidden flex items-center">
<ThemeToggle />
<button
onClick={() => setIsOpen(!isOpen)}
className="inline-flex items-center justify-center p-2 rounded-md text-[var(--secondary-link-color)] hover:text-[var(--link-hover)] hover:bg-[var(--toggle-hover)]"
>
<span className="sr-only">Open main menu</span>
{!isOpen ? (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
</svg>
) : (
<svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
)}
</button>
</div>
</div>
</div>

{/* Mobile menu */}
{/* Mobile menu with scrolling */}
{isOpen && (
<div className="md:hidden bg-[var(--card)] fixed inset-0 top-12 overflow-y-auto">
<div className="pt-2 px-8 pb-3 space-y-1">
<div className="md:hidden bg-[var(--card)] fixed inset-0 top-12 z-40 overflow-y-auto overscroll-contain">
<div className="pt-2 px-8 pb-3 space-y-1 min-h-[calc(100vh-3rem)]">
<MobileMenu items={navigation} onLinkClick={handleLinkClick} />
<div className="pt-4">
<Socials socialLinks={socialLinks} />
</div>
</div>
<Socials socialLinks={socialLinks} />
</div>
)}
</nav>
Expand Down
Loading