Aligning a pair of MDC drawers

Question

Aligning a pair of MDC drawers

I am facing a challenge on my webpage where I have implemented two Material Design Component drawers with identical items. One is set to be permanent for desktop and tablet displays, while the other is designed to be hidden or modal for mobile devices.

<aside class="mdc-drawer mdc-drawer--permanent">
    <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">App</h3>
        <h6 class="mdc-drawer__subtitle">@username</h6>
    </div>
    <div class="mdc-drawer__content">
        <nav class="mdc-list--permanent">@menu_drawer_content</nav>
    </div>
</aside>

<aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__header">
        <h3 class="mdc-drawer__title">App</h3>
        <h6 class="mdc-drawer__subtitle">@username</h6>
    </div>
    <div class="mdc-drawer__content">
        <nav class="mdc-list">@menu_drawer_content</nav>
    </div>
</aside>

Both drawers are initialized as follows:

modalDrawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer--modal'));
let list = mdc.list.MDCList.attachTo(document.querySelector('.mdc-list--permanent'));
list.wrapFocus = true;

To toggle between the two drawers based on screen size, I use the following JavaScript code:

let smallForm = window.matchMedia("(max-width: 767px)").matches;

function resized() {
    let smallForm_ = window.matchMedia("(max-width: 767px)").matches;
    if (smallForm !== smallForm_) {
        smallForm = smallForm_;
        changedMedia();
    }
}

function changedMedia() {
    let drawerButton = $('.mdc-top-app-bar__row > section > button');
    if (smallForm) {
        $('.mdc-drawer--permanent').hide();
        drawerButton.show();
    } else {
        $('.mdc-drawer--permanent').show();
        drawerButton.hide();
        modalDrawer.open = false;
    }
}

However, there is a bug that persists when selecting an item in one drawer does not sync with the same item in the other drawer. It leads to inconsistencies especially when transitioning between screen sizes.

Is there a way to link these two drawers so that selection in one will affect the state of the other without causing any unwanted recursive loop?

Edit: Added bounty. Full source.

javascript material-design material-components material-components-web

Answer 1

Answer №1

I have discovered a way to "undo" the instantiation of the MDC component, allowing you to use a single drawer and switch between modal and permanent modes while still maintaining the selection of the drawer list item. The key part of the code snippet below is calling destroy() when switching media so that you can successfully modify the drawer class and re-instantiate it.

let timeout;
let activeBar;
let activeDrawer;
let activeList;
const actualResizeHandler = () => {
  const fixedStyles = () => {
    document.body.style = 'display: flex; height: 100vh;';
    document.querySelector('.mdc-drawer-app-content').style = 'flex: auto; overflow: auto;';
    document.querySelector('.main-content').style = 'height: 100%; overflow: auto;';
    document.querySelector('.mdc-top-app-bar').style = 'position: absolute;';
  };

  const modalStyles = () => {
    document.body.removeAttribute('style');
    document.querySelector('.mdc-drawer-app-content').removeAttribute('style');
    document.querySelector('.main-content').removeAttribute('style');
    document.querySelector('.mdc-top-app-bar').removeAttribute('style');
  };
  
  const bar = document.querySelector('.mdc-top-app-bar');
  const drawer = document.querySelector('.mdc-drawer');
  const list = document.querySelector('.mdc-list');
  if (typeof activeBar !== 'undefined') {
    activeBar.destroy();
  }
    
  if (window.matchMedia('(max-width: 767px)').matches) {
    if (typeof activeList !== 'undefined') {
      activeList.destroy();
    }
    
    drawer.classList.add('mdc-drawer--modal');
    drawer.insertAdjacentHTML('afterend', '<div class="mdc-drawer-scrim"></div>');
    modalStyles();
    activeBar = mdc.topAppBar.MDCTopAppBar.attachTo(bar);
    activeBar.listen('MDCTopAppBar:nav', () => {
      if (typeof activeDrawer !== 'undefined') {
        activeDrawer.open = !activeDrawer.open;
      }
      
    });
    
    activeDrawer = mdc.drawer.MDCDrawer.attachTo(drawer);
  } else {
    const scrim = document.querySelector('.mdc-drawer-scrim');
    if (scrim) {
      scrim.remove();
    }
    
    if (typeof activeDrawer !== 'undefined') {
      activeDrawer.destroy();
    }
    
    drawer.classList.remove('mdc-drawer--modal');
    fixedStyles();
    activeList = mdc.list.MDCList.attachTo(list);
    activeList.wrapFocus = true;
  }
};

const resizeThrottler = () => {
  if (!timeout) {
    timeout = setTimeout(() => {
      timeout = null;
      actualResizeHandler();
     }, 66);
  }
};
  
window.addEventListener('resize', resizeThrottler, false);
actualResizeHandler();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Modal / Dismissible Drawer Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <aside class="mdc-drawer">
      <div class="mdc-drawer__content">
        <nav class="mdc-list"&
          ...
          
        </nav>
      </div>
    </aside>
    <div class="mdc-drawer-app-content">
      <header class="mdc-top-app-bar">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__...
           ...icon</button>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
        </div>
      </header>
      <main class="main-content">
        <div class="mdc-top-app-bar--fixed-adjust">
          App Content
        </div>
      </main>
    </div>
  </body>
</html>

Answer 2

I have discovered a way to "undo" the instantiation of the MDC component, allowing you to use a single drawer and switch between modal and permanent modes while still maintaining the selection of the drawer list item. The key part of the code snippet below is calling destroy() when switching media so that you can successfully modify the drawer class and re-instantiate it.

let timeout;
let activeBar;
let activeDrawer;
let activeList;
const actualResizeHandler = () => {
  const fixedStyles = () => {
    document.body.style = 'display: flex; height: 100vh;';
    document.querySelector('.mdc-drawer-app-content').style = 'flex: auto; overflow: auto;';
    document.querySelector('.main-content').style = 'height: 100%; overflow: auto;';
    document.querySelector('.mdc-top-app-bar').style = 'position: absolute;';
  };

  const modalStyles = () => {
    document.body.removeAttribute('style');
    document.querySelector('.mdc-drawer-app-content').removeAttribute('style');
    document.querySelector('.main-content').removeAttribute('style');
    document.querySelector('.mdc-top-app-bar').removeAttribute('style');
  };
  
  const bar = document.querySelector('.mdc-top-app-bar');
  const drawer = document.querySelector('.mdc-drawer');
  const list = document.querySelector('.mdc-list');
  if (typeof activeBar !== 'undefined') {
    activeBar.destroy();
  }
    
  if (window.matchMedia('(max-width: 767px)').matches) {
    if (typeof activeList !== 'undefined') {
      activeList.destroy();
    }
    
    drawer.classList.add('mdc-drawer--modal');
    drawer.insertAdjacentHTML('afterend', '<div class="mdc-drawer-scrim"></div>');
    modalStyles();
    activeBar = mdc.topAppBar.MDCTopAppBar.attachTo(bar);
    activeBar.listen('MDCTopAppBar:nav', () => {
      if (typeof activeDrawer !== 'undefined') {
        activeDrawer.open = !activeDrawer.open;
      }
      
    });
    
    activeDrawer = mdc.drawer.MDCDrawer.attachTo(drawer);
  } else {
    const scrim = document.querySelector('.mdc-drawer-scrim');
    if (scrim) {
      scrim.remove();
    }
    
    if (typeof activeDrawer !== 'undefined') {
      activeDrawer.destroy();
    }
    
    drawer.classList.remove('mdc-drawer--modal');
    fixedStyles();
    activeList = mdc.list.MDCList.attachTo(list);
    activeList.wrapFocus = true;
  }
};

const resizeThrottler = () => {
  if (!timeout) {
    timeout = setTimeout(() => {
      timeout = null;
      actualResizeHandler();
     }, 66);
  }
};
  
window.addEventListener('resize', resizeThrottler, false);
actualResizeHandler();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Modal / Dismissible Drawer Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <aside class="mdc-drawer">
      <div class="mdc-drawer__content">
        <nav class="mdc-list"&
          ...
          
        </nav>
      </div>
    </aside>
    <div class="mdc-drawer-app-content">
      <header class="mdc-top-app-bar">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__...
           ...icon</button>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
        </div>
      </header>
      <main class="main-content">
        <div class="mdc-top-app-bar--fixed-adjust">
          App Content
        </div>
      </main>
    </div>
  </body>
</html>

Aligning a pair of MDC drawers

Answer №1

Similar questions

An error message indicating that the page is currently being unloaded has appeared

Incorporating lazy loading for diverse content to enhance pagination

Validating an item within an enumeration

Helping React and MUI components become mobile responsive - Seeking guidance to make it happen

Tips for effectively organizing a collapsible list

Creating image galleries with HTML and Javascript loop through the drawImage function to display multiple

Using AngularJS $http.jsonp() method to interface with Google Maps Distance Matrix API

Menu design with child element creatively integrated into parent element

Is it possible to access the ID of a collection_select and have a list of items appear whenever the selection is modified?

What are the best practices for utilizing the "this" keyword with fetch?

The material-ui library always registers Event.ctrlKey as true

Turn off Satellizer Popup Window Title Bar

Interactive Icon Feature Instead of Annoying Pop-Ups in JavaScript

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

After a page reload, Material-UI stops functioning properly

What is the significance of static in react?

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Converting JQuery Object (Ajax-response) to an Array Containing Keys and Values

Tips for concealing information that is scrolled beneath a translucent layer

After an Ajax form is completed within the .done function, a separate Ajax call must be