fix(ui): UX cleanup of sidebar nav

Author: Hypfer

frontend/src/components/ValetudoAppBar.tsx

@@ -377,8 +377,12 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                                 return (
                                     <ListSubheader
                                         key={`${idx}`}
-                                        sx={{background: "transparent"}}
+                                        sx={{
+                                            background: "transparent",
+                                            userSelect: "none"
+                                        }}
                                         disableSticky={true}
+                                        onClick={(e) => e.stopPropagation()}
                                     >
                                         {value.title}
                                     </ListSubheader>
@@ -430,7 +434,12 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                     })}
 
                     <Divider/>
-                    <ListItem>
+                    <ListItem
+                        onClick={(e) => e.stopPropagation()}
+                        sx={{
+                            userSelect: "none"
+                        }}
+                    >
                         <ListItemIcon>
                             <DarkModeIcon/>
                         </ListItemIcon>
@@ -446,14 +455,20 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
 
 
                     <ListSubheader
-                        sx={{background: "transparent"}}>
+                        sx={{
+                            background: "transparent",
+                            userSelect: "none"
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
                         Links
                     </ListSubheader>
                     <ListItemButton
                         component="a"
                         href="./swagger/"
                         target="_blank"
                         rel="noopener"
+                        onClick={(e) => e.stopPropagation()}
                     >
                         <ListItemIcon>
                             <SwaggerUIIcon/>
@@ -466,6 +481,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                         href="https://valetudo.cloud"
                         target="_blank"
                         rel="noopener"
+                        onClick={(e) => e.stopPropagation()}
                     >
                         <ListItemIcon>
                             <DocsIcon/>
@@ -477,6 +493,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                         href="https://github.com/Hypfer/Valetudo"
                         target="_blank"
                         rel="noopener"
+                        onClick={(e) => e.stopPropagation()}
                     >
                         <ListItemIcon>
                             <GithubIcon/>
@@ -488,6 +505,7 @@ const ValetudoAppBar: React.FunctionComponent<{ paletteMode: PaletteMode, setPal
                         href="https://github.com/sponsors/Hypfer"
                         target="_blank"
                         rel="noopener"
+                        onClick={(e) => e.stopPropagation()}
                     >
                         <ListItemIcon>
                             <DonateIcon/>