diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 06cc53a9f..37afb3258 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -1,5 +1,6 @@ import { Footer } from '@/components/layout/Footer'; import { Header } from '@/components/layout/Header'; +import { MobileBottomNav } from '@/components/layout/MobileBottomNav'; import JsonLd from '@/components/JsonLd'; import SkipLink from '@/components/SkipLink'; import AnalyticsShell from '@/components/analytics/AnalyticsShell'; @@ -181,10 +182,11 @@ export default async function Layout(props: {
+
{children} diff --git a/components/blocks/ReferencesSlider.tsx b/components/blocks/ReferencesSlider.tsx index 9ea07fc55..daefb25fa 100644 --- a/components/blocks/ReferencesSlider.tsx +++ b/components/blocks/ReferencesSlider.tsx @@ -101,7 +101,7 @@ export function ReferencesSlider(props: ReferencesSliderProps) { onMouseLeave={onMouseLeave} onMouseUp={onMouseUp} onMouseMove={onMouseMove} - className={`flex gap-6 overflow-x-auto pb-12 pt-4 px-[calc((100vw-min(100%,1280px))/2)] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} + className={`flex gap-6 overflow-x-auto pb-12 pt-4 px-[max(1rem,calc((100vw-1280px)/2))] md:px-[max(2rem,calc((100vw-1280px)/2))] lg:px-[max(2.5rem,calc((100vw-1280px)/2))] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden ${isDragging ? 'cursor-grabbing snap-none' : 'cursor-grab snap-x snap-mandatory'}`} > {references.map((ref, i) => { const imgSrc = (ref.image && typeof ref.image === 'object' && ref.image.url) diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx index f776e373a..f020c51f8 100644 --- a/components/layout/Footer.tsx +++ b/components/layout/Footer.tsx @@ -18,7 +18,7 @@ export function Footer({ companyInfo }: FooterProps) { const locale = useLocale(); return ( -
- - {/* Mobile Menu Overlay */} - - {isMobileMenuOpen && ( - - - - )} - ); } diff --git a/components/layout/MobileBottomNav.tsx b/components/layout/MobileBottomNav.tsx new file mode 100644 index 000000000..d136056e2 --- /dev/null +++ b/components/layout/MobileBottomNav.tsx @@ -0,0 +1,101 @@ +'use client'; + +import * as React from 'react'; +import { usePathname } from 'next/navigation'; +import { TransitionLink } from '@/components/ui/TransitionLink'; +import { Home, Briefcase, Users, Mail } from 'lucide-react'; +import { motion } from 'framer-motion'; + +export interface NavLink { + label: string; + url: string; +} + +interface MobileBottomNavProps { + navLinks: NavLink[]; + currentLocale: string; +} + +export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProps) { + const pathname = usePathname() || '/'; + + // Construct our bottom nav items based on the passed links + const items = React.useMemo(() => { + const homeUrl = `/${currentLocale}`; + + // Find the specific links from the provided navLinks (which might be translated) + // We do a simple match based on index or keywords if needed, but since we know the order: + // 0: Kompetenzen, 1: Über uns, 2: Karriere, 3: Messen + const competenciesUrl = navLinks[0]?.url || `/${currentLocale}/kompetenzen`; + const aboutUrl = navLinks[1]?.url || `/${currentLocale}/ueber-uns`; + const contactUrl = `/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`; + + return [ + { + label: currentLocale === 'de' ? 'Start' : 'Home', + url: homeUrl, + icon: , + exactMatch: true + }, + { + label: navLinks[0]?.label || (currentLocale === 'de' ? 'Kompetenzen' : 'Competencies'), + url: competenciesUrl, + icon: + }, + { + label: navLinks[1]?.label || (currentLocale === 'de' ? 'Über uns' : 'About Us'), + url: aboutUrl, + icon: + }, + { + label: currentLocale === 'de' ? 'Kontakt' : 'Contact', + url: contactUrl, + icon: + } + ]; + }, [currentLocale, navLinks]); + + return ( +
+ +
+ ); +}