feat(admin-ui): update sidebar scroll behavior

admin-ui/app/components/Sidebar/SidebarSection.js

@@ -1,54 +1,16 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-import { makeStyles } from '@material-ui/core/styles'
-import Wave from 'Components/SVG/SidebarWave'
-import { ThemeContext } from 'Context/theme/themeContext'
-import getThemeColor from 'Context/theme/config'
-
-const useStyles = makeStyles(() => ({
-  waveContainer: {
-    position: 'absolute',
-    bottom: 93,
-    left: 0,
-    height: 70,
-    width: 250,
-    borderBottomLeftRadius: 20,
-    borderBottomRightRadius: 20,
-  },
-  wave: {
-    width: 250,
-    position: 'relative',
-    top: -80
-  },
-  powered: {
-    color: '#fff',
-    textAlign: 'center',
-    position: 'relative',
-    top: -130,
-    fontWeight: 500,
-  }
-}))
 
 const SidebarSection = (props) => {
   const sectionClass = classNames("sidebar__section", {
     'sidebar__section--fluid': props.fluid,
     'sidebar__section--cover': props.cover
   }, props.className)
-  const classes = useStyles()
-  const theme = useContext(ThemeContext)
-  const selectedTheme = theme.state.theme
-  const themeColors = getThemeColor(selectedTheme)
 
   return (
     <div className={ sectionClass }>
       { props.children }
-      <div className={classes.waveContainer}>
-        <Wave className={classes.wave} fill={themeColors.menu.background} />
-        <div className={classes.powered}>
-          Powered by Gluu
-        </div>
-      </div>
     </div>
   )
 }

admin-ui/app/routes/Apps/Gluu/GluuAppSidebar.js

@@ -13,13 +13,43 @@ import SchemaIcon from "Components/SVG/menu/Schema"
 import ServicesIcon from "Components/SVG/menu/Services"
 import UsersIcon from "Components/SVG/menu/Users"
 import { ThemeContext } from 'Context/theme/themeContext'
+import { makeStyles } from '@material-ui/core/styles'
+import Wave from 'Components/SVG/SidebarWave'
+import getThemeColor from 'Context/theme/config'
+
+const useStyles = makeStyles(() => ({
+  waveContainer: {
+    position: 'relative',
+    bottom: 93,
+    left: 0,
+    top: 140,
+    height: 70,
+    width: 250,
+    borderBottomLeftRadius: 20,
+    borderBottomRightRadius: 20,
+  },
+  wave: {
+    width: 250,
+    position: 'relative',
+    top: -75
+  },
+  powered: {
+    color: '#fff',
+    textAlign: 'center',
+    position: 'relative',
+    top: -130,
+    fontWeight: 500,
+  }
+}))
 
 function GluuAppSidebar({ scopes }) {
   const [pluginMenus, setPluginMenus] = useState([])
   const { t } = useTranslation()
   const theme = useContext(ThemeContext)
   const selectedTheme = theme.state.theme
   const sidebarMenuActiveClass = `sidebar-menu-active-${selectedTheme}`
+  const classes = useStyles()
+  const themeColors = getThemeColor(selectedTheme)
 
   useEffect(() => {
     setPluginMenus(processMenus())
@@ -136,6 +166,12 @@ function GluuAppSidebar({ scopes }) {
           to="/logout"
           textStyle={{ fontSize: '18px' }}
         />
+        <div className={classes.waveContainer}>
+          <Wave className={classes.wave} fill={themeColors.menu.background} />
+          <div className={classes.powered}>
+            Powered by Gluu
+          </div>
+        </div>
       </SidebarMenu>
     </ErrorBoundary>
   )

admin-ui/app/styles/custom/navbar.scss

@@ -47,6 +47,7 @@
 }
 
 .sidebar-menu {
-  height: 60vh;
+  height: 87vh;
   overflow-y: scroll;
+  margin-bottom: 0;
 }

admin-ui/app/styles/custom/sidebar.scss

@@ -1,6 +1,7 @@
 .custom-sidebar-container {
   background-color: #FCFCFC;
-  border-radius: 28px;
+  border-top-right-radius: 28px;
+  border-top-left-radius: 28px;
 
   .sidebar-menu__entry__link {
     color: #323b47;