From 59d1c24b69a03e85c04e34bff3d8d1468f503d06 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sun, 24 Oct 2021 19:11:29 +0200
Subject: chore: hide or show the toolbar according to viewport

---
 htdocs/src/js/app.js | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

(limited to 'htdocs/src')

diff --git a/htdocs/src/js/app.js b/htdocs/src/js/app.js
index 959bc56..ac63299 100644
--- a/htdocs/src/js/app.js
+++ b/htdocs/src/js/app.js
@@ -1,5 +1,31 @@
 import projects from './config/projects';
-import { isStyleJsExists } from './utilities/helpers';
+import { isSmallVw, isStyleJsExists } from './utilities/helpers';
+
+/**
+ * Display or hide the toolbar depending on the current viewport width.
+ */
+function toggleToolbar() {
+  const toolbar = document.querySelector('.toolbar');
+  if (isSmallVw()) {
+    toolbar.style.display = '';
+  } else {
+    toolbar.style.display = 'none';
+  }
+}
+
+/**
+ * Change the visibility of some DOM elements.
+ */
+function updateView() {
+  toggleToolbar();
+}
+
+/**
+ * Update view when the window size changes.
+ */
+function listenWindowSize() {
+  window.addEventListener('resize', updateView);
+}
 
 /**
  * Create a list item for a project.
@@ -49,6 +75,8 @@ function loadWebpackStyles() {
 function init() {
   loadWebpackStyles();
   printProjectsNav();
+  updateView();
+  listenWindowSize();
 }
 
 init();
-- 
cgit v1.2.3