Dynamic sidenav width

dynamic-sidenav-width.js

function setSidenavWidth (widthInPixels) {
  let styleEl = document.getElementById('sidenav-width-stylesheets')
  const sidenavWidth = Math.round(widthInPixels / 16 * 1000) / 1000
  const sidenavCollapsedWidth = 4.375 // rem

  if (!styleEl) {
    styleEl = document.createElement('style')
    styleEl.type = 'text/css'
    styleEl.id = 'sidenav-width-stylesheets'
    document.querySelector('head').appendChild(styleEl)
  }

  styleEl.innerHTML = `
@media (min-width: 992px) {
  .layout-collapsed .layout-sidenav:hover {
    margin-right: ${-sidenavWidth + sidenavCollapsedWidth}rem;
  }
  .layout-collapsed.layout-reversed .layout-sidenav:hover {
    margin-right: 0;
    margin-left: ${-sidenavWidth + sidenavCollapsedWidth}rem;
  }
  [dir=rtl].layout-collapsed .layout-sidenav:hover {
    margin-right: 0;
    margin-left: ${-sidenavWidth + sidenavCollapsedWidth}rem;
  }
  [dir=rtl].layout-collapsed.layout-reversed .layout-sidenav:hover {
    margin-right: ${-sidenavWidth + sidenavCollapsedWidth}rem;
    margin-left: 0;
  }
  .layout-collapsed.layout-offcanvas .layout-sidenav {
    margin-right: -${sidenavWidth}rem;
  }
  .layout-collapsed.layout-offcanvas.layout-reversed .layout-sidenav {
    margin-left: -${sidenavWidth}rem;
  }
  [dir=rtl].layout-collapsed.layout-offcanvas .layout-sidenav {
    margin-right: 0;
    margin-left: -${sidenavWidth}rem;
  }
  [dir=rtl].layout-collapsed.layout-offcanvas.layout-reversed .layout-sidenav {
    margin-right: -${sidenavWidth}rem;
    margin-left: 0;
  }
  .layout-fixed:not(.layout-collapsed) .layout-container,
  .layout-fixed-offcanvas:not(.layout-collapsed) .layout-container {
    padding-left: ${sidenavWidth}rem;
  }
  .layout-fixed:not(.layout-collapsed).layout-reversed .layout-container,
  .layout-fixed-offcanvas:not(.layout-collapsed).layout-reversed .layout-container {
    padding-right: ${sidenavWidth}rem;
    padding-left: 0;
  }
  [dir=rtl].layout-fixed:not(.layout-collapsed) .layout-container,
  [dir=rtl].layout-fixed-offcanvas:not(.layout-collapsed) .layout-container {
    padding-right: ${sidenavWidth}rem;
    padding-left: 0;
  }
  [dir=rtl].layout-fixed:not(.layout-collapsed).layout-reversed .layout-container,
  [dir=rtl].layout-fixed-offcanvas:not(.layout-collapsed).layout-reversed .layout-container {
    padding-right: 0;
    padding-left: ${sidenavWidth}rem;
  }
  .layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar,
  .layout-fixed.layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar,
  .layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar {
    left: ${sidenavWidth}rem;
  }
  .layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar,
  .layout-fixed.layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar,
  .layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar {
    right: ${sidenavWidth}rem;
    left: 0;
  }
  [dir=rtl].layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar,
  [dir=rtl].layout-fixed.layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar,
  [dir=rtl].layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) .layout-2 .layout-navbar {
    right: ${sidenavWidth}rem;
    left: 0;
  }
  [dir=rtl].layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar,
  [dir=rtl].layout-fixed.layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar,
  [dir=rtl].layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed).layout-reversed .layout-2 .layout-navbar {
    right: 0;
    left: ${sidenavWidth}rem;
  }
  .layout-footer-fixed:not(.layout-collapsed) .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
    left: ${sidenavWidth}rem;
  }
  .layout-footer-fixed:not(.layout-collapsed).layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
    right: ${sidenavWidth}rem;
    left: 0;
  }
  [dir=rtl].layout-footer-fixed:not(.layout-collapsed) .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
    left: 0;
    right: ${sidenavWidth}rem;
  }
  [dir=rtl].layout-footer-fixed:not(.layout-collapsed).layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
    left: ${sidenavWidth}rem;
    right: 0;
  }
  .layout-sidenav.sidenav-vertical,
  .layout-sidenav .sidenav-vertical,
  .layout-sidenav.sidenav-vertical .sidenav-block,
  .layout-sidenav .sidenav-vertical .sidenav-block,
  .layout-sidenav.sidenav-vertical .sidenav-inner > .sidenav-item,
  .layout-sidenav .sidenav-vertical .sidenav-inner > .sidenav-item,
  .layout-sidenav.sidenav-vertical .sidenav-inner > .sidenav-header,
  .layout-sidenav .sidenav-vertical .sidenav-inner > .sidenav-header {
    width: ${sidenavWidth}rem;
  }
}`
}

window.setSidenavWidth = setSidenavWidth