Untitled

<div class="alert-bar ${properties.color}" role="alert" aria-live="assertive">
    <div class="alert-bar-wrapper">
        <img class="icon" src="${properties.selectedIcon}" alt="${properties.alertTitle}" aria-hidden="true" />
        <div class="alert-title">
            ${properties.alertTitle @context='html'}
        </div>
        <button class="close-button" aria-label="Close alert">✖</button>
    </div>
</div>





document.addEventListener('DOMContentLoaded', () => {
    const setCookie = (name, value) => {
      document.cookie = `${name}=${value}; path=/`;
    };

    const getCookie = (name) => {
      const cookies = document.cookie.split(';');
      for (const cookie of cookies) {
        const [cookieName, cookieValue] = cookie.split('=');
        if (cookieName.trim() === name) {
          return cookieValue;
        }
      }
      return '';
    };
  
    const alertBar = document.querySelector('.alert-bar');
    const closeButton = document.querySelector('.close-button');
    const pageAlert = document.querySelector('.alert');
  
    const isAlertBarHidden = getCookie('alertBarHidden');
    const shouldHideAlertBar = pageAlert || (isAlertBarHidden === 'true');
  
    if (shouldHideAlertBar) {
      alertBar.style.display = 'none';
      document.body.style.paddingTop = '0';
    } else {
      document.body.style.paddingTop = `${alertBar.clientHeight}px`;
  
      closeButton.addEventListener('click', () => {
        hideAlertBar();
      });
  
      closeButton.addEventListener('keydown', (event) => {
        if (event.key === 'Enter' || event.key === 'Space') {
          event.preventDefault();
          hideAlertBar();
        }
      });
  
      closeButton.focus();
    }
  
    const hideAlertBar = () => {
      alertBar.style.display = 'none';
      setCookie('alertBarHidden', 'true');
      document.body.style.paddingTop = '0';
    };
  });