Merge pull request #5183 from Couchers-org/smallmissing-icon-navbar#5179

fix: add user icon on nav bar
Couchers-org · Nov 16, 2024 · ef8e76b · ef8e76b
2 parents c6e7e8c + 601d228
commit ef8e76b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/app/web/components/Navigation/GuestMenu.tsx b/app/web/components/Navigation/GuestMenu.tsx
@@ -1,6 +1,6 @@
 import { Divider, IconButton } from "@material-ui/core";
 import { grey } from "@material-ui/core/colors";
-import { MenuIcon } from "components/Icons";
+import { MenuIcon, SinglePersonIcon } from "components/Icons";
 import Menu, { MenuItem } from "components/Menu";
 import { GLOBAL } from "i18n/namespaces";
 import Link from "next/link";
@@ -27,13 +27,17 @@ const useStyles = makeStyles((theme) => ({
     borderRadius: 999,
     backgroundColor: grey[200],
     padding: theme.spacing(1),
-    aspectRatio: "1/1",
     transition: `${theme.transitions.duration.short}ms ${theme.transitions.easing.easeInOut}`,
     "&:hover": {
       opacity: 0.8,
       backgroundColor: grey[300],
     },
   },
+  userIcon: {
+    height: "2rem",
+    width: "2rem",
+    marginLeft: theme.spacing(1),
+  },
 }));
 
 export default function GuestMenu({
@@ -57,6 +61,7 @@ export default function GuestMenu({
         ref={menuRef}
       >
         <MenuIcon />
+        <SinglePersonIcon className={classes.userIcon} />
       </IconButton>
       <Menu
         id="navigation-menu"

diff --git a/app/web/components/Navigation/LoggedInMenu.tsx b/app/web/components/Navigation/LoggedInMenu.tsx
@@ -32,6 +32,7 @@ const useStyles = makeStyles((theme) => ({
   avatar: {
     height: "2rem",
     width: "2rem",
+    marginLeft: theme.spacing(1),
   },
 }));