Merge pull request #219 from onattech/Navbar_UI_Improvements

Navbar UI improvements
dataplane-app · Apr 1, 2022 · 91f32ef · 91f32ef
2 parents 5040acd + 5df71c6
commit 91f32ef
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 32 deletions.
diff --git a/frontend/src/components/EnviromentDropdown/index.jsx b/frontend/src/components/EnviromentDropdown/index.jsx
@@ -29,12 +29,14 @@ const EnviromentDropdown = () => {
     const [selectedEnviroment, setSelectedEnviroment] = React.useState('');
     const [environments, setEnvironments] = React.useState([]);
     const GlobalEnvironments = useGlobalEnvironmentsState();
+    const dropdownWidth = React.useRef(null);
 
     const open = Boolean(anchorEl);
 
     const handleClick = (event) => {
         if (environments.length < 2) return;
         setAnchorEl(event.currentTarget);
+        dropdownWidth.current = event.currentTarget.offsetWidth;
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -167,18 +169,6 @@ const EnviromentDropdown = () => {
                             ml: -0.5,
                             mr: 1,
                         },
-                        '&:before': {
-                            content: '""',
-                            display: 'block',
-                            position: 'absolute',
-                            top: 0,
-                            right: 14,
-                            width: 10,
-                            height: 10,
-                            bgcolor: 'background.secondary',
-                            transform: 'translateY(-50%) rotate(45deg)',
-                            zIndex: 0,
-                        },
                     },
                 }}
                 transformOrigin={{ horizontal: 'right', vertical: 'top' }}
@@ -187,7 +177,7 @@ const EnviromentDropdown = () => {
                     ? environments
                           .filter((filterId) => filterId.id !== selectedEnviroment)
                           .map((env) => (
-                              <MenuItem onClick={() => onSelectEnvironment(env)} key={env.id}>
+                              <MenuItem onClick={() => onSelectEnvironment(env)} key={env.id} sx={{ width: dropdownWidth.current }}>
                                   <Box
                                       display="flex"
                                       backgroundColor="primary.main"

diff --git a/frontend/src/components/Layout/Layout.component.jsx b/frontend/src/components/Layout/Layout.component.jsx
@@ -15,7 +15,7 @@ const Layout = ({ children }) => {
                 elevation={0}
                 position="fixed"
                 sx={{ zIndex: (theme) => theme.zIndex.drawer, background: (theme) => theme.palette.background.secondary, borderBottom: 1, borderColor: 'divider' }}>
-                <Toolbar>
+                <Toolbar style={{ padding: 0 }}>
                     <Navbar />
                 </Toolbar>
             </AppBar>
@@ -27,13 +27,13 @@ const Layout = ({ children }) => {
                     zIndex: 1100,
                     [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box', backgroundColor: 'background.main' },
                 }}>
-                <Toolbar />
+                <Toolbar style={{ padding: 0 }} />
                 <Box sx={{ overflow: 'auto', height: '100%' }}>
                     <Sidebar />
                 </Box>
             </Drawer>
             <Box component="main" sx={{ flexGrow: 1, p: 4 }} background="background.main">
-                <Toolbar />
+                <Toolbar style={{ padding: 0 }} />
                 {children}
             </Box>
         </Box>

diff --git a/frontend/src/components/UserDropdown/index.jsx b/frontend/src/components/UserDropdown/index.jsx
@@ -13,11 +13,13 @@ const UserDropdown = ({ me }) => {
     const history = useHistory();
 
     const [anchorEl, setAnchorEl] = React.useState(null);
+    const dropdownWidth = React.useRef(null);
 
     const open = Boolean(anchorEl);
 
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
+        dropdownWidth.current = event.currentTarget.offsetWidth;
     };
     const handleClose = () => {
         setAnchorEl(null);
@@ -65,26 +67,15 @@ const UserDropdown = ({ me }) => {
                             width: 32,
                             height: 32,
                             ml: -0.5,
-                            mr: 1,
-                        },
-                        '&:before': {
-                            content: '""',
-                            display: 'block',
-                            position: 'absolute',
-                            top: 0,
-                            right: 14,
-                            width: 10,
-                            height: 10,
-                            bgcolor: 'background.paper',
-                            transform: 'translateY(-50%) rotate(45deg)',
-                            zIndex: 0,
                         },
                     },
                 }}
                 transformOrigin={{ horizontal: 'right', vertical: 'top' }}
                 anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}>
-                <MenuItem onClick={() => history.push(`/myaccount/${me.user_id}`)}>My account</MenuItem>
-                <MenuItem style={{ margin: 'auto' }} onClick={() => history.push(`/logout`)}>
+                <MenuItem onClick={() => history.push(`/myaccount/${me.user_id}`)} sx={{ width: dropdownWidth.current }}>
+                    My account
+                </MenuItem>
+                <MenuItem style={{ margin: 'auto' }} onClick={() => history.push(`/logout`)} sx={{ width: dropdownWidth.current }}>
                     Logout
                 </MenuItem>
             </Menu>

diff --git a/frontend/src/components/UserDropdown/styles.css b/frontend/src/components/UserDropdown/styles.css
@@ -20,5 +20,5 @@
     margin: .6rem .4rem;
     cursor: pointer;
     width: auto!important;
-    border-radius: 4px;
+    border-radius: 6px;
 }