Fixing layout for narrow screens and sidebar handling.

ReCodEx · Dec 17, 2024 · dbd8d10 · dbd8d10
1 parent b8df76c
commit dbd8d10
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 139 deletions.
diff --git a/src/components/layout/Header/Header.js b/src/components/layout/Header/Header.js
@@ -10,14 +10,11 @@ import { getConfigVar } from '../../../helpers/config.js';
 const SKIN = getConfigVar('SKIN') || 'success';
 
 class Header extends Component {
-  toggleSidebarSize = e => {
+  toggleSidebar = e => {
     e.preventDefault();
-    this.props.toggleSidebarSize();
-  };
-
-  toggleSidebarVisibility = e => {
-    e.preventDefault();
-    this.props.toggleSidebarVisibility();
+    // flip AdminLTE body classes
+    window.document.body.classList.toggle('sidebar-collapse');
+    window.document.body.classList.toggle('sidebar-open');
   };
 
   render() {
@@ -28,7 +25,7 @@ class Header extends Component {
         <ClientOnly>
           <ul className="navbar-nav w-100">
             <li className="nav-item">
-              <a className="nav-link" data-widget="pushmenu" href="#" onClick={this.toggleSidebarSize}>
+              <a className="nav-link" data-widget="pushmenu" href="#" onClick={this.toggleSidebar}>
                 <Icon icon="bars" />
               </a>
             </li>

diff --git a/src/components/layout/Layout/Layout.js b/src/components/layout/Layout/Layout.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
-import classnames from 'classnames';
 
 import Header from '../Header';
 import Footer from '../Footer';
@@ -11,60 +10,19 @@ import { getConfigVar } from '../../../helpers/config.js';
 
 const title = getConfigVar('TITLE');
 
-const Layout = ({
-  toggleSize,
-  toggleVisibility,
-  isLoggedIn,
-  sidebarIsCollapsed,
-  sidebarIsOpen,
-  pendingFetchOperations,
-  children,
-  lang,
-  setLang,
-  currentUrl,
-  availableLangs,
-  onCloseSidebar,
-}) => (
-  <div
-    className={classnames({
-      'app-wrapper': true,
-      'sidebar-expand-lg': true,
-      'sidebar-mini': true,
-      'sidebar-collapse': sidebarIsCollapsed,
-      'sidebar-open': sidebarIsOpen,
-    })}
-    style={{
-      overflow: 'visible',
-    }}>
+const Layout = ({ isLoggedIn, pendingFetchOperations, children, lang, setLang, currentUrl, availableLangs }) => (
+  <div className="app-wrapper overflow-visible">
     <Helmet defaultTitle={`${title}`} titleTemplate={`%s | ${title}`} />
-    <Header
-      isLoggedIn={isLoggedIn}
-      toggleSidebarSize={toggleSize}
-      toggleSidebarVisibility={toggleVisibility}
-      availableLangs={availableLangs}
-      currentLang={lang}
-      setLang={setLang}
-    />
-    <SidebarContainer
-      isCollapsed={sidebarIsCollapsed}
-      currentUrl={currentUrl}
-      pendingFetchOperations={pendingFetchOperations}
-    />
-    <div onClick={onCloseSidebar}>
-      {children}
-      <Footer version={process.env.VERSION} />
-    </div>
+    <Header isLoggedIn={isLoggedIn} availableLangs={availableLangs} currentLang={lang} setLang={setLang} />
+    <SidebarContainer currentUrl={currentUrl} pendingFetchOperations={pendingFetchOperations} />
+    {children}
+    <Footer version={process.env.VERSION} />
   </div>
 );
 
 Layout.propTypes = {
-  toggleSize: PropTypes.func,
-  toggleVisibility: PropTypes.func,
   isLoggedIn: PropTypes.bool,
-  sidebarIsCollapsed: PropTypes.bool,
-  sidebarIsOpen: PropTypes.bool,
   pendingFetchOperations: PropTypes.bool,
-  onCloseSidebar: PropTypes.func,
   children: PropTypes.element,
   lang: PropTypes.string,
   setLang: PropTypes.func.isRequired,

diff --git a/src/components/layout/Sidebar/Sidebar.js b/src/components/layout/Sidebar/Sidebar.js
@@ -64,9 +64,11 @@ const Sidebar = ({
         </Link>
       </div>
 
-      <div className="sticky-top shadow border-bottom bg-body-secondary py-2">
-        <UserPanelContainer />
-      </div>
+      {Boolean(loggedInUser) && (
+        <div className="sticky-top shadow border-bottom bg-body-secondary py-2">
+          <UserPanelContainer />
+        </div>
+      )}
 
       <div className="sidebar-wrapper">
         <div data-overlayscrollbars-viewport="scrollbarHidden">

diff --git a/src/components/widgets/Sidebar/UserPanel/UserPanelFailed.js b/src/components/widgets/Sidebar/UserPanel/UserPanelFailed.js
@@ -3,16 +3,14 @@ import { FormattedMessage } from 'react-intl';
 import { FailedAvatar } from '../../Avatar';
 
 const UserPanelFailed = props => (
-  <>
-    <div className="float-start me-2">
-      <FailedAvatar {...props} />
-    </div>
-    <div className="small text-light sidebar-up-hide-collapsed">
+  <div className="text-center">
+    <FailedAvatar {...props} />
+    <div className="small ms-2 text-light sidebar-up-hide-collapsed">
       <FormattedMessage id="app.badge.failedLoading" defaultMessage="Failed to load the data" />
       <br />
       <FormattedMessage id="app.badge.failedLoadingInfo" defaultMessage="Please check your Internet connection." />
     </div>
-  </>
+  </div>
 );
 
 export default UserPanelFailed;
diff --git a/src/containers/LayoutContainer/LayoutContainer.js b/src/containers/LayoutContainer/LayoutContainer.js
@@ -5,9 +5,7 @@ import { IntlProvider } from 'react-intl';
 import moment from 'moment';
 
 import { setLang } from '../../redux/modules/app.js';
-import { toggleSize, toggleVisibility, collapse, unroll } from '../../redux/modules/sidebar.js';
 import { getLang, anyPendingFetchOperations } from '../../redux/selectors/app.js';
-import { isVisible, isCollapsed } from '../../redux/selectors/sidebar.js';
 import { isLoggedIn } from '../../redux/selectors/auth.js';
 import { getLoggedInUserSettings } from '../../redux/selectors/users.js';
 
@@ -50,7 +48,6 @@ class LayoutContainer extends Component {
   }
 
   componentDidMount() {
-    this.resizeSidebarToDefault(this.props);
     if (canUseDOM) {
       this.newPageLoading = true;
       this.pageHeight = -1;
@@ -68,22 +65,6 @@ class LayoutContainer extends Component {
     }
   }
 
-  resizeSidebarToDefault({ collapse, unroll, userUIData }) {
-    // open or hide the sidebar based on user's settings
-    const shouldBeOpen = this.getDefaultOpenedSidebar(userUIData);
-    shouldBeOpen ? unroll() : collapse();
-  }
-
-  getDefaultOpenedSidebar = userUIData =>
-    userUIData && typeof userUIData.openedSidebar !== 'undefined' ? userUIData.openedSidebar : true;
-
-  maybeHideSidebar = e => {
-    const { sidebarIsOpen, toggleVisibility } = this.props;
-    if (sidebarIsOpen) {
-      toggleVisibility();
-    }
-  };
-
   /**
    * Get messages for the given language or the deafult - English
    */
@@ -100,10 +81,6 @@ class LayoutContainer extends Component {
       lang,
       location: { pathname, search },
       isLoggedIn,
-      sidebarIsCollapsed,
-      sidebarIsOpen,
-      toggleSize,
-      toggleVisibility,
       pendingFetchOperations,
       setLang,
     } = this.props;
@@ -116,10 +93,6 @@ class LayoutContainer extends Component {
           <UrlContext.Provider value={{ lang }}>
             <Layout
               isLoggedIn={isLoggedIn}
-              sidebarIsCollapsed={sidebarIsCollapsed}
-              sidebarIsOpen={sidebarIsOpen}
-              toggleSize={toggleSize}
-              toggleVisibility={toggleVisibility}
               onCloseSidebar={this.maybeHideSidebar}
               lang={lang}
               setLang={setLang}
@@ -137,10 +110,6 @@ class LayoutContainer extends Component {
 
 LayoutContainer.propTypes = {
   lang: PropTypes.string,
-  toggleSize: PropTypes.func.isRequired,
-  toggleVisibility: PropTypes.func.isRequired,
-  collapse: PropTypes.func.isRequired,
-  unroll: PropTypes.func.isRequired,
   setLang: PropTypes.func.isRequired,
   pendingFetchOperations: PropTypes.bool,
   isLoggedIn: PropTypes.bool,
@@ -155,16 +124,10 @@ export default withRouter(
     (state, { location: { pathname, search } }) => ({
       lang: getLang(state),
       isLoggedIn: isLoggedIn(state),
-      sidebarIsCollapsed: isCollapsed(state),
-      sidebarIsOpen: isVisible(state),
       pendingFetchOperations: anyPendingFetchOperations(state),
       userSettings: getLoggedInUserSettings(state),
     }),
     dispatch => ({
-      toggleVisibility: () => dispatch(toggleVisibility()),
-      toggleSize: () => dispatch(toggleSize()),
-      collapse: () => dispatch(collapse()),
-      unroll: () => dispatch(unroll()),
       setLang: lang => {
         dispatch(setLang(lang));
         window.location.reload();

diff --git a/src/redux/modules/sidebar.js b/src/redux/modules/sidebar.js
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
@@ -4,14 +4,12 @@ import { reducer as formReducer } from 'redux-form';
 import app from './modules/app.js';
 import auth, { actionTypes as authActionTypes } from './modules/auth.js';
 import notifications from './modules/notifications.js';
-import sidebar from './modules/sidebar.js';
 import users from './modules/users.js';
 
 const createRecodexReducers = (token, lang) => ({
   app: app(lang),
   auth: auth(token),
   notifications,
-  sidebar,
   users,
 });
 

diff --git a/src/redux/selectors/sidebar.js b/src/redux/selectors/sidebar.js