feat: implement the bottom navigation

client/src/components/Layout.jsx

@@ -1,6 +1,23 @@
+import BottomNavigation from "@mui/material/BottomNavigation";
+import BottomNavigationAction from "@mui/material/BottomNavigationAction";
+import PersonIcon from "@mui/icons-material/Person";
+import FavoriteIcon from "@mui/icons-material/Favorite";
+import DirectionsWalkIcon from "@mui/icons-material/DirectionsWalk";
 import { Frame } from "./Frame";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useMemo } from "react";
+
+function getTabIndexFromLocation({ pathname }) {
+  if (pathname.startsWith("/profiles")) return 0;
+  if (pathname.startsWith("/favorites")) return 2;
+  return 1;
+}
 
 export function Layout({ children, ...props }) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const index = useMemo(() => getTabIndexFromLocation(location), [location]);
+
   return (
     <Frame
       wrapperStyle={{
@@ -9,6 +26,35 @@ export function Layout({ children, ...props }) {
       {...props}
     >
       {children}
+
+      <BottomNavigation
+        showLabels
+        style={{
+          position: "fixed",
+          bottom: 0,
+          left: 0,
+          width: "100%",
+          zIndex: 20,
+        }}
+        value={index}
+        onChange={(event, newValue) => {
+          if (newValue === index) return;
+          navigate(
+            [
+              "/profiles",
+              "/challenges",
+              "/favorites",
+            ][newValue],
+          );
+        }}
+      >
+        <BottomNavigationAction label="Profile" icon={<PersonIcon />} />
+        <BottomNavigationAction
+          label="Challenges"
+          icon={<DirectionsWalkIcon />}
+        />
+        <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
+      </BottomNavigation>
     </Frame>
   );
 }

client/src/main.jsx

@@ -10,6 +10,8 @@ import { Challenges } from "./pages/challenges";
 import { Walk } from "./pages/challenges-slug-walk";
 import { Finish } from "./pages/challenges-slug-finish";
 import { Similarity } from "./pages/challenges-slug-similarity";
+import { Profile } from "./pages/profiles";
+import { Favorites } from "./pages/favorites";
 import { MapProvider } from "./components/Map";
 
 const router = createBrowserRouter([
@@ -33,6 +35,18 @@ const router = createBrowserRouter([
     path: "/challenges/:slug/similarity",
     element: <Similarity />,
   },
+  {
+    path: "/profiles",
+    element: <Profile />,
+  },
+  {
+    path: "/profiles/:id",
+    element: <Profile />,
+  },
+  {
+    path: "/favorites",
+    element: <Favorites />,
+  },
 ]);
 
 const theme = createTheme({

client/src/pages/favorites/index.jsx

@@ -0,0 +1,14 @@
+import { Layout } from "../../components/Layout";
+
+export function Favorites() {
+  return (
+    <Layout
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      Favorites!
+    </Layout>
+  );
+}

client/src/pages/profiles/index.jsx

@@ -0,0 +1,14 @@
+import { Layout } from "../../components/Layout";
+
+export function Profile() {
+  return (
+    <Layout
+      style={{
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      Profile!
+    </Layout>
+  );
+}