Documentation Index
Fetch the complete documentation index at: https://mintlify.com/MC-World-Compressor/Frontend/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Navbar component is the primary navigation bar displayed at the top of every page. It includes the application logo, language selector, FAQ link, GitHub link, and a compress action button. The component supports internationalization and dark mode.
Props
The current locale for translations (e.g., ‘en’, ‘es’, ‘hi’, ‘ar’)
Key Features
- Responsive Design: Adapts to mobile and desktop screens with conditional rendering
- Dark Mode Support: Automatic dark mode styling with Tailwind classes
- Internationalization: Uses translation system via
getPageTranslations
- Logo Display: Shows the MC World Compressor logo with Next.js Image optimization
- Language Selection: Integrates the
LanguageSelector component
- Quick Actions: FAQ navigation and GitHub repository link
- Primary CTA: Prominent “Compress” button to navigate to upload page
Usage Example
import Navbar from '@/components/Navbar';
export default function Layout({ params }) {
const locale = params.locale || 'en';
return (
<div>
<Navbar locale={locale} />
{/* Page content */}
</div>
);
}
Implementation
import Link from "next/link";
import Image from "next/image";
import LanguageSelector from "./LanguageSelector";
import { getPageTranslations } from "@/lib/translations";
export default function Navbar({ locale = "en" }) {
const t = getPageTranslations(locale, "nav");
console.log("Navbar locale:", locale);
return (
<nav className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 py-3 px-4 md:px-6">
<div className="w-full flex items-center justify-between">
<Link href={`/${locale}`} className="flex items-center">
<Image
src="/assets/img/logo.webp"
alt="Logo"
width={40}
height={40}
className="rounded-full"
/>
<span className="ml-2 text-xl font-bold text-gray-900 dark:text-white hidden sm:inline">
MC World Compressor
</span>
</Link>
<div className="flex items-center gap-2">
<div className="flex items-center gap-1">
<LanguageSelector locale={locale} />
<Link
href={`/${locale}#faq`}
className="px-4 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
>
FAQ
</Link>
<a
href="https://github.com/MC-World-Compressor/"
target="_blank"
rel="noopener"
className="p-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors flex items-center"
aria-label="GitHub"
>
<svg
viewBox="0 0 24 24"
fill="currentColor"
className="w-6 h-6"
aria-hidden="true"
>
<path d="M12 2C6.477 2 2 6.484 2 12.021c0 4.428 2.865 8.184 6.839 9.504.5.092.682-.217.682-.483 0-.237-.009-.868-.014-1.703-2.782.605-3.369-1.342-3.369-1.342-.454-1.157-1.11-1.465-1.11-1.465-.908-.62.069-.608.069-.608 1.004.07 1.532 1.032 1.532 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.339-2.221-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.025A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.295 2.748-1.025 2.748-1.025.546 1.378.202 2.397.1 2.65.64.7 1.028 1.595 1.028 2.688 0 3.847-2.337 4.695-4.566 4.944.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.749 0 .268.18.579.688.481C19.138 20.2 22 16.448 22 12.021 22 6.484 17.523 2 12 2z" />
</svg>
</a>
</div>
<Link
href={`/${locale}/upload`}
className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors"
>
{t.compress}
</Link>
</div>
</div>
</nav>
);
}
Translation Keys
The component uses the following translation keys from the nav namespace:
t.compress - Text for the compress button (varies by locale)
Styling
The Navbar uses Tailwind CSS utility classes for:
- Responsive padding and spacing
- Dark mode color schemes
- Smooth hover transitions
- Flexbox layout for alignment
- Border styling for visual separation
Dependencies
next/link - Client-side navigationnext/image - Optimized image loading@/components/LanguageSelector - Language switching component@/lib/translations - Translation utilities
