:root {
/* WIDTH AND SPACINGS */
--sidebar-width: min(90vw, 400px);
--pad-m: 1.25rem;
--pad-s: 0.75rem;
--pad-xs: 0.5rem;
--dropdown-links-indent: 10px;
/* vertical & horizontal header padding */
--header-pad-y: clamp(1rem, 0.716rem + 1.211vw, 1.75rem);
--header-pad-x: var(--pad-m);
/* links vertical & horizontal padding */
--link-pad-y: 0.7rem;
--link-pad-x: 0.5rem;
/* panel top & bottom padding */
--panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);
/* GAPS */
--link-gap: 1.125rem;
--list-gap: 0;
/* BACKGROUND COLORS */
--nav-bg: white;
--cta-bg: dimgray;
--link-bg: transparent;
--header-bg: gray;
--dropdown-content-bg: rgb(0 0 0 / 5%);
--dropdown-links-bg: transparent;
--skip-link-background: black;
--hamburger-bg: transparent;
--collapse-icon-bg:#3b3b3b;
/* HOVER BACKGROUND */
--cta-hover-bg: black;
--link-hover-bg: rgb(0 0 0 / 5%);
--dropdown-links-hover-bg: rgb(0 0 0 / 8%);
/* TEXT COLORS */
--panel-title-color: black;
--panel-link-color: dimgray;
--cta-color: white;
--dropdown-links-color: dimgray;
--label-color: orangered;
--skip-link-color: white;
--social-color: dimgray;
/* HOVER TEXT COLORS */
--cta-hover-color: white;
--link-hover-color: black;
--dropdown-links-hover-color: black;
--social-hover-color: black;
/* ICON COLORS */
--panel-icon-color: dimgray;
--social-icon-color: var(--social-color);
--chevron-icon-color: var(--panel-icon-color);
--mobile-menu-trigger-color: white;
/* HOVER ICON COLORS */
--social-icon-hover-color: var(--social-hover-color);
--link-icon-hover-color: black;
/* FONT SIZES */
--panel-title-size: 1.125rem;
--panel-back-size: 0.6rem;
--link-txt-size: 0.875rem;
--nav-icon-size: 1.2rem;
--social-icon-size: var(--nav-icon-size);
--chevron-size: 1rem;
--collapse-icon-size: 30px;
/* CSS TRANSITIONS */
--sidebar-transition: 500ms;
--sidebar-ttf: cubic-bezier(1, 0, 0.25, 1);
--collapse-ttf: cubic-bezier(0.1, 0.55, 0.35, 1);
--opacity-transition: 500ms 200ms;
--sidebar-link-transition: 500ms;
/* BORDER */
--link-border-radius: 0;
--horizontal-line: 1px solid rgb(0 0 0 / 10%);
--link-underline: var(--horizontal-line);
--dropdown-links-underline: none;
--sidebar-shadow: 0px 0px 3px rgba(0, 0, 0, 0.75), 0px 5px 15px rgba(0, 0, 0, 0.3);
/* OVERLAY */
--overlay-bg: black;
--overlay-opacity: 0.5;
/* FOCUS STYLES */
--focus-outline-color: black;
--focus-outline-offset: 4px;
--focus-outline-width: 2px;
/* EXTRAS */
--current-link-bg: none;
--current-link-underline: solid 3px #9f6aff;
/* DROPDOWN LEVELS */
/* Indents */
--lvl-2-indent: var(--dropdown-links-indent);
--lvl-3-indent: var(--dropdown-links-indent);
/* Dropdown toggle background colors for expanded state */
--lvl-1-toggle-bg-active: var(--link-hover-bg);
--lvl-2-toggle-bg-active: var(--link-hover-bg);
--lvl-3-toggle-bg-active: var(--link-hover-bg);
/* Dropdown content background */
--lvl-1-content-bg: var(--dropdown-content-bg);
--lvl-2-content-bg: var(--dropdown-content-bg);
--lvl-3-content-bg: var(--dropdown-content-bg);
/* Text colors for expanded state */
--lvl-1-toggle-color-active: var(--panel-link-color);
--lvl-2-toggle-color-active: var(--panel-link-color);
--lvl-3-toggle-color-active: var(--panel-link-color);
/* Icon colors (normal) */
--lvl-1-icon-color: var(--chevron-icon-color);
--lvl-2-icon-color: var(--chevron-icon-color);
--lvl-3-icon-color: var(--chevron-icon-color);
/* Icon colors (hover) */
--lvl-1-icon-hover-color: var(--link-icon-hover-color);
--lvl-2-icon-hover-color: var(--link-icon-hover-color);
--lvl-3-icon-hover-color: var(--link-icon-hover-color);
/* Icon size */
--lvl-1-icon-size: 1.8rem;
--lvl-2-icon-size: var(--nav-icon-size);
--lvl-3-icon-size: var(--nav-icon-size);
}
/* INSIDE BRICKS */
/* hide header/nav when not in main template */
[data-builder-mode].brx-header-left #brx-header:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-header:not(.postid-521 *) {
display: none;
}
/* site normal width when not in main template */
[data-builder-mode].brx-header-left #brx-content:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-content:not(.postid-521 *),
[data-builder-mode].brx-header-left #brx-footer:not(.postid-521 *),
[data-builder-mode].brx-header-right #brx-footer:not(.postid-521 *) {
margin: 0 !important;
}
.dwc-sidebar__nav:not(.show-nav .dwc-sidebar__nav, [data-builder-mode] .dwc-sidebar__nav){
display: none;
}// Feature Toggles (1 = enabled, 0 = disabled)
// Automatically rename the text on the back button to show the panel name
// e.g., 'Back to Reviews' instead of the default 'Back'
const updateBackText = 1;
// Calculate header height for mobile menu top offset
const calcHeaderHeight = 1;
// Automatically open the current menu item's panel
const autoCurrentPosition = 1;
// Enable/disable the top bar and off-canvas menu
const enableTopBar = 0;
const enableOffCanvas = 0;
// Mobile and off-canvas breakpoints
const mq = window.matchMedia("(max-width: 1024px)");
const offCanvasBreakpoint = window.matchMedia("(max-width:10024px)");
// Off-canvas options
const offCanvasPushContent = 0; // Enable off-canvas content push (requires off-canvas to be enabled)
const fixedNavTrigger = 1; // Fix the toggle button when pushing content
// Dropdown behavior options
const openFirstDropDown = 0; // Open the first dropdown content on page load
const autoCloseDropdown = 1; // Automatically close the dropdown when it loses focus
// Sidebar and layout options
const overlaySidebar = 0; // Overlay the sidebar on a fullwidth page (requires off-canvas to be disabled)
const overlayTopBar = 0; // Overlay the top bar when using off-canvas
// RTL (Right-to-Left) layout support
const enableRTL = 0;
// Scrolling header reveal/hide effect
const enableHeadroom = 1;
/*
NOTES:
- Off-canvas or top bar must be enabled for headroom to work
- If you don't want off-canvas on desktop but want the headroom effect on mobile,
enable off-canvas and set the off-canvas breakpoint to match `mq` (e.g., 1024px)
*/
// Padding and offset options
const calcTopPadding = 1; // Adjust top padding of the first container when headroom is enabled
const offsetHashLinkScroll = 0; // Add offset when scrolling to hash links (useful for sticky headers)
// Offcanvas/Mobile menu behavior
const mobileMenuAboveHeader = 0; // Offcanvas/Mobile menu will overlap the top bar instead of displaying underneath
// COLLAPSE SIDEBAR OPTIONS
const enableCollapsibleSidebar = 0;
const collapseOnPageLoad = 0;
const saveCollapseState = 1; // Toggle whether to save the collapse state
const hoverToExpandSidebar = 1;
const collapseAutoWidth = 1;
const collapseWidth = 80; // manual width, when autowidth is off
const collapsecenterScrub = 0.85; // controls icons position on manual width
const offsetMultiplier = 3; //controls sidebar width on auto width
if (enableOffCanvas && offCanvasBreakpoint.matches) {
document.body.classList.add('dwc-offcanvas');
//console.log('offcanvas - 1')
}
/* OVERLAY SIDEBAR */
/*main and footer*/
.dwc-overlay-sidebar.brx-header-left #brx-content,
.dwc-overlay-sidebar.brx-header-left #brx-footer,
.dwc-overlay-sidebar.brx-header-right #brx-content,
.dwc-overlay-sidebar.brx-header-right #brx-footer,
.dwc-offcanvas.brx-header-left #brx-content,
.dwc-offcanvas.brx-header-left #brx-footer,
.dwc-offcanvas.brx-header-right #brx-content,
.dwc-offcanvas.brx-header-right #brx-footer {
margin-inline-start: 0;
}
.dwc-overlay-sidebar:not(.dwc-mobile) {
--header-bg: transparent;
--nav-bg: transparent;
}
.dwc-overlay-topbar {
--header-bg: transparent;
}
.dwc-overlay-topbar #dwc_header.dwc-sidebar {
background: var(--header-bg);
margin-block-end: calc(var(--dwc-header-height) * -1);
}
.brx-header-left.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
padding-inline-start: var(--sidebar-width);
}
.brx-header-right.dwc-overlay-sidebar:not(.dwc-mobile) .swiper-slide {
padding-inline-end: var(--sidebar-width);
}
.dwc-mobile-menu-over.dwc-offcanvas .dwc-sidebar__nav,
.dwc-mobile-menu-over.dwc-topbar-enabled .dwc-sidebar__nav,
.dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav{
z-index: 9999;
}
.dwc-mobile-menu-over.dwc-mobile .dwc-sidebar__nav__panel {
padding-block-start: 0 !important;
}
.dwc-offcanvas .dwc-sidebar__nav__panel:not(.dwc-mobile-menu-over *) {
padding-block-start: var(--dwc-header-height);
z-index: 0;
}
.dwc-offcanvas .dwc-header-inner-wrap:not(.dwc-mobile-menu-over *) {
z-index:99999;
}
/* OFFCANVAS */
.dwc-offcanvas.brx-header-left #brx-header {
bottom: auto;
inline-size: 100%;
}
.dwc-offcanvas.brx-header-left #brx-header:not(.dwc-headroom *) {
position: relative;
}
.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
transform: translateX(calc(var(--sidebar-width) * -1));
}
.dwc-rtl.dwc-push-content.dwc-slide-nav-open.dwc-nav-trigger-is-fixed .dwc-nav-trigger {
transform: translateX(calc(var(--sidebar-width) * 1));
}
.dwc-nav-trigger {
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
}
.dwc-offcanvas .dwc-sidebar__nav {
transform: translateX(-100%);
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
}
.dwc-offcanvas .dwc-sidebar__nav,
.dwc-topbar-enabled .dwc-sidebar__nav {
background: var(--nav-bg);
inline-size: var(--sidebar-width);
position: fixed !important;
bottom: 0;
inset-inline-start: 0;
inset-block-start: 0;
block-size: 100dvb;
overflow: hidden;
box-shadow: var(--sidebar-shadow);
}
.dwc-offcanvas.dwc-slide-nav-open .dwc-mobile-menu-overlay {
pointer-events: auto;
opacity: var(--overlay-opacity);
}
.dwc-offcanvas .dwc-mobile-menu-overlay {
background: var(--overlay-bg);
position: fixed !important;
inset-block-start: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
pointer-events: none;
opacity: 0;
transition: 0.4s 0.2s;
block-size: 100vh;
}
.dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
transform: translateX(0) !important;
}
.dwc-push-content .dwc-sidebar__nav__panel {
padding-block: var(--panel-block-pad) !important;
}
.dwc-offcanvas .dwc-sidebar__nav:not(.dwc-mobile *),
.dwc-topbar-enabled .dwc-sidebar__nav:not(.dwc-mobile *) {
z-index: 1000;
}
.dwc-topbar-enabled .dwc-sidebar__nav__panel:not(.dwc-mobile *) {
padding-block-start: calc(20px + var(--dwc-header-height));
}
/* body */
body.dwc-no-scroll {
overflow: hidden;
block-size: 100vh;
}
body.dwc-offcanvas {
--sidebar-transition: 700ms;
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
}
/* OFFCANVAS ENDS */
/* push content */
.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>header,
.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>footer,
.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper>main {
transform: translateX(var(--sidebar-width));
}
.dwc-mobile.dwc-push-content.dwc-slide-nav-open .dwc-site-wrapper {
overflow: hidden;
block-size: 100dvb;
}
.dwc-site-wrapper {
block-size: 100%;
display: flex;
flex-direction: column;
}
header,
footer,
main {
--sidebar-transition: 700ms;
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
}
/*RTL*/
.dwc-rtl .dwc-sidebar__nav__panel {
direction: rtl;
}
.dwc-rtl #brx-footer:not(.dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *),
.dwc-rtl #brx-content:not(.dwc-offcanvas *, .dwc-mobile *, .dwc-overlay-sidebar *, .dwc-offcanvas *) {
margin-inline-start: unset;
margin-inline-end: var(--sidebar-width);
}
.dwc-rtl header.dwc-sidebar {
inset-inline-end: 0;
}
.dwc-rtl.dwc-mobile .dwc-sidebar__nav,
.dwc-rtl.dwc-offcanvas .dwc-sidebar__nav,
.dwc-rtl.dwc-topbar-enabled .dwc-sidebar__nav,
.dwc-rtl #brx-header {
inset-inline-start: auto;
inset-inline-end: 0;
}
.dwc-rtl.dwc-mobile .dwc-sidebar__nav,
.dwc-rtl.dwc-offcanvas .dwc-sidebar__nav {
transform: translateX(100%);
}
.dwc-rtl.dwc-push-content.dwc-slide-nav-open header,
.dwc-rtl.dwc-push-content.dwc-slide-nav-open main,
.dwc-rtl.dwc-push-content.dwc-slide-nav-open footer {
--rtl-translate: calc(var(--sidebar-width) * -1);
transform: translateX(var(--rtl-translate));
}
/* RTL + OVERLAY SIDEBAR */
.dwc-rtl.dwc-overlay-sidebar .brxe-section:not(.dwc-mobile *),
.dwc-rtl.dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-mobile *) {
padding-inline-end: calc(var(--sidebar-width) + 20px);
}
.dwc-overlay-sidebar .brxe-section:not(.dwc-rtl *, .dwc-mobile *),
.dwc-overlay-sidebar #brx-footer .brxe-section:not(.dwc-rtl *, .dwc-mobile *) {
padding-inline-start: calc(var(--sidebar-width) + 20px)
}
/* TOP BAR*/
.dwc-topbar-enabled .dwc-header-inner-wrap,
.dwc-offcanvas .dwc-header-inner-wrap {
box-shadow: var(--sidebar-shadow);
}
.dwc-topbar-enabled .dwc-header-inner-wrap {
z-index: 9999;
}
.dwc-topbar-enabled #brx-header {
inline-size: 100%;
block-size: var(--dwc-header-height);
background: transparent !important;
/* position: relative;*/
}
.dwc-topbar-enabled .dwc-sidebar:not(.dwc-mobile *) {
position: fixed;
inline-size: 100%;
max-inline-size: 100%;
background: var(--header-bg);
box-shadow: none;
}
/* TOP BAR ENDS */
.dwc-current-menu-item {
background-color: var(--current-link-bg);
border-bottom: var(--current-link-underline);
}
#brx-header {
background-color: var(--header-bg);
}
.dwc-mobile.brx-header-left #brx-header:not(.dwc-headroom *),
.dwc-mobile.brx-header-right #brx-header:not(.dwc-headroom *) {
position: relative;
inline-size: 100%;
block-size: auto;
}
/* MEDIA QUERY - DESKTOP */
@media (min-width: 1025px) {
.dwc-nav-trigger:not(.dwc-offcanvas *, .bricks-draggable-item),
.dwc-mobile-menu-overlay:not(.dwc-offcanvas *),
.mobile.dwc-nav__panel__header:not(.dwc-offcanvas *),
.dwc-hamburger-wrap:not(.dwc-offcanvas *, .bricks-draggable-item){
display: none !important;
}
}
/* MEDIA QUERY - DESKTOP ENDS */
html,
body {
block-size: 100%
}
main,
footer {
inline-size: 100%;
}
main {
flex-grow: 1
}
.dwc-sidebar {
box-shadow: var(--sidebar-shadow)
}
.dwc-sidebar__nav {
block-size: 100%;
z-index: 1;
inline-size: var(--sidebar-width);
position: relative;
background-color: var(--nav-bg);
}
.dwc-sidebar__nav:not([data-builder-mode] *) {
overflow: hidden;
}
.dwc-sidebar__nav__panel {
background: var(--nav-bg);
position: absolute;
inline-size: 100%;
block-size: 100%;
display: flex;
flex-direction: column;
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
transform: translateX(0);
box-shadow: -5px -5px 40px rgb(0 0 0/10%);
z-index: 1000;
padding-block: var(--panel-block-pad);
padding-block-start: 0;
flex-wrap: nowrap;
}
.dwc-mobile .dwc-sidebar__nav__panel {
padding-block-start: var(--dwc-header-height);
}
.dwc-sidebar__nav__panel:not([data-builder-mode] *) {
overflow: hidden;
}
.dwc-sidebar__nav__panel:not([data-builder-mode] *)::after {
content: '';
position: absolute;
bottom: 5px;
inline-size: 100%;
block-size: var(--panel-block-pad);
background: var(--nav-bg);
filter: blur(5px)
}
.dwc-nav__panel__header {
inline-size: 100%;
padding: 0.32rem var(--pad-m);
gap: var(--list-gap);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 2;
flex-wrap: nowrap;
}
.dwc-header-inner-wrap {
inline-size: 100%;
padding-block: var(--header-pad-y);
padding-inline: var(--header-pad-x);
gap: var(--list-gap);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
z-index: 2;
flex-wrap: nowrap;
background: var(--header-bg);
position: relative;
}
.dwc-nav__panel__inner {
inline-size: 100%;
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
flex-wrap: nowrap;
padding-inline: var(--pad-m);
}
.dwc-nav__panel__title-wrap {
padding: var(--pad-s) var(--pad-xs);
inline-size: 100%;
box-shadow: 0 -6px 10px 15px var(--nav-bg);
position: -webkit-sticky;
position: sticky;
inset-block-start: -3px;
background-color: var(--nav-bg);
z-index: 1;
}
.dwc-nav__panel__title {
color: var(--panel-title-color);
font-size: var(--panel-title-size);
font-weight: 500;
letter-spacing: 1px;
}
.dwc-sidebar__nav__ul {
display: flex;
flex-direction: column;
inline-size: 100%;
margin: 0;
padding-inline-start: 0;
/* padding-block: var(--pad-m); */
gap: var(--list-gap);
flex-grow: 1;
}
.dwc-sidebar__nav__ul:not(.dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul) {
padding-block: var(--pad-m);
}
.dwc-sidebar__nav__li {
list-style: none;
inline-size: 100%;
position: relative;
border-radius: var(--link-border-radius)
}
.dwc-sidebar__nav__btn,
.dwc-sidebar__nav__link {
inline-size: 100%;
display: flex !important;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
padding: var(--link-pad-y) var(--link-pad-x);
gap: var(--link-gap);
color: var(--panel-link-color);
text-align: left;
line-height: 1.3;
transition: var(--sidebar-link-transition), outline 0s;
border-radius: var(--link-border-radius);
}
.dwc-nav__back-btn {
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
font-size: var(--panel-back-size);
}
.dwc-nav__home-btn {
inline-size: auto;
padding: var(--pad-s);
margin: auto;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--link-border-radius);
position: relative;
}
.nav__home-btn__txt {
position: absolute;
clip: rect(0, 0, 0, 0);
font-size: 12px;
}
.dwc-sidebar__nav__btn,
.dwc-sidebar__dropdown-toggle button {
outline-width: 0;
outline: none;
cursor: pointer;
background: var(--link-bg);
border: none;
}
/* mobile menu toggle button*/
.dwc-nav-trigger {
cursor: pointer;
position: relative;
min-inline-size: 26px !important;
min-block-size: 0 !important;
}
.dwc-nav-trigger::before {
inset-inline-start: 0;
inset-inline-end: 0;
transform: translateY(-5px);
}
.dwc-nav-trigger::after {
inset-inline-start: 10px;
inset-inline-end: 0;
transform: translateY(5px);
}
.dwc-nav-trigger::before,
.dwc-nav-trigger:after {
content: '';
position: absolute;
transition: 0.4s 0.3s;
block-size: 3px;
background: var(--mobile-menu-trigger-color);
inset-block-start: 50%;
border-radius: 50vw
}
.dwc-slide-nav-open .dwc-nav-trigger::before {
transform: translateY(0) rotate(45deg);
}
.dwc-slide-nav-open .dwc-nav-trigger::after {
transform: translateY(0) rotate(-45deg);
inset-inline-start: 0;
}
.dwc-sidebar__dropdown-toggle .dwc-nav__link__icon--chevron-right {
transform: rotate(90deg);
transition: 0.4s
}
.dwc-sidebar__dropdown-toggle [aria-expanded="true"] .dwc-nav__link__icon {
transform: rotate(270deg)
}
.dwc-sidebar__dropdown-content {
overflow: hidden;
transition: var(--sidebar-transition) cubic-bezier(0.22, 0.61, 0.36, 1);
padding-inline: var(--link-pad-x);
padding-block: 0;
background-color: var(--dropdown-content-bg)
}
/*
.dwc-sidebar__dropdown-content .dwc-sidebar__nav__ul {
padding-block: calc(var(--link-pad-y) * 0.8);
}
*/
.dwc-sidebar__dropdown-content .dwc-sidebar__nav__li {
border: var(--dropdown-links-underline);
}
.dwc-sidebar__dropdown-toggle {
inline-size: 100%;
display: flex !important;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
gap: var(--link-gap);
text-align: left;
line-height: 1.3;
padding-inline-start: var(--link-pad-x);
position: relative;
transition: var(--sidebar-link-transition);
}
.dwc-sidebar__dropdown ul .dwc-nav__link__text,
.dwc-sidebar__dropdown button {
transition: var(--sidebar-link-transition), outline 0s;
border-radius: var(--link-border-radius);
inline-size: 100%;
}
.dwc-sidebar__dropdown button,
.dwc-sidebar__dropdown-toggle .dwc-nav__link__text {
padding: var(--link-pad-y) 0;
}
.dwc-sidebar__dropdown-content ul .dwc-nav__link__text {
padding: var(--link-pad-y) var(--link-pad-x);
}
.dwc-sidebar__dropdown-content ul:not([class*="level-"]:not(.level-1) ul){
padding-inline-start: calc(var(--dropdown-links-indent) - var(--link-pad-x));
padding-block: var(--link-pad-y);
}
.dwc-sidebar__dropdown-toggle button {
margin-inline-start: auto;
flex-grow: 1;
padding-inline-end: var(--link-pad-x);
position: absolute;
inset-block-start: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
}
/* LEVEL 1 STYLES */
/* Normal icon color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-nav__link__icon:not(.dwc-nav__home-btn *, .dwc-nav__link__icon--chevron-right, .dwc-nav__link__icon--chevron-left) {
color: var(--lvl-1-icon-color);
font-size:var(--lvl-1-icon-size)
}
/* Expanded background color for Level 1 */
.dwc-sidebar__dropdown-toggle.level-1:has([aria-expanded='true']) {
background-color: var(--lvl-1-toggle-bg-active);
}
/* Dropdown content background for Level 1 */
.dwc-sidebar__dropdown-content.level-1 {
background-color: var(--lvl-1-content-bg);
}
/* LEVEL 2 STYLES */
/* Expanded background color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) {
background-color: var(--lvl-2-toggle-bg-active);
}
/* Expanded text color for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2:has([aria-expanded='true']) .dwc-nav__link__text {
color: var(--lvl-2-toggle-color-active);
}
/* Dropdown content background for Level 2 */
.dwc-sidebar__dropdown-content.level-2 {
background-color: var(--lvl-2-content-bg);
padding-inline-start: var(--lvl-2-indent);
}
/* Normal icon color and size for Level 2 */
.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {
font-size:var(--lvl-2-icon-size)
}
.dwc-sidebar__dropdown-toggle.level-2 .dwc-nav__link__icon {
color: var(--lvl-2-icon-color);
}
/* Icon color for Level 2 when expanded */
.level-2:has([aria-expanded='true']) .dwc-nav__link__icon {
color: var(--lvl-2-icon-color);
}
/* Hover icon color for Level 2 when expanded */
li>.level-2:has([aria-expanded='true']):hover .dwc-nav__link__icon {
color: var(--lvl-2-icon-hover-color) !important;
}
/* LEVEL 3 STYLES */
/* Expanded background color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) {
background-color: var(--lvl-3-toggle-bg-active);
}
/* Expanded text color for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3:has([aria-expanded='true']) .dwc-nav__link__text {
color: var(--lvl-3-toggle-color-active);
}
/* Dropdown content background for Level 3 */
.dwc-sidebar__dropdown-content.level-3 {
background-color: var(--lvl-3-content-bg);
padding-inline-start: var(--lvl-3-indent);
}
/* Normal icon color and size for Level 3 */
.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon {
color: var(--lvl-3-icon-color);
}
.dwc-sidebar__dropdown-toggle.level-3 .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right) {
font-size:var(--lvl-3-icon-size)
}
/* Icon color for Level 3 when expanded */
.level-3:has([aria-expanded='true']) .dwc-nav__link__icon {
color: var(--lvl-3-icon-color);
}
/* Hover icon color for Level 3 when expanded */
li>.level-3:has([aria-expanded='true']):hover .dwc-nav__link__icon {
color: var(--lvl-3-icon-hover-color) !important;
}
.dwc-sidebar__nav__li {
border-bottom: var(--link-underline);
}
.dwc-sidebar__nav__link:hover,
.dwc-nav__home-btn:hover,
button.dwc-sidebar__nav__btn:hover,
.dwc-sidebar__dropdown-toggle:hover {
background: var(--link-hover-bg);
}
.dwc-sidebar__dropdown-content a {
background: var(--dropdown-links-bg);
color: var(--dropdown-links-color)
}
.dwc-sidebar__dropdown-content a:hover {
background: var(--dropdown-links-hover-bg);
color: var(--dropdown-links-hover-color)
}
button:hover .dwc-nav__link__text,
.dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text,
button:hover .dwc-nav__back__text,
.dwc-sidebar__dropdown-toggle:hover .dwc-nav__link__text {
color: var(--link-hover-color);
}
.dwc-nav__link__text {
color: var(--panel-link-color);
font-size: var(--link-txt-size);
}
.dwc-sidebar__nav__link::before {
content: '';
inset-block-start: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
position: absolute;
}
/* button:hover .dwc-nav__link__icon,
li:hover .dwc-nav__link__icon {
color: var(--link-icon-hover-color) !important;
} */
button:hover .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3 *),
li:hover > .dwc-sidebar__dropdown-toggle .dwc-nav__link__icon:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *),
li:hover > a .dwc-nav__link__icon{
color: var(--link-icon-hover-color) !important;
}
.dwc-nav__link__icon {
font-size: var(--nav-icon-size);
color: var(--panel-icon-color)
}
.dwc-nav__link__icon--chevron-right {
margin-inline-start: auto;
}
.dwc-nav__link__icon--chevron-right,
.dwc-nav__link__icon--chevron-left {
font-size: var(--chevron-size);
color: var(--chevron-icon-color);
}
svg.dwc-nav__link__icon{
width: var(--nav-icon-size);
height: auto;
}
svg.dwc-nav__link__icon path {
stroke: var(--panel-icon-color);
}
.dwc-sidebar__nav__link:hover > svg.dwc-nav__link__icon path {
stroke:var(--link-icon-hover-color) !important;
}
button:hover svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3 *),
li:hover > .dwc-sidebar__dropdown-toggle svg.dwc-nav__link__icon path:not(.level-2:has([aria-expanded='true']) *, .level-3:has([aria-expanded='true']) *),
li:hover > a svg.dwc-nav__link__icon path {
color: var(--link-icon-hover-color) !important;
}
.dwc-sidebar__nav__list-img {
inline-size: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: top center;
border-radius: var(--link-border-radius);
}
.dwc-sidebar__nav__panel-footer {
inline-size: 100%;
padding-block: var(--pad-m);
gap: var(--link-gap);
z-index: 5;
padding-inline: var(--pad-m);
border-top: var(--horizontal-line);
}
.dwc-sidebar__nav__panel-footer:not([data-builder-mode] *) {
box-shadow: 0 6px 24px 32px var(--nav-bg);
}
.dwc-social-wrapper a {
color: var(--social-color);
}
.dwc-social-wrapper a:hover {
color: var(--social-hover-color)
}
.dwc-social-wrapper li {
background: var(--social-bg);
border-radius: var(--link-border-radius);
}
.dwc-social-wrapper li:hover {
background: var(--social-hover-bg);
}
.dwc-social-wrapper i {
color: var(--social-icon-color);
font-size: var(--social-icon-size);
}
.dwc-social-wrapper li:hover i {
color: var(--social-icon-hover-color)
}
.dwc-cta {
justify-content: center;
background: var(--cta-bg);
inline-size: 100%;
color: var(--cta-color);
border-radius: var(--link-border-radius);
}
.dwc-cta:hover {
background: var(--cta-hover-bg);
}
/*FOCUS STYLES*/
.dwc-sidebar *:not(.dwc-sidebar .dwc-sidebar__nav__panel):focus-visible {
outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
outline-offset: var(--focus-outline-offset);
transition: 0s;
}
.dwc-sidebar li:not(.dwc-sidebar__dropdown):focus-within {
outline: solid var(--focus-outline-width) var(--focus-outline-color) !important;
}
.dwc-sidebar li:focus-within:has(:focus:not(:focus-visible)),
#brx-header .dwc-sidebar li a:not(.dwc-sidebar__dropdown-toggle *):focus-visible,
#brx-header .dwc-sidebar__nav__btn:not(.dwc-nav__back-btn):focus-visible,
.dwc-sidebar__nav__panel:focus,
.dwc-sidebar__nav__panel:focus-visible,
.dwc-sidebar *:focus:not(:focus-visible),
header:focus-visible {
outline: none !important;
}
/*FOCUS STYLES END*/
.dwc-slide-left {
transform: translateX(-100%);
z-index: 0;
}
.dwc-slide-right {
transform: translateX(75%);
z-index: 0;
opacity: 0;
}
/* mobile menu toggle */
.dwc-nav-trigger {
border: none;
background: none;
padding: var(--pad-m)
}
/*MEDIA QUERY - MOBILE*/
@media (max-width:1024px) {
/*header and menu on mobile*/
.brx-header-left #brx-header:not([data-builder-mode] *, .dwc-headroom.dwc-mobile *),
.brx-header-right #brx-header:not([data-builder-mode] *) {
position: relative;
inline-size: 100%;
block-size: auto;
}
/*main and footer*/
.brx-header-left #brx-content,
.brx-header-left #brx-footer,
.brx-header-right #brx-content,
.brx-header-right #brx-footer {
margin: 0 !important;
}
.dwc-sidebar__nav {
background: var(--nav-bg);
inline-size: var(--sidebar-width);
position: fixed;
bottom: 0;
inset-inline-start: 0;
inset-block-start: 0;
transform: translateX(-100%);
transition: transform var(--sidebar-transition) var(--sidebar-ttf), opacity var(--opacity-transition);
min-block-size: 100vh;
min-block-size: 100dvb;
}
.dwc-sidebar__nav__panel:not([data-builder-mode] *) {
background: transparent;
}
.dwc-sidebar__nav__panel>div {
background: var(--nav-bg);
}
.dwc-slide-nav-open .dwc-sidebar__nav:not(.dwc-push-content *) {
transform: translateX(0);
}
.dwc-nav__link__text {
font-weight: 500;
}
.dwc-sidebar__logo-wrapper {
inline-size: auto;
}
body.dwc-slide-nav-open {
overflow: hidden;
block-size: 100vh
}
.dwc-mobile-menu-overlay {
background: var(--overlay-bg);
position: fixed;
inset-block-start: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
pointer-events: none;
opacity: 0;
transition: 0.4s 0.2s;
}
.dwc-slide-nav-open .dwc-mobile-menu-overlay {
pointer-events: auto;
opacity: var(--overlay-opacity);
}
/* RIGHT MENU ON MOBILE*/
.brx-header-right .dwc-sidebar__nav {
transform: translateX(100%);
inset-inline-start: auto;
inset-inline-end: 0;
}
.dwc-slide-nav-open.brx-header-right .dwc-sidebar__nav {
transform: translateX(0%);
}
/* inside Bricks start*/
[data-builder-mode] .dwc-sidebar__nav {
inset-block-start: 120px;
transform: translateX(0);
border-top: dashed 1px gray;
position: static;
overflow: visible;
}
[data-builder-mode].brx-header-left #brx-header,
[data-builder-mode].brx-header-right #brx-header {
background: transparent;
}
/* inside Bricks end */
}
/*MEDIA QUERY - MOBILE ENDS */
/* headroom*/
.dwc-headroom.dwc-offcanvas .dwc-sidebar,
.dwc-headroom.dwc-topbar-enabled .dwc-sidebar,
.dwc-headroom.dwc-offcanvas .dwc-header-inner-wrap,
.dwc-headroom.dwc-topbar-enabled .dwc-header-inner-wrap {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
inset-inline-end: 0;
transition: transform 1s ease;
}
/*.dwc-headroom.scroll-down .dwc-sidebar:not(.dwc-topbar-enabled *),*/
.dwc-headroom.dwc-offcanvas.scroll-down .dwc-header-inner-wrap,
.dwc-headroom.dwc-topbar-enabled.scroll-down .dwc-header-inner-wrap {
transform: translateY(-100%);
}
@media (max-height: 667px) {
.dwc-sidebar__nav__panel:not(.ng-scope .dwc-sidebar__nav__panel) {
overflow-y:scroll;
overscroll-behavior: contain;
/* min-block-size: 100vh;
min-block-size: 100dvb;*/
}
.dwc-nav__panel__inner {
overflow: hidden;
flex-shrink: 0;
}
}
/* MEDIA QUERY - MOBILE ENDS */
/*SCROLLBARS*/
.dwc-nav__panel__inner::-webkit-scrollbar-track {
border-radius: 5px;
background-color: transparent;
}
.dwc-nav__panel__inner::-webkit-scrollbar {
inline-size: 0;
background-color: transparent;
}
.dwc-nav__panel__inner::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: var(--nav-bg);
}
/* SCROLLBARS END */
/* FADE IN OFFCANVS */
.dwc-offcanvas-header{
animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
}
.dwc-offcanvas-header nav{
animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.6s both;
}
body:has(.dwc-offcanvas-header) {
animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
}
@keyframes dwc-header-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* INSIDE BRICKS */
[data-builder-mode] .dwc-sidebar__nav__panel,
[data-builder-mode].brx-header-left #brx-header,
[data-builder-mode].brx-header-right #brx-header {
position: static !important;
outline: gray dashed 3px;
padding-block-end: 20px;
min-block-size: min(100vh, 600px);
block-size: unset;
}
#brx-header.bricks-area {
inline-size: 100% !important;
min-block-size: unset !important;
padding-block-end: 0 !important;
}
.bricks-draggable-item.dwc-sidebar {
position: relative
}
.bricks-draggable-item.dwc-sidebar__nav {
position: absolute;
inset-block-start: 100%;
flex-wrap: nowrap;
}
[data-builder-mode] .dwc-slide-right {
opacity: 1 !important;
transform: translateX(0) !important;
}
[data-builder-mode] .dwc-sidebar__nav {
overflow: visible !important;
}
[data-builder-mode] .dwc-sidebar__nav__panel:hover {
outline: yellow solid 3px;
z-index: 100000
}
[data-builder-mode] .dwc-slide-right {
opacity: 1;
transform: translateX(0);
}
[data-builder-mode] button.dwc-sidebar__nav__btn,
[data-builder-mode] .dwc-sidebar__nav__link,
[data-builder-mode] .dwc-sidebar__nav__panel {
position: relative;
}
[data-builder-mode] button.dwc-sidebar__nav__btn::after {
content: 'TO ' '"'attr(data-title)'"' ' PANEL';
position: absolute;
bottom: 1px;
left: 40px;
font-size: 8px;
font-weight: bold;
color: var(--label-color);
letter-spacing: 1px;
font-family: poppins, roboto;
}
[data-builder-mode] button.dwc-nav__back-btn::after {
content: 'To previous panel';
inset-inline-start: 32px;
}
[data-builder-mode] button.dwc-nav__home-btn::after {
content: 'HOME';
position: absolute;
top: 80%;
left: 48%;
right: auto;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0.8;
font-size: 8px;
font-weight: bold;
color: var(--label-color);
letter-spacing: 1px;
font-family: poppins, roboto;
}
[data-builder-mode] .dwc-sidebar__nav__panel::after {
content: '"'attr(data-title)'"' ' Panel';
position: absolute;
top: 0;
left: 100%;
font-size: 18px;
font-weight: bold;
color: black;
background: white;
padding-inline: 2rem;
letter-spacing: 1px;
white-space: nowrap;
writing-mode: vertical-lr;
}
[data-builder-mode] .dwc-sidebar__dropdown-toggle > button::before
{
position: absolute;
right: 100%;
color: var(--label-color);
background-color: #ebebeb;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
font-family: poppins, roboto;
padding: 4px;
border-radius: 5px;
}
[data-builder-mode] .dwc-sidebar__dropdown-content{
overflow: visible;
}
[data-builder-mode] .dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown > .dwc-sidebar__dropdown-toggle > button::before{
content: 'L1';
}
[data-builder-mode] .dwc-sidebar__dropdown-toggle:not(.dwc-nav__panel__inner > ul > .dwc-sidebar__dropdown > *,.dwc-sidebar__dropdown .dwc-sidebar__dropdown .dwc-sidebar__dropdown > *) > button::before{
content: 'L2';
}
[data-builder-mode] .dwc-sidebar__dropdown-toggle > button::before{
content: 'L3';
}
/*
[data-builder-mode] .dwc-sidebar__dropdown-content:not(.dwc-sidebar__nav__li.is-active-element *, .is-active-element, :has(.is-active-element), .is-active-element + .dwc-sidebar__dropdown-content, :has(.is-active-element) + .dwc-sidebar__dropdown-content) {
height: 0;
overflow: hidden;
}*/
/* COLLAPSE SIDEBAR*/
.dwc-collapse-enabled #brx-header,
.dwc-nav__link__icon,
.dwc-social-wrapper li .icon,
.dwc-nav__link__text,
.dwc-nav__link__icon--chevron-right,
.dwc-social__text,
.dwc-show,
.dwc-hide,
.dwc-toggle-collapse .brxe-icon,
footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-enabled .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *),
.dwc-collapse-enabled main:not(.dwc-mobile *) {
--sidebar-transition: 700ms;
transition:
transform var(--sidebar-transition) var(--collapse-ttf),
opacity var(--opacity-transition),
inline-size var(--sidebar-transition) var(--collapse-ttf) !important;
}
.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-rtl *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-rtl *) {
transform: translateX(calc(var(--sidebar-width) - var(--collapse-offset)));
}
.dwc-rtl.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right),
.dwc-rtl.dwc-collapse-sidebar .dwc-social-wrapper li .icon{
transform: translateX(calc((var(--sidebar-width) * -1) + var(--collapse-offset)));
}
.dwc-collapse-sidebar .dwc-show:not(.dwc-rtl *) {
transform: translateX(calc(var(--sidebar-width) - (var(--collapse-offset) + var(--collapse-pad))));
}
.dwc-collapse-sidebar .dwc-show {
opacity: 1;
}
.dwc-collapse-sidebar .dwc-nav__link__text,
.dwc-collapse-sidebar .dwc-nav__link__icon--chevron-right,
.dwc-collapse-sidebar .dwc-social-wrapper li span,
.dwc-collapse-sidebar .dwc-hide {
opacity: 0;
}
.dwc-collapse-sidebar #brx-header:not(.dwc-rtl *) {
transform: translateX(calc(-100% + var(--collapse-offset)))
}
.dwc-rtl.dwc-collapse-sidebar #brx-header {
transform: translateX(calc(100% - var(--collapse-offset)))
}
.dwc-collapse-sidebar footer:not(.dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-site-wrapper>:not(header, .dwc-offcanvas, .dwc-mobile *, .dwc-overlay-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar>main:not(.dwc-mobile *) {
--sidebar-transition: 350ms;
inline-size: calc(100% - var(--collapse-offset)) !important;
margin-inline-start: auto !important;
}
.dwc-collapse-enabled.brx-header-left #brx-content:not(.dwc-collapse-sidebar *, .dwc-mobile *),
.dwc-collapse-enabled.brx-header-left #brx-footer:not(.dwc-collapse-sidebar *, .dwc-mobile *) {
margin-inline-start: auto;
inline-size: calc((100% + 15px) - var(--sidebar-width));
}
.dwc-toggle-collapse:not([data-builder-mode] *, .dwc-collapse-enabled .dwc-toggle-collapse) {
display: none;
}
.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon:not(.dwc-rtl *) {
transform: rotate(180deg);
}
.dwc-rtl.dwc-collapse-sidebar .dwc-toggle-collapse .brxe-icon {
transform: rotate(0deg) !important;
}
.dwc-rtl .dwc-toggle-collapse .brxe-icon {
transform: rotate(180deg) !important;
}
.dwc-show:not(.dwc-collapse-sidebar *, [data-builder-mode] *),
.dwc-collapse-sidebar .dwc-hide:not(.dwc-fade) {
opacity: 0;
position: absolute;
}
/* WITH TOBAR ENABLED */
.dwc-topbar-enabled .dwc-toggle-collapse {
position: absolute;
inset-inline-start: var(--sidebar-width);
inset-block-start: 100%;
block-size: 100%;
transition: left var(--sidebar-transition) var(--collapse-ttf);
display: flex;
}
.dwc-topbar-enabled.dwc-mobile .dwc-toggle-collapse{
display: none;
}
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse {
inset-inline-start: var(--collapse-offset);
}
.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-header-inner-wrap.dwc-show {
transform: translateX(0);
}
.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *),
.dwc-collapse-sidebar.dwc-topbar-enabled .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}
.dwc-collapse-sidebar.dwc-topbar-enabled #brx-header {
transform: unset !important;
}
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav {
transform: translateX(calc(-100% + var(--collapse-offset)));
}
.dwc-topbar-enabled .dwc-sidebar__nav {
transition:
transform var(--sidebar-transition) var(--collapse-ttf),
opacity var(--opacity-transition),
width var(--sidebar-transition) var(--collapse-ttf) !important;
}
/* MANUAL WIDTH*/
.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *, .dwc-rtl *) {
transform: translateX(calc(-100% + var(--collapse-w)));
}
.dwc-rtl.dwc-collapse-sidebar #brx-header:not(.dwc-auto-width *) {
transform: translateX(calc(100% - var(--collapse-w)));
}
.dwc-collapse-sidebar .dwc-nav__link__icon:not(.dwc-nav__link__icon--chevron-right, .dwc-auto-width *),
.dwc-collapse-sidebar .dwc-social-wrapper li .icon:not(.dwc-auto-width *) {
transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}
.dwc-collapse-sidebar .dwc-show:not(.dwc-auto-width *) {
opacity: 1;
transform: translateX(calc(var(--sidebar-width) - ((var(--center-scrub) * var(--collapse-w)) + var(--icon-width-offset))));
}
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-sidebar__nav:not(.dwc-auto-width *) {
transform: translateX(calc(-100% + var(--collapse-w))) ;
}
.dwc-topbar-enabled.dwc-collapse-sidebar .dwc-toggle-collapse:not(.dwc-auto-width *) {
inset-inline-start: var(--collapse-w);
}if (enableTopBar && !enableOffCanvas) {
document.body.classList.add('dwc-topbar-enabled')
}
if (enableRTL) {
document.body.classList.add('dwc-rtl')
}
// we can remove !enableOffCanvas if on mobile only to have overlay on desktop + headroom on mobile.
if (overlaySidebar && !enableOffCanvas) {
document.body.classList.add('dwc-overlay-sidebar')
}
if (overlayTopBar && enableOffCanvas) {
document.body.classList.add('dwc-overlay-topbar')
}
if (mobileMenuAboveHeader == 1) {
document.body.classList.add('dwc-mobile-menu-over')
}
document.body.classList.add('show-nav')
//console.log('show nav')
//document.addEventListener('DOMContentLoaded', () => {
// COLLAPSE SIDEBAR startes
if (enableCollapsibleSidebar && !enableOffCanvas && !mq.matches) {
const collapseToggle = document.querySelector('.dwc-toggle-collapse');
const sidebarNav = document.querySelector('.dwc-sidebar__nav');
let removedByMouseEnter = false; // Track if class was removed by hover
document.body.classList.add('dwc-collapse-enabled');
if (collapseAutoWidth) {
document.body.classList.add('dwc-auto-width');
} else {
document.body.style.setProperty('--collapse-w', `${collapseWidth}px`);
document.body.style.setProperty('--center-scrub', `${collapsecenterScrub}`);
}
// Toggle collapse on button click
collapseToggle.addEventListener('click', function () {
document.body.classList.toggle('dwc-collapse-sidebar');
initCollapseContent(); goHome();
saveCollapseStatus(); // Save the updated state after toggling
});
// Hover functionality
if (hoverToExpandSidebar) {
sidebarNav.addEventListener('mouseenter', function () {
if (document.body.classList.contains('dwc-collapse-sidebar')) {
document.body.classList.remove('dwc-collapse-sidebar');
removedByMouseEnter = true; // Mark that we explicitly removed it
}
});
sidebarNav.addEventListener('mouseleave', function () {
if (removedByMouseEnter) {
document.body.classList.add('dwc-collapse-sidebar');
initCollapseContent(); goHome()
removedByMouseEnter = false; // Reset the flag after re-adding
}
});
}
// expand when links are focused
let removedByFocus = false;
let keepOpenOnEnter = false;
const focusableElements = sidebarNav.querySelectorAll('a, button, input, [tabindex]:not([tabindex="-1"])');
// Listen for 'keydown' on buttons within sidebarNav to detect Enter key presses
sidebarNav.addEventListener('keydown', function (event) {
if (event.key === 'Enter' && event.target.tagName === 'BUTTON') {
keepOpenOnEnter = true;
}
});
sidebarNav.addEventListener('focusin', function (event) {
if (document.body.classList.contains('dwc-collapse-sidebar')) {
document.body.classList.remove('dwc-collapse-sidebar');
removedByFocus = true; // Mark that we explicitly removed it
}
});
sidebarNav.addEventListener('focusout', function () {
setTimeout(function () {
const isFocusOutsideSidebar = [...focusableElements].every(el => !el.contains(document.activeElement));
if (isFocusOutsideSidebar && removedByFocus && !keepOpenOnEnter) {
document.body.classList.add('dwc-collapse-sidebar');
initCollapseContent();
goHome();
removedByFocus = false; // Reset the flag after re-adding
}
// Reset the Enter key flag after the check
keepOpenOnEnter = false;
}, 50);
});
// Run once on page load to apply the saved state
loadCollapseStatus();
//----- COLLAPSE ON PAGE LOAD
if (collapseOnPageLoad) {
document.body.classList.add('dwc-collapse-sidebar');
saveCollapseStatus(); // Save the updated state after toggling
}
// Call the function when needed
setCollapseOffset();
}
// COLLAPSE SIDEBAR FUNCTIONS
// // set offset variable
// function setCollapseOffset() {
// // Get the padding values of .dwc-nav__panel__inner
// const panelInner = document.querySelector('.dwc-nav__panel__inner');
// if (!panelInner) return; // Check if element exists
// const panelStyles = getComputedStyle(panelInner);
// const paddingLeft = parseFloat(panelStyles.paddingLeft);
// // Get the width of .dwc-nav__link__icon
// const iconElement = document.querySelector('.dwc-nav__link__icon');
// if (!iconElement) return; // Check if element exists
// const iconWidth = iconElement.offsetWidth;
// const iconWidthOffset = iconWidth / 2;
// // Sum the paddings and icon width
// const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;
// // Set the CSS variables on the body
// document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
// document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
// document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`)
// }
// set offset variable
function setCollapseOffset() {
// Get the padding values of .dwc-nav__panel__inner
const panelInner = document.querySelector('.dwc-nav__panel__inner');
if (!panelInner) return; // Check if element exists
const panelStyles = getComputedStyle(panelInner);
const paddingLeft = parseFloat(panelStyles.paddingLeft);
// Get the width of .dwc-nav__link__icon
const iconElement = document.querySelector('.dwc-nav__link__icon');
if (!iconElement) return; // Check if element exists
// Use getBoundingClientRect() which works for both HTML and SVG elements
const iconRect = iconElement.getBoundingClientRect();
const iconWidth = iconRect.width;
const iconWidthOffset = iconWidth / 2;
// Sum the paddings and icon width
const collapseOffset = (paddingLeft * offsetMultiplier) + iconWidth;
// Set the CSS variables on the body
document.body.style.setProperty('--collapse-offset', `${collapseOffset}px`);
document.body.style.setProperty('--icon-width-offset', `${iconWidthOffset}px`);
document.body.style.setProperty('--collapse-pad', `${paddingLeft}px`);
}
//------ SAVE COLLAPASE STATE
function saveCollapseStatus() {
if (saveCollapseState === 1) {
const isCollapsed = document.body.classList.contains('dwc-collapse-sidebar');
// Save the current state to localStorage
localStorage.setItem('sidebarCollapsed', isCollapsed ? 'true' : 'false');
}
}
// RESTORE COLLAPSE STATE
function loadCollapseStatus() {
if (saveCollapseState === 1) {
const savedState = localStorage.getItem('sidebarCollapsed');
// If the state exists, apply the correct class to the body
if (savedState === 'true') {
document.body.classList.add('dwc-collapse-sidebar');
// initCollapseContent();
} else if (savedState === 'false') {
document.body.classList.remove('dwc-collapse-sidebar');
}
}
}
// FUNCTIONS END
// IF COLLAPSE SIDEBAR ENDS
// COLLAPSE SIDEBAR ENDS
// Select the element
const listItem = document.querySelector('.dwc-sidebar__nav__li');
if (listItem) {
// Get the computed height of the element
const listItemHeight = listItem.offsetHeight;
// Set the height as a CSS variable on the body
document.body.style.setProperty('--list-item-height', `${listItemHeight}px`);
}
const header = document.querySelector("header");
const sidebar = document.querySelector('.dwc-sidebar');
const navTrigger = document.querySelector(".dwc-nav-trigger");
const closeBtn = document.querySelector(".dwc-sidebar__nav-close-btn");
const mobileMenuOverlay = document.querySelector(".dwc-mobile-menu-overlay");
const body = document.body;
const nav = document.querySelector('.dwc-sidebar__nav');
const homePanel = document.querySelector('.dwc-sidebar__nav__panel--home');
const sidebarNavPanels = document.querySelectorAll(".dwc-sidebar__nav__panel");
const dropdownToggles = document.querySelectorAll('.dwc-sidebar__dropdown-toggle button');
const dropdownContents = document.querySelectorAll('.dwc-sidebar__dropdown-content');
const menuLinks = document.querySelectorAll('.dwc-sidebar__nav__li a');
const offCanvasMobileOnly = offCanvasBreakpoint.matches;
const savedState = localStorage.getItem('sidebarCollapsed');
const select = selector => document.querySelectorAll(selector);
const initInert = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {
if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
nPanel.inert = true;
} else if (enableOffCanvas && offCanvasMobileOnly) {
nPanel.inert = true;
} else {
nPanel.inert = false;
}
});
//OPEN FIRST DROP DOWN
if (openFirstDropDown) {
setTimeout(function () {
dropdownToggles[0].click();
}, 600);
}
// Get DROPWDOWN LEVELS
if(dropdownContents){
dropdownContents.forEach(function (element) {
let level = 1;
let parent = element.parentElement.closest('.dwc-sidebar__dropdown-content');
// Calculate the level by checking the number of ancestors
while (parent) {
level++;
parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
}
// Assign the appropriate level class to the dropdown content
element.classList.add(`level-${level}`);
// Find the previous sibling with the class .dwc-sidebar__dropdown-toggle
const previousToggle = element.previousElementSibling;
// Check if the previous sibling is a dropdown toggle and assign the level class
if (previousToggle && previousToggle.classList.contains('dwc-sidebar__dropdown-toggle')) {
previousToggle.classList.add(`level-${level}`);
}
});
}
// CURRENT MENU ITEM ****************
// Get the current page address without trailing slash
var currentPage = window.location.pathname.replace(/\/$/, '');
for (var i = 0; i < menuLinks.length; i++) {
var link = menuLinks[i];
// Extract the pathname from the link's href attribute without trailing slash
var linkPathname = link.href.replace(window.location.origin, '').replace(/\/$/, '');
// Check if the pathname matches the current page
if (linkPathname === currentPage) {
// Add the class 'dwc-current-menu-item' to the matching link
link.classList.add("dwc-current-menu-item");
// Break out of the loop since we found the matching link
break;
} else {
// Skip to the next iteration if the link doesn't match
continue;
}
}
setTimeout(function () {
if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }
const currentDropDownLink = document.querySelector('.dwc-current-menu-item.dwc-nav__link__text');
if (currentDropDownLink) {
const parent = currentDropDownLink.closest('.dwc-sidebar__dropdown-content');
if (parent) {
const toggle = parent.previousElementSibling.querySelector('button');
if (toggle) {
toggle.click();
}
}
setTimeout(function () {
currentDropDownLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
//console.log(currentDropDownLink);
}, 500);
}
}, 2000);
// CURRENT MENU ENDS **********
// CURRENT MENU CHECK - we'll be using this to determine if to reset panels on navTrigger click or not
var hasCurrentMenu = Array.from(document.querySelectorAll(".dwc-sidebar__nav__link.dwc-current-menu-item")).some(function (link) {
var parentPanel = link.closest(".dwc-sidebar__nav__panel");
return !parentPanel || !parentPanel.classList.contains("dwc-sidebar__nav__panel--home");
});
// CURRENT CHECK ENDS *********************
const goHome = () => select('.dwc-sidebar__nav__panel').forEach(nPanel => {
nPanel.classList.remove('dwc-slide-left');
if (!nPanel.classList.contains('dwc-sidebar__nav__panel--home')) {
nPanel.classList.add('dwc-slide-right');
nPanel.inert = true;
} else {
nPanel.inert = false;
if (header && !mq.matches) {
header.setAttribute('tabindex', 0);
header.focus()
}
}
select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
sbtn.setAttribute('aria-expanded', 'false');
})
mobileMenuIsClosed()
window.addEventListener("resize", mobileMenuIsClosed);
});
select('.dwc-nav__home-btn').forEach(hbtn => hbtn.addEventListener('click', goHome));
nav.addEventListener('keydown', event => {
if (nav.contains(event.target)) {
if (event.key === 'Escape') {
if (body.classList.contains('dwc-slide-nav-open')) {
if (navTrigger) {
navTrigger.click()
navTrigger.focus()
}
goHome();
} else {
goHome();
}
}
}
});
// for Bricks
const offCanvasBackdrop = document.querySelector('.brx-offcanvas-backdrop');
isBricks = body.classList.contains('bricks-is-frontend')
if (isBricks) {
if (offCanvasBackdrop) {
offCanvasBackdrop.addEventListener('click', event => {
if (body.classList.contains('dwc-slide-nav-open')) {
navTrigger.click()
goHome();
if (navTrigger) {
navTrigger.focus()
}
} else {
goHome();
}
});
}
}
// bricks end
select('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)').forEach(sbtn => {
sbtn.setAttribute('aria-expanded', 'false');
sbtn.addEventListener('click', function (e) {
initCollapseContent();
dropdownToggles.forEach((togglebtn) => {
togglebtn.setAttribute('aria-expanded', 'false');
});
e.preventDefault();
e.stopPropagation();
const targetId = this.getAttribute('data-title');
const targetElement = document.querySelector(`.dwc-sidebar__nav__panel[data-title="${targetId}"]`);
const parentPanel = this.closest('.dwc-sidebar__nav__panel');
targetElement.classList.remove('dwc-slide-right');
targetElement.inert = false;
targetElement.setAttribute('tabindex', 0);
targetElement.focus();
ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
sbtn.setAttribute('aria-expanded', ariaExpanded);
select('.dwc-nav__back-btn').forEach(bbtn => {
bbtn.addEventListener('click', function (e) {
ariaExpanded = !targetElement.classList.contains('dwc-slide-right');
sbtn.setAttribute('aria-expanded', ariaExpanded);
})
})
if (!parentPanel.classList.contains('dwc-slide-right')) {
parentPanel.classList.add('dwc-slide-left');
parentPanel.inert = true;
}
//handle back button data-title and back to feature
let bbtn = targetElement.querySelector('.dwc-nav__back-btn');
bbtnTitle = parentPanel.getAttribute('data-title');
bbtn.setAttribute('data-title', bbtnTitle);
bbtn.setAttribute('aria-label', 'Go back to ' + bbtnTitle + ' menu');
//console.log(bbtnTitle)
if (updateBackText) {
bbtn.querySelector('.dwc-nav__back__text').textContent = 'back to ' + bbtnTitle;
}
});
})
select('.dwc-nav__back-btn').forEach(bbtn => {
const btnTitle = bbtn.getAttribute('data-title');
bbtn.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
const returnBtnAttr = this.getAttribute('data-title');
select('[data-title].dwc-sidebar__nav__panel').forEach(returnTarget => {
if (returnTarget.getAttribute('data-title') === returnBtnAttr) {
returnTarget.classList.remove('dwc-slide-left');
returnTarget.inert = false;
if (returnTarget.classList.contains('dwc-sidebar__nav__panel--home')) {
if (header) {
header.setAttribute('tabindex', 0);
header.focus()
}
} else {
returnTarget.setAttribute('tabindex', 0);
returnTarget.focus();
}
if (returnTarget.classList.contains('dwc-slide-right')) {
returnTarget.classList.remove('dwc-slide-right');
}
}
});
const parentPanel = this.closest('.dwc-sidebar__nav__panel');
parentPanel.classList.add('dwc-slide-right');
parentPanel.inert = true;
});
});
select('.dwc-sidebar__nav__panel').forEach(panel => {
const panelTitle = panel.getAttribute('data-title');
panel.setAttribute('aria-label', panelTitle + ' menu');
});
// mobile trigger
function mobileMenuIsClosed() {
const offCanvasMobileOnly = offCanvasBreakpoint.matches;
if (mq.matches || enableOffCanvas) {
const isNavOpen = body.classList.contains("dwc-slide-nav-open");
navTrigger.setAttribute("aria-expanded", isNavOpen);
// console.log(isNavOpen);
if (isNavOpen) {
if (!homePanel.classList.contains('dwc-slide-left')) {
homePanel.inert = false;
}
} else if (offCanvasMobileOnly && mq.matches) {
homePanel.inert = true; // Direct assignment for closed state
} else {
homePanel.inert = false;
}
} else {
homePanel.inert = false;
}
}
function setNoScroll() {
let noScrollTimeout;
let clickCount = 1;
let isNavOpen = body.classList.contains('dwc-slide-nav-open');
// Check if 'dwc-slide-nav-open' class is applied
if (isNavOpen) {
body.classList.add('dwc-no-scroll');
clickCount++;
} else {
clickCount = 0;
}
//console.log(clickCount)
// Toggle 'dwc-no-scroll' class on the body if clickCount is odd
if (clickCount == 0) {
// Set a timer to remove 'dwc-no-scroll' class after 0.8 seconds
noScrollTimeout = setTimeout(() => {
isNavOpen = body.classList.contains('dwc-slide-nav-open');
// console.log(isNavOpen)
if (!isNavOpen) {
body.classList.remove('dwc-no-scroll');
}
}, 900);
} else {
// If 'dwc-no-scroll' class is removed by clicking again, clear the timeout
clearTimeout(noScrollTimeout);
}
}
if (navTrigger) {
navTrigger.addEventListener("click", function () {
body.classList.toggle("dwc-slide-nav-open");
setNoScroll()
mobileMenuIsClosed()
if (!hasCurrentMenu && !autoCurrentPosition) {
initCollapseContent()
goHome();// watch out for this, could be problematic
}
dropdownToggles.forEach((togglebtn) => {
// togglebtn.setAttribute('aria-expanded', 'false');
});
});
}
if (mobileMenuOverlay) {
mobileMenuOverlay.addEventListener("click", function () {
body.classList.remove("dwc-slide-nav-open");
mobileMenuIsClosed()
setNoScroll()
if (!hasCurrentMenu && !autoCurrentPosition) {
initCollapseContent()
goHome()
}
});
}
if (closeBtn) {
closeBtn.addEventListener("click", function () {
body.classList.remove("dwc-slide-nav-open");
mobileMenuIsClosed()
setNoScroll()
navTrigger.focus();
if (!hasCurrentMenu && !autoCurrentPosition) {
initCollapseContent()
goHome()
}
});
}
//focus on mobile trigger when menu loses focus
mobileMenuOverlay.addEventListener('focusin', (event) => {
if (event.relatedTarget !== navTrigger) {
navTrigger.focus();
}
});
function updateSidebarPadding() {
if (!enableOffCanvas) {
// const headerHeight = header.clientHeight + 20;
setTimeout(() => {
const headerHeight = document.querySelector('.dwc-header-inner-wrap').clientHeight + 20;
// Your code to use headerHeight goes here
sidebarNavPanels.forEach(function (sidebarNavPanel) {
sidebarNavPanel.style.paddingTop = headerHeight + "px";
});
mobileMenuOverlay.style.marginTop = headerHeight - 20 + "px";
}, 50);
}
}
function resetPadding() {
setTimeout(() => {
sidebarNavPanels.forEach(function (sidebarNavPanel) {
sidebarNavPanel.style.paddingTop = null;
mobileMenuOverlay.style.marginTop = null;
});
}, 50);
}
function checkScreenSize() {
if (mq.matches) {
body.classList.add('dwc-mobile');
updateSidebarPadding();
//updateTopPadding()
} else {
body.classList.remove('dwc-mobile');
resetPadding();
// resetTopPadding()
}
}
// updateTopPadding()
if (calcHeaderHeight) {
checkScreenSize();
window.addEventListener("resize", function () {
resetTopPadding(); // Reset the top padding on resize
updateTopPadding()
checkScreenSize();
mobileMenuIsClosed();
});
}
initInert()
// ********* DROPDOWN TOGGLE FUNCNTIONALITY *******************
function eCollapseContent(el, btn) {
// Find the closest common ancestor, such as the <li> element
const btnParentLi = btn.closest('li');
dropdownContents.forEach((content) => {
// Find the closest <li> ancestor for the dropdown content
const contentParentLi = content.closest('li');
// Check if the content and the button are at the same level
const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;
// Check if the content is an ancestor of the dropdown toggle being clicked
const isAncestor = btn && content.contains(btn);
// Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
if (!isAncestor && isSameLevel) {
content.style.maxHeight = '0';
content.setAttribute('inert', 'true');
// Update the aria-expanded attribute of the corresponding toggle button
const correspondingToggle = content.previousElementSibling.querySelector('button');
if (correspondingToggle) {
correspondingToggle.setAttribute('aria-expanded', 'false');
}
}
});
}
function initCollapseContent(el, btn) {
dropdownContents.forEach((content) => {
content.style.maxHeight = '0';
content.setAttribute('inert', 'true');
});
dropdownToggles.forEach((toggle) => {
toggle.setAttribute('aria-expanded', 'false');
});
}
function collapseContent(el, btn) {
// Find the closest common ancestor, such as the <li> element
const btnParentLi = btn.closest('li');
dropdownContents.forEach((content) => {
// Find the closest <li> ancestor for the dropdown content
const contentParentLi = content.closest('li');
// Check if the content and the button are at the same level
const isSameLevel = btnParentLi && contentParentLi && btnParentLi.parentElement === contentParentLi.parentElement;
// Check if the content is an ancestor of the dropdown toggle being clicked
const isAncestor = btn && content.contains(btn);
// Collapse the dropdown if it's not an ancestor of the toggle and is on the same level
if (!isAncestor && isSameLevel) {
content.style.maxHeight = '0';
content.setAttribute('inert', 'true');
}
});
}
// Toggle the ARIA attributes for dropdown buttons
function toggleAriaExpanded(activeToggle) {
// If activeToggle is null, reset all buttons to 'false'
if (activeToggle === null) {
dropdownToggles.forEach((toggle) => {
toggle.setAttribute('aria-expanded', 'false');
});
return; // Exit the function early since there's nothing else to do
}
dropdownToggles.forEach((toggle) => {
if (toggle === activeToggle) {
// Toggle the aria-expanded attribute for the clicked button
const isOpen = toggle.getAttribute('aria-expanded') === 'true';
toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
} else {
// Check if the toggle's parent is a sibling to the activeToggle's parent
const toggleParent = toggle.closest('li');
const activeToggleParent = activeToggle.closest('li');
// console.log('toggle parent', toggleParent)
// console.log('active toggle parent', activeToggleParent)
if (toggleParent && activeToggleParent && toggleParent.parentElement === activeToggleParent.parentElement) {
// Set all other buttons' aria-expanded to false if their parent is a sibling to the activeToggle's parent
toggle.setAttribute('aria-expanded', 'false');
}
}
});
}
// Function to adjust the max-height of parent dropdowns when a nested dropdown is opened
function adjustDropdownHeight(dropdownContent) {
// Start with the nearest ancestor that is a dropdown content
let parent = dropdownContent.closest('.dwc-sidebar__dropdown-content');
while (parent) {
// Calculate the cumulative height of all open children
let totalHeight = Array.from(parent.children).reduce((total, child) => {
// Add the child scrollHeight to the total if it's open
total += child.scrollHeight;
return total;
}, 0);
// Move to the next ancestor that is a dropdown content
parent = parent.parentElement.closest('.dwc-sidebar__dropdown-content');
if (parent) {
parentHeight = parent.scrollHeight;
// Set the parent's max-height to the total calculated height
parent.style.maxHeight = `${totalHeight + parentHeight}px`;
// console.log('child: ', dropdownContent)
// console.log('parent: ', parent)
// console.log(`${totalHeight}px`)
parent.inert = false;
// console.log('parent new: ', parent)
const parentParent = parent.closest('li')
const toggle = parentParent.querySelector('.dwc-sidebar__dropdown-toggle button')
toggle.setAttribute('aria-expanded', 'true');
}
}
}
// Initialize dropdowns
function initializeDropdowns() {
if(dropdownToggles){
initCollapseContent();
dropdownToggles.forEach((toggle, index) => {
toggle.setAttribute('aria-expanded', 'false');
const dropdownContent = dropdownContents[index];
const parentDropdown = toggle.closest('.dwc-sidebar__dropdown');
const dropdownLink = parentDropdown.querySelector('.dwc-nav__link__text');
if(dropdownLink){
toggle.setAttribute('aria-label', `Toggle ${dropdownLink.textContent} dropdown`);
}
toggle.addEventListener('click', function () {
const isOpen = dropdownContent.style.maxHeight !== '0px';
collapseContent(dropdownContent, this);
if (!isOpen) {
dropdownContent.inert = false;
}
toggleAriaExpanded(this);
if (parentDropdown.contains(this)) {
dropdownContent.style.maxHeight = isOpen ? '0' : `${dropdownContent.scrollHeight}px`;
// Only adjust if opening the dropdown
if (!isOpen) {
adjustDropdownHeight(dropdownContent);
//console.log('other child', dropdownContent)
}
}
});
toggle.addEventListener('keydown', (event) => {
closeDropdownOnEscape(event, toggle);
});
});
}
}
// Close dropdowns on Escape key press
function closeDropdownOnEscape(event, el) {
if (event.key === 'Escape' && el.contains(event.target)) {
event.stopPropagation();
if (el.style.maxHeight !== '0px') {
const button = el.previousElementSibling.querySelector('button');
if (button) {
el.style.maxHeight = '0';
el.inert = true;
button.focus();
} else {
initCollapseContent();
el.focus();
}
toggleAriaExpanded(null); // Reset all buttons to 'false'
}
}
}
// Initialize dropdowns
initializeDropdowns();
dropdownContents.forEach((dropdownContent) => {
// Add event listeners for closing dropdowns on Escape key press
dropdownContent.addEventListener('keydown', (event) => {
closeDropdownOnEscape(event, dropdownContent);
});
// close dropdown on focus lost
if (autoCloseDropdown) {
const links = dropdownContent.querySelectorAll('a.dwc-nav__link__text');
links.forEach(link => {
const linkParent = link.closest('.dwc-sidebar__dropdown-content');
const dropDownButton = linkParent.previousElementSibling.querySelector('button')
link.addEventListener('blur', () => {
setTimeout(function () {
if ([...links].every(link => !document.activeElement.isSameNode(link))) {
eCollapseContent(dropdownContent, dropDownButton)
}
}, 50);
});
});
}
});
// AUTOMATIC MENU POSITION
function autoMenuPosition() {
if (enableCollapsibleSidebar && (collapseOnPageLoad || savedState === 'true')) { return }
// Select the current menu item
const currentMenuItem = document.querySelector('.dwc-current-menu-item');
// Select the parent panel of the current menu item
if (currentMenuItem) {
const parentPanel = currentMenuItem.closest('.dwc-sidebar__nav__panel');
const parentIsHome = parentPanel.classList.contains('dwc-sidebar__nav__panel--home')
// Check if the parent panel has the 'dwc-sidebar__nav__panel--home' class
if (!parentIsHome) {
// Select the back button in the current menu's parent panel
const backButton = parentPanel.querySelector('.dwc-nav__back-btn');
// Remove the class 'dwc-slide-right' from the current menu's parent panel
parentPanel.classList.remove('dwc-slide-right');
// Get the data-title attribute of the current menu's parent panel
// Loop through all panels with class .dwc-sidebar__nav__panel
const allPanels = document.querySelectorAll('.dwc-sidebar__nav__panel');
// Select all slide buttons .dwc-sidebar__nav__btn of each panel
const slideButtons = document.querySelectorAll('.dwc-sidebar__nav__btn:not(.dwc-nav__back-btn)');
slideButtons.forEach((slideButton) => {
allPanels.forEach((panel) => {
// Get the data-title attribute of the panel
const eachPanelTitle = panel.getAttribute('data-title');
// Get the back button in each of the panels
const panelBackButton = panel.querySelector('.dwc-nav__back-btn');
const slideTitle = slideButton.getAttribute('data-title')
if (slideTitle === eachPanelTitle) {
//get slide button parent
const slideParentPanel = slideButton.closest('.dwc-sidebar__nav__panel');
//get slide parent titlte attribute
const slideParentTitle = slideParentPanel.getAttribute('data-title')
// Set the back button data-title attribute to be equal to the data-title attribute of the slide parent panel
panelBackButton.setAttribute('data-title', slideParentTitle);
if(updateBackText){
panelBackButton.querySelector('.dwc-nav__back__text').textContent = 'back to ' + slideParentTitle
}
}
});
});
homePanel.classList.add('dwc-slide-left');
}
if (!parentIsHome) {
parentPanel.inert = false;
homePanel.inert = true;
}
repositionReturnTargets()
}
}
if (autoCurrentPosition) {
setTimeout(function () {
autoMenuPosition()
}, 1000);
}
//function to reposition the hidden slides after automatically moving to current menu item panel
// to put them in the right position to slide back to
function repositionReturnTargets() {
const panels = document.querySelectorAll('.dwc-sidebar__nav__panel:not(.dwc-sidebar__nav__panel--home)');
let activePanel;
// Find the first panel without 'dwc-slide-right' and 'dwc-slide-left' classes
for (const panel of panels) {
if (!panel.classList.contains('dwc-slide-right') && !panel.classList.contains('dwc-slide-left')) {
activePanel = panel;
break;
}
}
let returnTarget;
while (activePanel) {
// Get the data-title attribute of each panel
const panelTitles = Array.from(panels).map(panel => panel.getAttribute('data-title'));
// Select the active back button in the active panel
const activeBackButton = activePanel.querySelector('.dwc-nav__back-btn');
// Find the returnTarget panel
returnTarget = Array.from(panels).find(panel => panel.getAttribute('data-title') === activeBackButton.getAttribute('data-title'));
// Remove and add classes to the returnTarget
if (returnTarget) {
returnTarget.classList.remove('dwc-slide-right');
returnTarget.classList.add('dwc-slide-left');
}
// Update activePanel for the next iteration
activePanel = returnTarget;
}
}
// *********AUTOMATIC ENDS************
// **************OFFCANVAS *****************
document.addEventListener('DOMContentLoaded', () => {
if (offCanvasPushContent) {
// Create a new div element with the class "site-wrapper"
var siteWrapper = document.createElement('div');
siteWrapper.className = 'dwc-site-wrapper';
// Move everything within the body tag into the "site-wrapper" div
while (document.body.firstChild) {
siteWrapper.appendChild(document.body.firstChild);
}
// Add the "site-wrapper" div back to the body
document.body.appendChild(siteWrapper);
}
})
function offCanvasInit() {
if (enableOffCanvas && offCanvasBreakpoint.matches) {
document.body.classList.add('dwc-offcanvas');
// console.log('offcanvas - 2')
if (offCanvasPushContent) {
document.body.classList.add('dwc-push-content');
if (fixedNavTrigger && !mq.matches) {
document.body.classList.add('dwc-nav-trigger-is-fixed');
} else {
document.body.classList.remove('dwc-nav-trigger-is-fixed');
}
}
// Function to check if header element is focusable
function isFocusable(element) {
const focusableTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'AREA'];
return (
focusableTags.includes(element.tagName) ||
element.hasAttribute('tabindex') ||
element.hasAttribute('contenteditable')
);
}
// Function to set inert attribute for focusable elements
function setInertForFocusableElements(inertValue) {
const allElements = document.querySelectorAll('.dwc-header-inner-wrap *');
const focusableElements = Array.from(allElements).filter(element => {
return isFocusable(element) && !element.classList.contains('dwc-nav-trigger');
});
focusableElements.forEach(element => {
if (element) {
element.inert = inertValue;
}
});
}
// Click event listener for the 'nav-trigger'
header.addEventListener('click', function () {
const isNavOpen = document.body.classList.contains('dwc-slide-nav-open');
// Check if the body contains the class 'dwc-slide-nav-open'
if (isNavOpen) {
// Condition is true, set inert=true
setInertForFocusableElements(isNavOpen);
} else {
// Condition is false, set inert=false
setInertForFocusableElements(isNavOpen);
}
});
} else {
document.body.classList.remove('dwc-push-content');
document.body.classList.remove('dwc-offcanvas');
}
}
offCanvasInit()
window.addEventListener("resize", offCanvasInit);
//close offcanvas when haslink is clicked
if (enableOffCanvas) {
const sidebarLinks = document.querySelectorAll('a.dwc-sidebar__nav__link');
// Filter links with hash in the href attribute
const hashLinks = Array.from(sidebarLinks).filter(link => link.getAttribute('href').includes('#'));
// Add click event listener to each hash link
hashLinks.forEach(link => {
link.addEventListener('click', function (event) {
// event.preventDefault(); // Prevent the default behavior of the link (e.g., navigating to the hash)
// Perform a click action on the navTrigger button
if (navTrigger) {
navTrigger.click();
}
});
});
}
// headroom:
// headroom:
function initializeHeadroom() {
if (enableHeadroom && (enableOffCanvas || enableTopBar)) {
if (offCanvasPushContent) return; // Early exit if offCanvasPushContent is true
document.body.classList.add('dwc-headroom');
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;
// Check for scroll action
window.addEventListener('scroll', () => {
// Hide and reveal header
const currentScroll = window.pageYOffset;
if (currentScroll <= 200) {
document.body.classList.remove(scrollUp);
return;
}
if (currentScroll > lastScroll && !document.body.classList.contains(scrollDown)) {
// Down
document.body.classList.remove(scrollUp);
document.body.classList.add(scrollDown);
} else if (currentScroll < lastScroll && document.body.classList.contains(scrollDown)) {
// Up
document.body.classList.remove(scrollDown);
document.body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
}
}
// Call the function to initialize headroom functionality
initializeHeadroom();
// End scroll action
//top Padding on first containers
function updateTopPadding() {
// Run the function if offCanvas is enabled or both topBar and headroom are enabled
if (!enableOffCanvas && !(enableTopBar && enableHeadroom)) {
return; // Exit early if neither condition is met
}
// Check if the media query strings for mq and offCanvasBreakpoint are the same
if (mq.media === offCanvasBreakpoint.media) {
// If the breakpoints are the same, run the function only if we're within the breakpoint
if (mq.matches) {
// Ensure the feature should run based on the configuration flags
if (calcTopPadding && (enableHeadroom || enableTopBar)) {
// Check if the sidebar exists
if (sidebar) {
const header = document.querySelector('.dwc-header-inner-wrap');
if (header) {
const offsetPadding = header.clientHeight;
// Update padding for each sidebar panel
sidebarNavPanels.forEach(function (sidebarNavPanel) {
sidebarNavPanel.style.paddingTop = offsetPadding + "px";
});
// Adjust the top padding for the first child of the main container
const mainFirstChild = document.querySelector('main')?.firstElementChild;
if (mainFirstChild) {
const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
if(!offCanvasPushContent){
mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px';
}
}
} else {
console.warn('.dwc-header-inner-wrap not found.');
}
} else {
console.warn('Sidebar not found.');
}
}
}
} else {
// If the breakpoints are different, run the function as originally intended
if (calcTopPadding && (enableHeadroom || enableTopBar)) {
// Check if the sidebar exists
if (sidebar) {
const header = document.querySelector('.dwc-header-inner-wrap');
if (header) {
const offsetPadding = header.clientHeight;
// Update padding for each sidebar panel
sidebarNavPanels.forEach(function (sidebarNavPanel) {
sidebarNavPanel.style.paddingTop = offsetPadding + "px";
});
// Adjust the top padding for the first child of the main container
const mainFirstChild = document.querySelector('main')?.firstElementChild;
if (mainFirstChild) {
const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom) || 0;
if(!offCanvasPushContent){
mainFirstChild.style.paddingTop = (offsetPadding + initialPadding) + 'px';
}
}
} else {
console.warn('.dwc-header-inner-wrap not found.');
}
} else {
console.warn('Sidebar not found.');
}
}
}
}
function resetTopPadding() {
if (calcTopPadding && enableHeadroom) {
sidebarNavPanels.forEach(function (sidebarNavPanel) {
sidebarNavPanel.style.paddingTop = null;
});
const mainFirstChild = document.querySelector('main').firstElementChild;
if (mainFirstChild) {
mainFirstChild.style.paddingTop = null;
// Reset the paddingTop using the stored initialPadding
const initialPadding = parseInt(window.getComputedStyle(mainFirstChild).paddingBottom);
mainFirstChild.style.paddingTop = null;
}
}
}
//---top padding end
// Disable / Enable collapse on screen size change
let removedByMQ = false; // Track if the class was removed by the media query
function updateCollapseStatus() {
const currentlyCollapsed = document.body.classList.contains('dwc-collapse-sidebar'); // Check the current state
if (mq.matches) {
// If media query matches (max-width: 1024px), remove the class
if (currentlyCollapsed) {
document.body.classList.remove('dwc-collapse-sidebar');
removedByMQ = true; // Remember that MQ logic removed the class
saveCollapseStatus(); // Save the updated state after toggling
}
} else {
// If media query doesn't match, only add back if it was removed by this MQ logic
if (removedByMQ) {
document.body.classList.add('dwc-collapse-sidebar');
removedByMQ = false; // Reset the flag after re-adding
saveCollapseStatus(); // Save the updated state after toggling
}
}
}
//Document loaded end
//});
// --- ADD HEADER HEIGHT VARIABLE TO BODY ----
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
// Your existing code for adding the 'hasHeaderHeight' class
function addHeaderHeightClass() {
if (!document.body) {
// Body doesn't exist, keep checking
setTimeout(addHeaderHeightClass, 0);
return;
}
let hasHeaderHeight = document.body.classList.contains('hasHeaderHeight');
let header = document.querySelector('header');
if (!hasHeaderHeight && header) {
// Header exists, add the 'hasHeaderHeight' class
document.body.classList.add('hasHeaderHeight');
// Get the initial header height
updateHeaderHeight();
} else if (!hasHeaderHeight && !header) {
// Header doesn't exist, keep checking
setTimeout(addHeaderHeightClass, 0);
}
}
// Function to update header height and set the CSS variable
function updateHeaderHeight() {
let sidebar = document.querySelector('.dwc-header-inner-wrap');
if (document.body) {
let headerHeight = sidebar.offsetHeight;
document.body.style.setProperty('--dwc-header-height', `${headerHeight}px`);
}
}
// Add the 'hasHeaderHeight' class and set initial header height
addHeaderHeightClass();
// Attach the debounced update function to the window resize event
function onResize() {
updateHeaderHeight();
updateCollapseStatus();
// Add more functions here
}
window.addEventListener('resize', debounce(onResize, 50));
document.addEventListener('DOMContentLoaded', () => {
updateHeaderHeight();
updateTopPadding()
})
// -------HEADER HEIGHT ENDS -------------
// Smooth scroll to hashlink with an offset
function smoothScroll(target, offset) {
const targetElement = document.querySelector(target);
if (targetElement) {
const targetPosition = targetElement.getBoundingClientRect().top -
document.body.getBoundingClientRect().top -
offset;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
}
}
// Listen for hash link clicks
if (offsetHashLinkScroll) {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
var headerElement = document.querySelector('.dwc-header-inner-wrap');
var offset = headerElement.offsetHeight;
e.preventDefault();
event.stopPropagation();
const href = this.getAttribute('href');
smoothScroll(href, offset);
});
});
}