תפריט מובייל

שלושה דברים שתפריט מובייל כמעט תמיד שוכח: הרקע ממשיך להיגלל מתחת לתפריט, Esc לא סוגר, והמיקוד נופל לתחילת העמוד אחרי סגירה. שלושתם מטופלים כאן, והמגירה נפתחת מצד תחילת השורה — בעברית מימין. תפריט מובייל הוא רכיב מתוך רכיבים של כליקס. מה שמורידים הוא רכיב שלם, גם כ-HTML עצמאי וגם כרכיב React. אין ספרייה חיצונית, אין שלב בנייה, ואם כליקס ייעלם מחר הקוד ימשיך לעבוד.

רכיב · ניווט · מובייל · נגישות

<!-- תפריט מובייל — ערכו את הקישורים ברשימה -->
<style>
  .klix-nav-open, .klix-nav-close { display: grid; place-items: center; width: 2.75rem;
    height: 2.75rem; padding: 0; border: 0; border-radius: .8rem; background: #1e293b;
    color: #e2e8f0; font-size: 1.25rem; cursor: pointer }
  .klix-nav-back { position: fixed; inset: 0; z-index: 50; background: rgba(2,6,23,.7);
    display: none }
  .klix-nav-back[data-open="1"] { display: block }
  .klix-nav-panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: 17rem;
    padding: 1.25rem; background: #0f172a; transform: translateX(-100%);
    transition: transform .25s ease }
  [dir="rtl"] .klix-nav-panel { transform: translateX(100%) }
  .klix-nav-back[data-open="1"] .klix-nav-panel { transform: none }
  .klix-nav-panel ul { margin: 1rem 0 0; padding: 0; list-style: none }
  .klix-nav-panel a { display: block; padding: .75rem; border-radius: .6rem;
    color: #e2e8f0; font-weight: 700; text-decoration: none }
  .klix-nav-panel a:hover { background: rgba(255,255,255,.06) }
  html[data-motion="off"] .klix-nav-panel { transition: none }
</style>

<button class="klix-nav-open" type="button" aria-label="פתיחת תפריט" aria-expanded="false">☰</button>

<div class="klix-nav-back" id="klix-nav">
  <nav class="klix-nav-panel" aria-label="תפריט ראשי">
    <button class="klix-nav-close" type="button" aria-label="סגירת תפריט">×</button>
    <ul>
      <li><a href="#services">שירותים</a></li>
      <li><a href="#about">עלינו</a></li>
      <li><a href="#faq">שאלות נפוצות</a></li>
      <li><a href="#contact">צרו קשר</a></li>
    </ul>
  </nav>
</div>

<script>
(function () {
  var back = document.getElementById('klix-nav');
  var opener = document.querySelector('.klix-nav-open');
  if (!back || !opener) return;

  function setOpen(on) {
    back.setAttribute('data-open', on ? '1' : '0');
    opener.setAttribute('aria-expanded', on ? 'true' : 'false');
    // נועלים את גלילת הרקע כל עוד התפריט פתוח
    document.body.style.overflow = on ? 'hidden' : '';
    if (!on) opener.focus();   // המיקוד חוזר לכפתור ולא נופל לתחילת העמוד
  }

  opener.addEventListener('click', function () { setOpen(true); });
  back.addEventListener('click', function (e) {
    if (e.target === back || e.target.closest('.klix-nav-close, .klix-nav-panel a')) setOpen(false);
  });
  window.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') setOpen(false);
  });
})();
</script>