: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);
});
});
}
In de psychotherapie met individuen, relaties en systemen vanuit een narratief behandelkader
De School voor systemische opleidingen van Jan Olthof organiseert jaarlijks samen met psycholoog en hypnotherapeut Drs. Ton Wilken de geïntegreerde basis- en vervolgopleiding Hypnotisch taalgebruik & trancegerichte strategieën in de psychotherapie met individuen, relaties en systemen vanuit een narratief behandelkader.
Wie je begeleidt
Onze docenten zijn ervaren systeemtherapeuten en praktijkdocenten die theorie en praktijk naadloos verbinden. Zij zorgen voor een veilige, inspirerende leeromgeving en dagen je uit om te groeien – professioneel én persoonlijk.
Hoofddocent
Drs. Ton Wilken heeft sinds 1981 een vrijgevestigde praktijk als GZ-psycholoog en is als psychotherapeut 28 jaar werkzaam geweest op de afdeling Gezinspsychiatrie van Yulius te Barendrecht. Hij is tevens actief als opleider bij de Nvvh en VHYP (de Nederlandse en Belgische hypnoseverenigingen), eerder ook jarenlang in het Post-Academisch Onderwijs.
HOOFDDOCENT
Drs. J. Olthof is psychotherapeut, supervisor en leertherapeut bij de NVRG. Hij is oprichter van de School voor systemische opleidingen te Bunde en als psychotherapeut zelfstandig gevestigd in psychotherapiepraktijk "Het verbindend patroon" te Bunde. Hij was gedurende ruim 30 jaar als consulent behandeling verbonden aan de afdeling Gezinspsychiatrie van Yulius in Barendrecht.
De doelgroep voor deze opleiding wordt gevormd door systeemtherapeuten, psychotherapeuten en psychiaters die zich verbonden voelen met de narratieve benadering en hun schat aan ervaring willen verrijken met de mogelijkheden van hypnotisch taalgebruik en trancegerichte strategieën.
Wij hebben het landschap verkend, de meest boeiende locaties en trajecten in onze reisroute opgenomen, evenals enkele noodzakelijke verbindingswegen en diverse open plekken voor nadere invulling.
Drie invalshoeken staan centraal in deze komende opleiding. Hoe hypnotisch taalgebruik & trancegerichte strategieën te verbinden met de systeemtherapie is een eerste terrein waarop de opleiding zich zal richten: hoe de combinatie van deze gebieden een mooi dubbel focus oplevert, waardoor het reliëf in het systemisch / systeemtherapeutisch werk meer diepgang kan krijgen.
Het tweede terrein wordt gevormd door de principes en technieken zoals die in de wereld van de hypnose zijn ontwikkeld en worden gebruikt. Als zodanig wil de opleiding hierin ook de basiskennis verschaffen om vanuit deze methodiek te kunnen werken. (En voldoet de opleiding daarmee aan de kwalificaties van een Basisopleiding Klinische Hypnose, zoals oa bij de Nederlandse en Belgische hypnoseverenigingen wordt gegeven.)
Ten derde krijgt ook het psychiatrisch werkveld zijn plek als terrein waarbinnen de opleiding de mogelijkheden hiervan wil onderzoeken. Dit doet het door aandacht te besteden aan het gebruik van hypnose in een medische setting, bij pijnbehandeling en ziekten, en aan interventies op het lichamelijke niveau en bij enkele specifieke psychiatrische diagnostische classificaties.
Het alomvattende kader voor dit alles is de narratieve benadering, als een paraplu (of parasol, afhankelijk van Franse regen of zonneschijn) die deze spaken verenigt en verbindt. Elementen die vanuit deze benadering als basaal en essentieel gelden, zullen via alle drie de invalshoeken aan bod komen. Voor ons zijn dit alle aspecten die met taal te maken hebben, en flexibiliteit in het hanteren van de veelvormigheid van directe en indirecte suggesties in het bijzonder.
Tevens nemen ‘ontdekkende technieken’ een belangrijke plek in, om klachten te kunnen verbinden met de persoonlijke geschiedenis van de cliënt en ook langs deze weg een geïndividualiseerde behandelstrategie te kunnen ontwikkelen.
Tenslotte zullen ook trauma en dissociatie (en bijgevolg traumabehandeling) prominent aanwezig zijn in het programma, mede doordat onderzoek steeds sterker het traumagerelateerde karakter van veel klachten heeft onderstreept.
Wij vertrouwen, samen met jullie, op een inspirerend opleidingstraject!
Heldere structuur, diepgaand leren
Tijdens deze meerdaagse opleiding staan acht dagen intensieve training centraal. Je leert hypnotisch taalgebruik en trancegerichte strategieën integreren in je systemische en narratieve werk.
Ochtend:
Referentiekader voor de gehele opleiding / Creatieve Imaginatie Schaal: een ervaringsoefening met de hele groep / Misverstanden rond trance & hypnose & hoe hierop te reageren / ‘Being hypnotic’ ipv ‘doing hypnosis’
Middag:
De structuur van een trance-inductie proces / 1e inductie: Handlevitatie – introductie, demonstratie, oefenen in drietallen, nabespreking in grote groep / Demo-dvd: Danie Beaulieu “Impact therapy” (2007) / Herkenning van ‘probleem-trance’ bij binnenkomst van cliënten / Huiswerk
Ochtend:
Residues van dag 1 / Bespreking literatuur / Erickson’s “early learning set induction”: ervaringsoefening met hele groep / Video Erickson (1975): “Therapy session with Monde” / Leerpunten hieruit / Open ruimte
Middag:
Verdiepingstechnieken / Veilige plek & container & spirit guide & dvd Malmö / 2e inductie: Oogfixatie – introductie, demonstratie, oefenen in tweetallen, nabespreking in grote groep / Ontdekkende technieken 1a: ideomotorische signalen voor screening bij psychosomatiek, OLK, trauma, dissociatie, en nivo van relaties – de ‘7 sleutels van LeCron’ (+ 1) – introductie, demonstratie, oefenen in tweetallen, nabespreking in grote groep / Huiswerk, theorie & praktijk
Ochtend:
Bespreken praktisch huiswerk / Relaxatie-oefeningen: welke gebruiken jullie zelf al? En in systeemtherapie? / Relaxatie als inductie / Variaties in vormen van directe en indirecte suggesties / Inductie in de vraagvorm: oefenen & nabespreking
Middag:
‘Gebalde vuist’-techniek / Overgangen van conversatie naar trance I / Post-hypnotische suggesties / Scripts voor specifieke aspecten van stress bij PTSS
Ochtend:
Zelfhypnose, uitgangspunten & oefeninstructies / Ego-versterking, groepsoefening met 5-staps model Stanton / ‘Time-line work’ met check op nivo van hoofd, hart en buik (Dilts) / Leeftijdsregressie & -progressie
Middag:
De combinatie van hypnose & systeemtherapie: 6 modellen / dvd-demo Loriedo / Ego-versterking: hypnose icm ego-states & EMDR / Open ruimte / Huiswerk, theorie & praktijk
Ochtend:
Metaforen & de metaforische ruimte / Cliënt-geïnitieerde metaforen (metaforische kernuitspraken) / Therapeut-geconstrueerde metaforen, in variaties
Middag:
Meervoudig ingebedde metaforen / Overgangen van conversatie naar trance II / Amnesie / Hypnotische interventies in de behandeling van depressie, rumineren en insomnia
Ochtend:
Ontdekkend werken met ego-states, delen vd persoon bij de behandeling betrekken / het ‘self – relations’ – model van Gilligan, incl. dvd-demo
Middag:
Hypnose in traumaverwerking: ideomotorische signalen 2 / De combi met EMDR: het ‘Strategic Developmental Model’ van Kitchur / Open ruimte
Ochtend:
Bespreken oefen- & werkervaringen / Het lichaamsnivo in de behandeling betrekken: werken met de affectbrug, somatische brug en ‘float back’-techniek / Ontdekkend werken via het lichaam
Middag:
Hypnotische interventies voor pijnvermindering / analgesie + anesthesie, incl. video van keizersnede onder hypnose / Symptoomgerichte interventies in het algemeen, o.a model van Edelstien (‘symptom analysis’) en Erickson (1954, 1958).
Ochtend:
Geboorteverhalen en perinatale ervaringen, hypnotische interventies bij verbroken hechting / (Intergenerationele) ziekten en het medisch gebruik van hypnose
Middag:
Open ruimte / Terugblik met elkaar
Wat je kunt verwachten
Aanmelding
Aanmelden voor Hypnotisch taalgebruik & trancegerichte strategieën kan door contactgegevens in het onderstaande formulier achter te laten.
Wilt u graag meer informatie? Stuur ons dan een e-mail naar:
Wilt u meer inhoudelijke informatie over de opleidingen? Neem dan telefonisch contact op met Mariëlle Gelissen
NL93 ABNA 0438168062
School voor Systemische Opleidingen
KvK: 14116165
School voor Systemische Opleidingen