hide accessibility toggle on mobile, add accessibility button to mobile menu with collapsible bar #deploy

This commit is contained in:
martin 2026-01-24 19:18:54 +01:00
parent a460cbd99c
commit c618d80099
3 changed files with 29 additions and 7 deletions

View File

@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */} {/* Toggle Button */}
<Button <Button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg" className="fixed top-20 right-4 z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg hidden md:flex"
aria-label="Barrierefreiheitsoptionen" aria-label="Barrierefreiheitsoptionen"
> >
{isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />} {isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}

View File

@ -1,13 +1,15 @@
import { useState } from 'react'; import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom'; import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Menu, X, Phone, Home, Shield, FileText, Truck, Users, Search } from 'lucide-react'; import { Menu, X, Phone, Home, Shield, FileText, Truck, Users, Search, Accessibility } from 'lucide-react';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import LanguageSwitcher from '@/components/LanguageSwitcher'; import LanguageSwitcher from '@/components/LanguageSwitcher';
import AccessibilityBar from '@/components/AccessibilityBar';
const Header = () => { const Header = () => {
const { t } = useTranslation('nav'); const { t } = useTranslation('nav');
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isAccessibilityOpen, setIsAccessibilityOpen] = useState(false);
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
@ -163,10 +165,23 @@ const Header = () => {
{isMenuOpen && ( {isMenuOpen && (
<div className="md:hidden border-t py-4"> <div className="md:hidden border-t py-4">
<nav className="flex flex-col space-y-2"> <nav className="flex flex-col space-y-2">
{/* Language Switcher (Mobile) */} {/* Language & Accessibility Section (Mobile) */}
<div className="px-3 py-2 border-b border-gray-200"> <div className="px-3 py-2 border-b border-gray-200">
<div className="text-xs font-medium text-gray-500 mb-2">Sprache / Language</div> <div className="text-xs font-medium text-gray-500 mb-2">Sprache / Language</div>
<div className="flex items-center justify-between">
<LanguageSwitcher /> <LanguageSwitcher />
<button
onClick={() => setIsAccessibilityOpen(!isAccessibilityOpen)}
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-200 border ${
isAccessibilityOpen
? 'text-blue-600 bg-blue-50 border-blue-200 shadow-sm'
: 'text-gray-700 bg-white border-gray-200 hover:text-blue-600 hover:bg-gray-50 hover:border-blue-200'
}`}
aria-label="Barrierefreiheit"
>
<Accessibility className="h-4 w-4" strokeWidth={1.5} />
</button>
</div>
</div> </div>
{[...navigation, ...rightMenuItems].map((item) => { {[...navigation, ...rightMenuItems].map((item) => {
@ -190,6 +205,13 @@ const Header = () => {
); );
})} })}
</nav> </nav>
{/* Mobile Accessibility Bar */}
{isAccessibilityOpen && (
<div className="mt-4 pt-4 border-t border-gray-200">
<AccessibilityBar />
</div>
)}
</div> </div>
)} )}
</div> </div>

View File

@ -102,8 +102,8 @@ const Layout = ({ children }: LayoutProps) => {
<AccessibilityToggle /> <AccessibilityToggle />
<div className="fixed bottom-6 right-6 z-50 flex flex-col items-end gap-3"> <div className="fixed bottom-6 right-[calc(1rem+140px)] z-50 flex flex-col items-end gap-3 md:right-[calc(1rem+180px)] sm:right-[calc(1rem+90px)]">
{showToTop ? ( {showToTop && (
<Button <Button
type="button" type="button"
variant="outline" variant="outline"
@ -114,7 +114,7 @@ const Layout = ({ children }: LayoutProps) => {
> >
<ArrowUp className="h-5 w-5 text-blue-700" /> <ArrowUp className="h-5 w-5 text-blue-700" />
</Button> </Button>
) : null} )}
<Button asChild className="h-12 rounded-full px-6 bg-blue-600 hover:bg-blue-700 shadow-lg"> <Button asChild className="h-12 rounded-full px-6 bg-blue-600 hover:bg-blue-700 shadow-lg">
<Link to="/contact#contact"> <Link to="/contact#contact">