feat: change collapse option location

GluuFederation · Mar 8, 2022 · 62ab2fa · 62ab2fa
1 parent 9f8008b
commit 62ab2fa
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/admin-ui/app/components/SidebarTrigger/SidebarTrigger.js b/admin-ui/app/components/SidebarTrigger/SidebarTrigger.js
@@ -1,18 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import { NavLink } from 'reactstrap'
 import PropTypes from 'prop-types'
 import { withPageConfig } from './../Layout'
 
 const SidebarTrigger = (props) => {
   const { tag: Tag, pageConfig, ...otherProps } = props
-  const [showCollapse, setShowCollapse] = useState(
-    window.matchMedia('(max-width: 992px)').matches,
-  )
-  useEffect(() => {
-    window
-      .matchMedia('(max-width: 768px)')
-      .addEventListener('change', (e) => setShowCollapse(e.matches))
-  }, [])
+
   return (
     <Tag
       onClick={() => {
@@ -31,7 +24,7 @@ const SidebarTrigger = (props) => {
           }}
         ></i>
       )}
-      {!pageConfig.sidebarCollapsed && (
+      {!pageConfig.sidebarCollapsed && !props.showCollapseonly && (
         <i
           className="fa fa-times fa-fw fa-2x"
           style={{

diff --git a/admin-ui/app/layout/components/DefaultSidebar.js b/admin-ui/app/layout/components/DefaultSidebar.js
@@ -16,8 +16,8 @@ export const DefaultSidebar = () => (
 
     {/* START SIDEBAR: Only for Desktop */}
     <Sidebar.HideSlim>
-      <SidebarTrigger id="navToggleBtn" color={'#00a361'} />
       <Sidebar.Section>
+        <SidebarTrigger id="navToggleBtn" color={'#8492a5'} />
         <Link to="/" className="sidebar__brand">
           <LogoThemed checkBackground />
         </Link>
@@ -31,6 +31,11 @@ export const DefaultSidebar = () => (
     <Sidebar.MobileFluid>
       {/* <SidebarTopA /> */}
       <Sidebar.Section fluid cover>
+        <SidebarTrigger
+          id="navToggleBtn"
+          color={'#8492a5'}
+          showCollapseonly={true}
+        />
         {/* SIDEBAR: Menu */}
         <GluuAppSidebar />
       </Sidebar.Section>

diff --git a/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js b/admin-ui/app/routes/Apps/Gluu/GluuNavBar.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import {
   Avatar,
@@ -20,6 +20,14 @@ import GluuErrorFallBack from './GluuErrorFallBack'
 
 function GluuNavBar({ themeColor, themeStyle, userinfo }) {
   const userInfo = userinfo ? userinfo : {}
+  const [showCollapse, setShowCollapse] = useState(
+    window.matchMedia('(max-width: 992px)').matches,
+  )
+  useEffect(() => {
+    window
+      .matchMedia('(max-width: 992px)')
+      .addEventListener('change', (e) => setShowCollapse(e.matches))
+  }, [])
   return (
     <ErrorBoundary FallbackComponent={GluuErrorFallBack}>
       <NavbarThemeProvider
@@ -29,9 +37,11 @@ function GluuNavBar({ themeColor, themeStyle, userinfo }) {
       >
         <Navbar expand="lg" themed>
           <Nav>
-            <NavItem className="mr-3">
-              <SidebarTrigger id="navToggleBtn" />
-            </NavItem>
+            {showCollapse && (
+              <NavItem className="mr-3">
+                <SidebarTrigger id="navToggleBtn" />
+              </NavItem>
+            )}
           </Nav>
           <Nav className="ml-auto" pills>
             {/*<NavbarMessages  />*/}