src/Layout.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

import { ReactNode } from 'react';
import { Link, useLocation } from 'react-router';
import { MapPin, Map, Info } from 'lucide-react';
import './Layout.css';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const location = useLocation();
  
  const navItems = [
    {
      name: 'Stops',
      icon: MapPin,
      path: '/stops'
    },
    {
      name: 'Maps',
      icon: Map,
      path: '/map'
    },
    {
      name: 'About',
      icon: Info,
      path: '/about'
    }
  ];

  return (
    <div className="app-container">
      {/* Main content area */}
      <main className="main-content">
        {children}
      </main>
      
      {/* Android style bottom navigation bar */}
      <nav className="nav-bar">
        {navItems.map(item => {
          const Icon = item.icon;
          const isActive = location.pathname.startsWith(item.path);
          
          return (
            <Link 
              key={item.name}
              to={item.path}
              className={`nav-item ${isActive ? 'active' : ''}`}
            >
              <Icon size={24} />
              <span>{item.name}</span>
            </Link>
          );
        })}
      </nav>
    </div>
  );
}