Homemade Pickle
Starting at $2.20
Only logged in customers who have purchased this product may leave a review.
: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);
});
});
}
Starting at $2.20
Only logged in customers who have purchased this product may leave a review.





Roger Amos (verified owner) –
Production is so low, we can’t get enough cucumbers to make pickles. Even with watering every 2-3 days with soaker lines and the whole patch covered in straw.
brenton (store manager) –
Thank you for your feedback. We understand how disappointing that can be. One of the best steps for improving future harvests is to take a soil sample and have it tested. A soil test gives a clear picture of nutrient levels and pH, so we can see whether fertility, mineral balance, or other soil factors might be limiting cucumber growth. With that information, we can adjust the soil to better support healthy plants and a more reliable yield.
Michael Green (verified owner) –
Dianne Hale (verified owner) –
Not sure if Ground hog got them.
Todd C. (verified owner) –
Penny M. (verified owner) –
Anonymous (verified owner) –
Elizabeth Rose (verified owner) –
Greg Grady (verified owner) –
antioch college bruce linebaugh (verified owner) –
Anonymous (verified owner) –
Terri H. (verified owner) –
Not planted yet in Zone 4b, but looking forward to this new purchase to do well in my raised bed.
Carol Brittain (verified owner) –
Wendy (verified owner) –
Waiting to see
Tim F. (verified owner) –
Melissa Carpenter (verified owner) –
Growing great
Ronnie Yoder (verified owner) –
Sherryl (verified owner) –
Kyra Pavek (verified owner) –
Amanda Korum (verified owner) –
Ronald Hodgson (verified owner) –
Jerel D. (verified owner) –
Rachael (verified owner) –