Skip to content

v2.0.3 - Navigation Header Redesign

Latest
Latest

Choose a tag to compare

View all tags
@reddynsk reddynsk released this 08 Dec 20:04
· 2 commits to main since this release
v2.0.3
38bcefa

🎨 Navigation Header Redesign v2.0.2

A complete redesign of the navigation header featuring dual-state transitions, enhanced mobile experience, and modern glassmorphism effects.

✨ Highlights

Dual-State Navigation Header

  • Top of page: Full-width layout with all 5 navigation links (About, Blog, Skills, Projects, Contact)
  • After scrolling: Compact centered pill with rounded borders, backdrop blur, and 3 essential links (About, Blog, Contact)
  • Smooth 300ms transitions triggered at 10px scroll threshold

Mobile Navigation Overhaul

  • Fullscreen overlay replacing dropdown menu
  • Animated hamburger → X icon morphing
  • Body scroll lock when menu open
  • Slide-right hover effects on navigation items
  • Integrated theme toggle in footer

Desktop Enhancements

  • Expanding underline hover effects
  • Smooth color transitions on interaction
  • India timezone indicator with flag (🇮🇳 IST)
  • Optimized spacing across all breakpoints

🛠️ Technical Changes

New Files

  • src/components/ui/menu-toggle-icon.tsx
  • src/hooks/use-scroll.ts

Modified Files

  • src/components/site-header.tsx (complete rewrite)
  • src/components/mobile-nav.tsx
  • src/components/desktop-nav.tsx
  • src/components/nav.tsx
  • src/components/india-time.tsx
  • src/components/toggle-theme.tsx
  • src/components/command-menu.tsx
  • src/components/icons.tsx
  • src/config/site.ts
  • src/app/(app)/layout.tsx
  • package.json (v1.2.0 → v2.0.2)

📐 Specifications

Feature Value
Mobile Breakpoint 768px (md)
Scroll Trigger 10px
Animation Duration 300ms
Navigation States 2 (default, scrolled)

🧹 Code Quality

  • ✅ Removed all commented code
  • ✅ Removed unused dependencies (@radix-ui/react-slot)
  • ✅ ESLint: All checks passing
  • ✅ TypeScript: No errors
  • ✅ Build: Successful (37 pages)

📱 Responsive Design

Screen Size Behavior
< 768px Fullscreen mobile overlay
≥ 768px Inline desktop navigation
Scrolled Compact centered pill design
Default Full-width transparent header

💡 UX Improvements

  • Reduced visual clutter when scrolling
  • Better spatial awareness with timezone
  • Improved touch targets for mobile
  • Consistent interaction feedback
  • Smooth state transitions

📊 Changes Summary

  • 13 files changed
  • +299 lines added
  • -150 lines removed
  • 2 new components
  • 11 components updated

Built with Next.js 15, TypeScript, Tailwind CSS v4, and Framer Motion

Full Changelog: v1.2.0...v2.0.2

Full Changelog: v2.0.3...v2.0.3

Assets 2
Loading