martin/marian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AccessibilityToggle.tsx
View File

@ -49,7 +49,7 @@ const AccessibilityToggle = () => {
{/* Toggle Button */}
<Button
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"
>
{isOpen ? <X className="w-5 h-5" /> : <Accessibility className="w-5 h-5" />}

26
src/components/Header.tsx
View File

@ -1,13 +1,15 @@
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
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 LanguageSwitcher from '@/components/LanguageSwitcher';
import AccessibilityBar from '@/components/AccessibilityBar';
const Header = () => {
const { t } = useTranslation('nav');
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isAccessibilityOpen, setIsAccessibilityOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const [searchQuery, setSearchQuery] = useState('');
@ -163,10 +165,23 @@ const Header = () => {
{isMenuOpen && (
<div className="md:hidden border-t py-4">
<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="text-xs font-medium text-gray-500 mb-2">Sprache / Language</div>
<div className="flex items-center justify-between">
<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>
{[...navigation, ...rightMenuItems].map((item) => {
@ -190,6 +205,13 @@ const Header = () => {
);
})}
</nav>
{/* Mobile Accessibility Bar */}
{isAccessibilityOpen && (
<div className="mt-4 pt-4 border-t border-gray-200">
<AccessibilityBar />
</div>
)}
</div>
)}
</div>

6
src/components/Layout.tsx
View File

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