--- import hamburger from 'iconoir/icons/menu.svg' const hamburger_src_url = `url("${hamburger.src}")` --- <div class="dropdown"> <input type="checkbox" id="dropdown" /> <ul class="dropdown-content"> <slot /> </ul> <label for="dropdown" class="dropdown-btn" aria-label="Menu Toggle"> <div class="hamburger-menu" role="navigation"></div> </label> </div> <style define:vars={{ hamburger_src_url }}> input[type="checkbox"] { opacity: 0; position: absolute; } input[type="checkbox"]:checked ~ .dropdown-content { display: flex; height: auto; } .dropdown-content { display: none; flex-wrap: wrap; flex-direction: column; align-items: center; justify-content: center; background-color: var(--c-primary-background); width: 100%; height: 0px; list-style-type: none; line-height: 3em; margin: 0.5rem 0px 0px; padding: 0; } .dropdown-btn { height: 64px; display:flex; align-items: center; justify-content: center; } .dropdown { display: flex; justify-content: flex-end; background-color: var(--c-primary-background); border: 0px; width: 100%; } .hamburger-menu { mask: var(--hamburger_src_url) no-repeat center; mask-size: cover; background-color: var(--c-primary-text); width: 2.25rem; height: 2.25rem; margin-right: 10px; } @media (min-width: 1140px) { .dropdown { display: none; } } </style>