Drawer from custom icon in header doesnt work

Store Design
, , , , ,

Topic summary

A user is attempting to add a custom drawer menu triggered by an icon in their Shopify store header (Dawn theme) but encountering functionality issues.

Implementation attempted:

  • Added custom icon link and drawer HTML structure to header.liquid
  • Created custom.js with click event listeners to open/close the drawer
  • Added CSS styling for drawer, content, and close button to base.css
  • Included script tag in theme.liquid

Current problem:
The drawer functionality is not working as intended. The user wants a slide-out rectangle effect that appears below the icon when clicked.

Technical note:
Much of the posted code appears corrupted or reversed (text displayed backwards), making it difficult to identify specific syntax errors or implementation issues. The core structure suggests a fixed-position overlay drawer with height transitions, but the malformed code prevents proper diagnosis of why the click events aren’t functioning.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hey, I added the code one by one:

Icon to header in header.liquid

<a href="#" id="drawerIcon" class="header__icon header__icon--custom link focus-inset">
<img src="{{ 'support_icon.png' | asset_url }}" alt="Support Icon" width="27">
</a>

<div id="myDrawer" class="drawer hidden">
<span class="close-drawer">×</span>
<div class="drawer-content">
<h2>Chromemaster</h2>
<!-- Dodaj inne treści, linki itp. tutaj -->
</div>
</div>

i made custom.js

document.addEventListener('DOMContentLoaded', function () {
var drawer = document.getElementById('myDrawer');
var drawerIcon = document.querySelector('.header__icon--custom');

if (!drawer || !drawerIcon) {
console.error('Nie znaleziono elementów.');
return;
}

drawerIcon.addEventListener('click', function () {
drawer.style.height = '100%';
});

var closeDrawerButton = drawer.querySelector('.close-drawer');
if (closeDrawerButton) {
closeDrawerButton.addEventListener('click', function () {
drawer.style.height = '0';
});
}
});

i put this in theme.liquid

{{ 'custom.js' | asset_url | script_tag }}

and base.css

.drawer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: black;
overflow: hidden;
transition: height 0.3s ease-in-out;
z-index: 999;
}

.drawer-content {
padding: 20px;
color: orange;
}

.close-drawer {
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
font-size: 18px;
color: orange;
}

And my drawer doesnt work. I wanna do someting like slide-out rectangle under the icon.

Dawn theme

https://5a8ab2.myshopify.com/#

123

my head is steaming