htmx/static/pico-1.5.11/docs/js/src/toggle-navigation.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/*
 * Toggle navigation
 *
 * Pico.css - https://picocss.com
 * Copyright 2019-2023 - Licensed under MIT
 */

export const toggleNavigation = {
  
  // Config
  _state: 'closed-on-mobile',
  toggleLink: document.getElementById('toggle-docs-navigation'),
  nav: document.querySelector('main > aside > nav'),

  // Init
  init() {
    this.onToggleClick()
  },

  onToggleClick() {
    this.toggleLink.addEventListener('click', event => {
      event.preventDefault();
      this.state == 'closed-on-mobile' 
        ? this.state = 'open' 
        : this.state = 'closed-on-mobile';
      this.nav.removeAttribute('class');
      this.nav.classList.add(this.state);
    }, false);
  },

  // Get state
  get state() {
    return this._state;
  },

  // Set state
  set state(state) {
    this._state = state;
  },
};

export default toggleNavigation;