Initial ultra-ñapa implementation of OTP integration

4 files changed, 16 insertions, 24 deletions

diff --git a/src/frontend/app/components/layout/AppShell.css b/src/frontend/app/components/layout/AppShell.css
index eee678c..17aae8c 100644
--- a/src/frontend/app/components/layout/AppShell.css
+++ b/src/frontend/app/components/layout/AppShell.css
@@ -14,20 +14,12 @@
 
 .app-shell__body {
   display: flex;
+  flex-direction: column;
   flex: 1;
   overflow: hidden;
   position: relative;
 }
 
-.app-shell__sidebar {
-  display: none; /* Hidden on mobile */
-  width: 80px;
-  border-right: 1px solid var(--border-color);
-  background: var(--background-color);
-  flex-shrink: 0;
-  z-index: 5;
-}
-
 .app-shell__main {
   flex: 1;
   overflow: auto;
@@ -37,17 +29,12 @@
 
 .app-shell__bottom-nav {
   flex-shrink: 0;
-  display: block; /* Visible on mobile */
+  display: block;
   z-index: 10;
-}
-
-/* Desktop styles */
-@media (min-width: 768px) {
-  .app-shell__sidebar {
-    display: block;
-  }
 
-  .app-shell__bottom-nav {
-    display: none;
-  }
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  background: var(--background-color);
+  border-top: 1px solid var(--border-color);
 }
diff --git a/src/frontend/app/components/layout/AppShell.tsx b/src/frontend/app/components/layout/AppShell.tsx
index 08aee59..afc19f3 100644
--- a/src/frontend/app/components/layout/AppShell.tsx
+++ b/src/frontend/app/components/layout/AppShell.tsx
@@ -24,9 +24,6 @@ const AppShellContent: React.FC = () => {
       />
       <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
       <div className="app-shell__body">
-        <aside className="app-shell__sidebar">
-          <NavBar orientation="vertical" />
-        </aside>
         <main className="app-shell__main">
           <Outlet />
         </main>
diff --git a/src/frontend/app/components/layout/NavBar.module.css b/src/frontend/app/components/layout/NavBar.module.css
index 504b93b..6b46459 100644
--- a/src/frontend/app/components/layout/NavBar.module.css
+++ b/src/frontend/app/components/layout/NavBar.module.css
@@ -6,6 +6,9 @@
 
   background-color: var(--background-color);
   border-top: 1px solid var(--border-color);
+
+  max-width: 500px;
+  margin-inline: auto;
 }
 
 .vertical {
diff --git a/src/frontend/app/components/layout/NavBar.tsx b/src/frontend/app/components/layout/NavBar.tsx
index 40591c4..150755f 100644
--- a/src/frontend/app/components/layout/NavBar.tsx
+++ b/src/frontend/app/components/layout/NavBar.tsx
@@ -1,4 +1,4 @@
-import { Home, Map, Route } from "lucide-react";
+import { Home, Map, Navigation2, Route } from "lucide-react";
 import type { LngLatLike } from "maplibre-gl";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router";
@@ -71,6 +71,11 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
       icon: Route,
       path: "/lines",
     },
+    {
+      name: t("navbar.planner", "Planificador"),
+      icon: Navigation2,
+      path: "/planner",
+    },
   ];
 
   return (