diff --git a/ui/index.html b/ui/index.html index 830671e..1ae87a4 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,7 +4,7 @@ - ui + Dataflow
diff --git a/ui/src/App.jsx b/ui/src/App.jsx index ad35e53..c513404 100644 --- a/ui/src/App.jsx +++ b/ui/src/App.jsx @@ -1,7 +1,8 @@ -import { useState, useEffect, createElement } from 'react' +import { useState, useEffect, createElement, lazy, Suspense } from 'react' import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom' import { api, setCredentials, clearCredentials } from './api' import Sidebar from './components/Sidebar.jsx' +import BottomNav from './components/BottomNav.jsx' import SourceTabs from './components/SourceTabs.jsx' import Login from './pages/Login' import SourceList from './pages/SourceList' @@ -13,7 +14,7 @@ import Rules from './pages/Rules' import Mappings from './pages/Mappings' import Records from './pages/Records' import Log from './pages/Log' -import Pivot from './pages/Pivot' +const Pivot = lazy(() => import('./pages/Pivot')) import Remap from './pages/Remap' import Stacks from './pages/Stacks' @@ -134,12 +135,14 @@ export default function App() {
+
+
{/* Main */}
@@ -191,7 +194,8 @@ export default function App() {
)} -
+
+ Loading…
}> } /> @@ -212,9 +216,11 @@ export default function App() { } /> } /> +
+ ) } diff --git a/ui/src/components/BottomNav.jsx b/ui/src/components/BottomNav.jsx new file mode 100644 index 0000000..4a7869c --- /dev/null +++ b/ui/src/components/BottomNav.jsx @@ -0,0 +1,40 @@ +import { NavLink } from 'react-router-dom' +import useTheme from '../theme.jsx' +import { NAV } from './navItems.jsx' + +// Phone-sized replacement for the sidebar: same destinations, thumb-reachable. +// Hidden from md: upward, where the sidebar takes over. +export default function BottomNav() { + const { dark, setDark } = useTheme() + + return ( + + ) +} diff --git a/ui/src/components/Sidebar.jsx b/ui/src/components/Sidebar.jsx index 38a0879..6741839 100644 --- a/ui/src/components/Sidebar.jsx +++ b/ui/src/components/Sidebar.jsx @@ -1,75 +1,6 @@ import { NavLink } from 'react-router-dom' import useTheme from '../theme.jsx' - -const NAV = [ - { - to: '/sources', - label: 'Sources', - icon: ( - - - - - - ), - }, - { - to: '/import', - label: 'Import', - icon: ( - - - - - - ), - }, - { - to: '/bridge', - label: 'Bridge', - icon: ( - - - - - - - ), - }, - { - to: '/remap', - label: 'Remap', - icon: ( - - - - - - - ), - }, - { - to: '/stacks', - label: 'Stacks', - icon: ( - - - - - - ), - }, - { - to: '/log', - label: 'Log', - icon: ( - - - - - ), - }, -] +import { NAV } from './navItems.jsx' export default function Sidebar({ expanded, setExpanded, loginUser, onLogout }) { const { dark, setDark } = useTheme() diff --git a/ui/src/components/SourceTabs.jsx b/ui/src/components/SourceTabs.jsx index fd0bd30..5924c74 100644 --- a/ui/src/components/SourceTabs.jsx +++ b/ui/src/components/SourceTabs.jsx @@ -18,7 +18,7 @@ export default function SourceTabs({ sources }) { return (
-
+
Sources / @@ -30,7 +30,7 @@ export default function SourceTabs({ sources }) { )}
-