hide accessibility toggle on mobile, add accessibility button to mobile menu with collapsible bar #deploy
This commit is contained in:
parent
a460cbd99c
commit
c618d80099
@ -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" />}
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user