Tomato Twine
$9.50
In stock
:root {
/* WIDTH AND SPACINGS */
--sidebar-width: min(90vw, 300px);
--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: var(--space-xs); /* 0.9 rem*/
--link-pad-x: 0.5rem;
/* panel top & bottom padding */
--panel-block-pad: clamp(0.5rem, -1.375rem + 5vh, 2rem);
/* GAPS */
--link-gap: var(--space-xs); /*2.2125rem*/
--list-gap: var(--space-xxs); /*none sets vertical gap on menu items*/
/* BACKGROUND COLORS */
--nav-bg: var(--bg-ultra-light);
--cta-bg: var(--action);
--link-bg: transparent;
--header-bg: var(--bg-ultra-light);
--dropdown-content-bg: var(--bg-light);
--dropdown-links-bg: transparent;
--skip-link-background: black;
/* HOVER BACKGROUND */
--cta-hover-bg: var(--action-light);
--link-hover-bg: none; /*rgb(0 0 0 / 5%)*/
--dropdown-links-hover-bg: rgb(0 0 0 / 8%);
/* TEXT COLORS */
--panel-title-color: var(--primary-dark);
--panel-link-color: var(--primary-dark);
--cta-color: white;
--dropdown-links-color: var(--primary-dark);
--label-color: orangered;
--skip-link-color: white;
--social-color: var(--primary-dark);
/* HOVER TEXT COLORS */
--cta-hover-color: white;
--link-hover-color: var(--action);
--dropdown-links-hover-color: var(--action);
--social-hover-color: var(--action);
/* ICON COLORS */
--panel-icon-color: var(--primary-dark);
--social-icon-color: var(--social-color);
--chevron-icon-color: var(--panel-icon-color);
--mobile-menu-trigger-color: var(--primary);
/* HOVER ICON COLORS */
--social-icon-hover-color: var(--social-hover-color);
--link-icon-hover-color: var(--action);
/* FONT SIZES */
--panel-title-size: var(--h3); /* org was 1.125rem*/
--panel-back-size: var(--text-xs); /* default 0.6 rem */
--link-txt-size: var(--text-m); /* org value 0.875 rem */
--nav-icon-size: var(--text-m); /* org value 1.2 rem*/
--social-icon-size: var(--nav-icon-size);
--chevron-size: var(--text-l); /* org value 1 rem */
/* CSS TRANSITIONS */
--sidebar-transition: 500ms;
--sidebar-ttf: cubic-bezier(1, 0, 0.25, 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 10px 20px -10px rgba(0, 0, 0, 0.2);
/* 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: none; /* underlines the active link */
/* 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-2-toggle-bg-active: var(--link-hover-bg);
--lvl-3-toggle-bg-active: var(--link-hover-bg);
/* Dropdown content background */
--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);
}
/* INSIDE BRICKS */
/* hide header/nav when not in main template */
[data-builder-mode].brx-header-left #brx-header:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-header:not(.postid-878 *) {
display: none;
}
/* site normal width when not in main template */
[data-builder-mode].brx-header-left #brx-content:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-content:not(.postid-878 *),
[data-builder-mode].brx-header-left #brx-footer:not(.postid-878 *),
[data-builder-mode].brx-header-right #brx-footer:not(.postid-878 *) {
margin: 0 !important;
}
// 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 = 1;
// 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 = 1; // Offcanvas/Mobile menu will overlap the top bar instead of displaying underneath
/* 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: 999;
}
.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 *) {
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;
}
@media (min-height:668px) {
.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);
}
.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 {
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 .dwc-nav__link__icon {
color: var(--lvl-1-icon-color);
}
/* 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 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 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']) *) {
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;
}
.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: none !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: white;
}
.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.7s both;
}
body:has(.dwc-offcanvas-header) {
animation: dwc-header-fade-in 0.25s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s 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';
}
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.addEventListener('DOMContentLoaded', () => {
document.body.classList.add('show-nav')
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 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
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 () {
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
console.log("??");
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');
});
}
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() {
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');
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() {
// 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);
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 *****************
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');
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:
if (enableHeadroom && (enableOffCanvas || enableTopBar)) {
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;
});
}
// 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;
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;
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
//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
const debouncedUpdateHeaderHeight = debounce(updateHeaderHeight, 50);
window.addEventListener('resize', debouncedUpdateHeaderHeight);
window.addEventListener('DOMContentLoaded', updateHeaderHeight);
// -------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);
});
});
}