https://peterkaminski.wiki/markpub-static/js/script.js

1let isSideColumnVisibleByUser = true;
2
3function alignSideColumn() {
4    const mainColumn = document.getElementById('main-column');
5    const sideColumn = document.getElementById('side-column');
6    const mainColumnTop = mainColumn.getBoundingClientRect().top + window.scrollY;
7    sideColumn.style.top = mainColumnTop + 'px';
8}
9
10document.getElementById('hide-btn').addEventListener('click', function() {
11    this.classList.add('hidden');
12    document.getElementById('move-btn').classList.remove('hidden');
13    document.getElementById('side-column').classList.add('floating');
14    alignSideColumn();
15    document.getElementById('side-column').style.visibility = 'hidden';
16    document.getElementById('hamburger-btn').classList.remove('hidden');
17isSideColumnVisibleByUser = false;
18});
19
20document.getElementById('move-btn').addEventListener('click', function() {
21    this.classList.add('hidden');
22    document.getElementById('hide-btn').classList.remove('hidden');
23    document.getElementById('side-column').classList.remove('floating');
24    document.getElementById('side-column').style.visibility = 'visible';
25    document.getElementById('hamburger-btn').classList.add('hidden');
26isSideColumnVisibleByUser = true;
27});
28
29document.getElementById('hamburger-btn').addEventListener('click', function() {
30    var sideColumn = document.getElementById('side-column');
31    if (sideColumn.style.visibility === 'hidden') {
32	sideColumn.style.visibility = 'visible';
33  isSideColumnVisibleByUser = true;
34    } else {
35	sideColumn.style.visibility = 'hidden';
36	sideColumn.classList.add('floating');
37	document.getElementById('move-btn').classList.remove('hidden');
38	document.getElementById('hide-btn').classList.add('hidden');
39  isSideColumnVisibleByUser = false;
40    }
41});
42
43function handleResize() {
44  if (window.innerWidth < 768) {
45    document.getElementById('side-column').classList.add('floating');
46    document.getElementById('side-column').style.visibility = 'hidden';
47    document.getElementById('hamburger-btn').classList.remove('hidden');
48  } else {
49    if (isSideColumnVisibleByUser) {
50      document.getElementById('side-column').classList.remove('floating');
51      document.getElementById('side-column').style.visibility = 'visible';
52      document.getElementById('hamburger-btn').classList.add('hidden');
53    }
54  }
55}
56
57window.addEventListener('resize', handleResize);
58
59window.addEventListener('resize', function() {
60      if (document.getElementById('side-column').classList.contains('floating')) {
61	  alignSideColumn();
62      }
63  });
64
65  window.addEventListener('scroll', function() {
66      if (document.getElementById('side-column').classList.contains('floating')) {
67	  alignSideColumn();
68      }
69  });
70
71window.onload = function() {
72  handleResize();
73};