raresj/mypage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📱mobile responsiveness for navbar Menu

Browse Source
This commit is contained in:
RJ
2025-12-05 15:51:16 +02:00
parent bba507a7e8
commit 919e638144
8 changed files with 355 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
components/blog/navbar.tsx
View File

@@ -5,11 +5,13 @@ import { useTranslations } from 'next-intl'
import { Link } from '@/i18n/navigation'
import { ThemeToggle } from '@/components/theme-toggle'
import LanguageSwitcher from '@/components/layout/LanguageSwitcher'
import { GlitchButton } from '@/components/effects/glitch-button'
export function Navbar() {
const t = useTranslations('Navigation')
const [isVisible, setIsVisible] = useState(true)
const [lastScrollY, setLastScrollY] = useState(0)
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
useEffect(() => {
const handleScroll = () => {
@@ -19,6 +21,7 @@ export function Navbar() {
setIsVisible(true)
} else if (currentScrollY > lastScrollY) {
setIsVisible(false)
setIsMobileMenuOpen(false)
} else {
setIsVisible(true)
}
@@ -44,11 +47,12 @@ export function Navbar() {
>
< {t('home')}
</Link>
<span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider">
<span className="font-mono text-sm text-zinc-100 dark:text-zinc-300 uppercase tracking-wider hidden md:block">
// <span style={{ color: 'var(--neon-pink)' }}>{t('blog')}</span> ARCHIVE
</span>
</div>
<div className="flex items-center gap-6">
<div className="hidden md:flex items-center gap-6">
<Link
href="/about"
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer"
@@ -64,7 +68,45 @@ export function Navbar() {
<ThemeToggle />
<LanguageSwitcher />
</div>
<div className="md:hidden flex items-center gap-4">
<GlitchButton
variant="subtle"
glitchColor="cyan"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="font-mono text-sm uppercase tracking-wider px-4 py-2 border-4 border-slate-700 bg-slate-800 dark:bg-zinc-900 text-zinc-100 dark:text-zinc-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500"
aria-label="Toggle mobile menu"
aria-expanded={isMobileMenuOpen}
>
// {isMobileMenuOpen ? 'CLOSE' : 'MENU'}
</GlitchButton>
</div>
</div>
{isMobileMenuOpen && (
<div className="md:hidden mt-4 pt-4 border-t-4 border-slate-700">
<div className="flex flex-col gap-4">
<Link
href="/about"
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer px-4 py-2 border-2 border-slate-700"
onClick={() => setIsMobileMenuOpen(false)}
>
[{t('about')}]
</Link>
<Link
href="/blog"
className="font-mono text-sm text-zinc-400 dark:text-zinc-500 uppercase tracking-wider hover:text-cyan-400 dark:hover:text-cyan-300 transition-colors cursor-pointer px-4 py-2 border-2 border-slate-700"
onClick={() => setIsMobileMenuOpen(false)}
>
[{t('blog')}]
</Link>
<div className="flex items-center gap-4 px-4 py-2">
<ThemeToggle />
<LanguageSwitcher />
</div>
</div>
</div>
)}
</div>
</nav>
)