💄 Fixed the position of the appbars, and fixed some minor UI bugs

Signed-off-by: Pau Costa <mico@micodev.es>

client/src/components/bottomAppBar.tsx

@@ -1,14 +1,19 @@
 import { BottomNavigation, BottomNavigationAction, Paper } from "@mui/material";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import FeedIcon from "@mui/icons-material/Feed";
 import GlobalIcon from "@mui/icons-material/Public";
 import AddIcon from "@mui/icons-material/Add";
 import SearchIcon from "@mui/icons-material/Search";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 export default function BottomAppBar() {
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState("");
   const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    setValue(location.pathname.replace("/", ""));
+  }, [location]);
 
   const handleClick = (to: string) => () => {
     navigate(to);
@@ -27,21 +32,25 @@ export default function BottomAppBar() {
       >
         <BottomNavigationAction
           label="My Feed"
+          value="feed"
           icon={<FeedIcon />}
           onClick={handleClick("feed")}
         />
         <BottomNavigationAction
           label="Global Feed"
+          value="global"
           icon={<GlobalIcon />}
           onClick={handleClick("global")}
         />
         <BottomNavigationAction
           label="New Post"
+          value="newpost"
           icon={<AddIcon />}
           onClick={handleClick("newpost")}
         />
         <BottomNavigationAction
           label="Search"
+          value="search"
           icon={<SearchIcon />}
           onClick={handleClick("search")}
         />

client/src/components/topAppBar.tsx

@@ -51,7 +51,7 @@ function TopAppBar(props: TopAppBarProps) {
 
   return (
     <AppBar
-      position="absolute"
+      position="fixed"
       sx={{ zIndex: 1600, height: `${props.height}px` }}
     >
       <Toolbar disableGutters>

client/src/routes/search.tsx

@@ -62,7 +62,7 @@ export default function Search() {
       <Paper>
         <List>
           {displayUserList.map((user) => (
-            <>
+            <Box key={user.id}>
               <ListItem key={user.id}>
                 <Button
                   fullWidth
@@ -78,7 +78,7 @@ export default function Search() {
                 </Button>
               </ListItem>
               <Divider sx={{ mb: "0.3rem" }} />
-            </>
+            </Box>
           ))}
         </List>
       </Paper>