Files
edr-platform/apps/edr-passenger-web/portal/src/components/MobileTopBar.tsx
2026-07-10 15:00:57 +03:00

29 lines
1.0 KiB
TypeScript

import Link from 'next/link';
import Image from 'next/image';
import ThemeToggle from './ThemeToggle';
// AppSidebar (which carries the logo) is `hidden lg:flex` — invisible on
// mobile, so mobile pages had no branding/way back to home at all. This is
// the mobile-only equivalent: a slim bar with just the logo. Deliberately
// not sticky — it scrolls away with the page content instead of staying
// pinned to the top.
export default function MobileTopBar() {
return (
<div className="lg:hidden relative bg-[rgb(20_113_76)] dark:bg-gray-900 border-b border-[rgb(16_89_60)] dark:border-gray-800 px-4 h-16 flex items-center flex-shrink-0">
<Link href="/" className="flex items-center hover:opacity-80 transition-opacity" aria-label="Go to home">
<Image
src="/edr-logo.png"
alt="Ethio-Djibouti Railway"
width={140}
height={48}
className="h-14 w-auto"
priority
/>
</Link>
<div className="ml-auto">
<ThemeToggle />
</div>
</div>
);
}