From fca6dc1fd812ab1f98832c5cf68648262b181d3b Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Thu, 19 Dec 2024 11:59:58 +0000
Subject: [PATCH 1/3] Stack convert section, don't remove. Move remove into own
 js

---
 .../resources/static/js/languageSelection.js  | 76 ++++++++-----------
 src/main/resources/static/js/navbar.js        | 19 +++++
 .../resources/templates/fragments/navbar.html |  9 ++-
 3 files changed, 55 insertions(+), 49 deletions(-)
 create mode 100644 src/main/resources/static/js/navbar.js

diff --git a/src/main/resources/static/js/languageSelection.js b/src/main/resources/static/js/languageSelection.js
index 383d23da..2c7e0406 100644
--- a/src/main/resources/static/js/languageSelection.js
+++ b/src/main/resources/static/js/languageSelection.js
@@ -1,5 +1,5 @@
 function getStoredOrDefaultLocale() {
-  const storedLocale = localStorage.getItem("languageCode");
+  const storedLocale = localStorage.getItem('languageCode');
   return storedLocale || getDetailedLanguageCode();
 }
 
@@ -7,10 +7,10 @@ function setLanguageForDropdown(dropdownClass) {
   const storedLocale = getStoredOrDefaultLocale();
   const dropdownItems = document.querySelectorAll(dropdownClass);
 
-  dropdownItems.forEach(item => {
-      item.classList.toggle("active", item.dataset.bsLanguageCode === storedLocale);
-      item.removeEventListener("click", handleDropdownItemClick);
-      item.addEventListener("click", handleDropdownItemClick);
+  dropdownItems.forEach((item) => {
+    item.classList.toggle('active', item.dataset.bsLanguageCode === storedLocale);
+    item.removeEventListener('click', handleDropdownItemClick);
+    item.addEventListener('click', handleDropdownItemClick);
   });
 }
 
@@ -24,62 +24,46 @@ function handleDropdownItemClick(event) {
   event.preventDefault();
   const languageCode = event.currentTarget.dataset.bsLanguageCode;
   if (languageCode) {
-      localStorage.setItem("languageCode", languageCode);
-      updateUrlWithLanguage(languageCode);
+    localStorage.setItem('languageCode', languageCode);
+    updateUrlWithLanguage(languageCode);
   } else {
-      console.error("Language code is not set for this item.");
+    console.error('Language code is not set for this item.');
   }
 }
 
 function checkUserLanguage(defaultLocale) {
-  if (!localStorage.getItem("languageCode") || document.documentElement.getAttribute("data-language") != defaultLocale) {
-      localStorage.setItem("languageCode", defaultLocale);
-      updateUrlWithLanguage(defaultLocale);
+  if (
+    !localStorage.getItem('languageCode') ||
+    document.documentElement.getAttribute('data-language') != defaultLocale
+  ) {
+    localStorage.setItem('languageCode', defaultLocale);
+    updateUrlWithLanguage(defaultLocale);
   }
 }
 
 function initLanguageSettings() {
-  document.addEventListener("DOMContentLoaded", function () {
-      setLanguageForDropdown(".lang_dropdown-item");
+  document.addEventListener('DOMContentLoaded', function () {
+    setLanguageForDropdown('.lang_dropdown-item');
 
-      const defaultLocale = getStoredOrDefaultLocale();
-      checkUserLanguage(defaultLocale);
+    const defaultLocale = getStoredOrDefaultLocale();
+    checkUserLanguage(defaultLocale);
 
-      const dropdownItems = document.querySelectorAll(".lang_dropdown-item");
-      dropdownItems.forEach(item => {
-          item.classList.toggle("active", item.dataset.bsLanguageCode === defaultLocale);
-      });
-  });
-}
-
-function removeElements() {
-  document.addEventListener("DOMContentLoaded", function () {
-      document.querySelectorAll(".navbar-item").forEach((element) => {
-          const dropdownItems = element.querySelectorAll(".dropdown-item");
-          const items = Array.from(dropdownItems).filter(item => !item.querySelector("hr.dropdown-divider"));
-
-          if (items.length <= 2) {
-              if (
-                  element.previousElementSibling &&
-                  element.previousElementSibling.classList.contains("navbar-item") &&
-                  element.previousElementSibling.classList.contains("nav-item-separator")
-              ) {
-                  element.previousElementSibling.remove();
-              }
-              element.remove();
-          }
-      });
+    const dropdownItems = document.querySelectorAll('.lang_dropdown-item');
+    dropdownItems.forEach((item) => {
+      item.classList.toggle('active', item.dataset.bsLanguageCode === defaultLocale);
+    });
   });
 }
 
 function sortLanguageDropdown() {
-  document.addEventListener("DOMContentLoaded", function () {
-      const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
-      if (dropdownMenu) {
-        const items = Array.from(dropdownMenu.children).filter(child => child.matches('a'));
-        items.sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
-          .forEach(node => dropdownMenu.appendChild(node));
-      }
+  document.addEventListener('DOMContentLoaded', function () {
+    const dropdownMenu = document.querySelector('.dropdown-menu .dropdown-item.lang_dropdown-item').parentElement;
+    if (dropdownMenu) {
+      const items = Array.from(dropdownMenu.children).filter((child) => child.matches('a'));
+      items
+        .sort((a, b) => a.dataset.bsLanguageCode.localeCompare(b.dataset.bsLanguageCode))
+        .forEach((node) => dropdownMenu.appendChild(node));
+    }
   });
 }
 
diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js
new file mode 100644
index 00000000..de8509ad
--- /dev/null
+++ b/src/main/resources/static/js/navbar.js
@@ -0,0 +1,19 @@
+function removeElements() {
+  document.addEventListener('DOMContentLoaded', function () {
+    document.querySelectorAll('.navbar-item').forEach((element) => {
+      const dropdownItems = element.querySelectorAll('.dropdown-item');
+      const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+
+      if (items.length == 0) {
+        if (
+          element.previousElementSibling &&
+          element.previousElementSibling.classList.contains('navbar-item') &&
+          element.previousElementSibling.classList.contains('nav-item-separator')
+        ) {
+          element.previousElementSibling.remove();
+        }
+        element.remove();
+      }
+    });
+  });
+}
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index d3206433..f4b9de0a 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,5 +1,6 @@
 <div th:fragment="navbar" class="mx-auto">
   <script th:src="@{'/js/languageSelection.js'}"></script>
+  <script th:src="@{'/js/navbar.js'}"></script>
   <script th:src="@{'/js/additionalLanguageCode.js'}"></script>
   <script th:inline="javascript">
     // Initializing the scripts
@@ -81,8 +82,9 @@
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
                         </div>
                       </div>
+                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;">
                       <!-- Convert to PDF menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <div class="navbar-item py px-xl-1 px-2">
                         <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
@@ -99,12 +101,12 @@
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('markdown-to-pdf', 'markdown', 'home.MarkdownToPDF.title', 'home.MarkdownToPDF.desc', 'MarkdownToPDF.tags', 'convert')}">
                         </div>
-                         <div
+                        <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('book-to-pdf', 'book', 'home.BookToPDF.title', 'home.BookToPDF.desc', 'BookToPDF.tags', 'convert')}">
                         </div>
                       </div>
                       <!-- Convert from PDF menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <div class="navbar-item py px-xl-1 px-2" style="margin-top: 1rem;">
                         <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">
@@ -134,6 +136,7 @@
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-book', 'book', 'home.PDFToBook.title', 'home.PDFToBook.desc', 'PDFToBook.tags', 'convert')}">
                         </div>
                       </div>
+                    </div>
                       <!-- Security menu items -->
                       <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
                         <h6 class="menu-title" th:text="#{navbar.sections.security}"></h6>

From 2a93910da3b007f96529b8beab54c84fb9e4e9f0 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Thu, 19 Dec 2024 12:04:08 +0000
Subject: [PATCH 2/3] Remove padding

---
 src/main/resources/templates/fragments/navbar.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index f4b9de0a..aa69681f 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -46,7 +46,7 @@
                   <div class="container-fluid">
                     <div class="row">
                       <!-- Page tools menu items -->
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2">
+                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1">
                         <h6 class="menu-title" th:text="#{navbar.sections.organize}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('multi-tool', 'construction', 'home.multiTool.title', 'home.multiTool.desc', 'multiTool.tags', 'organize')}">
@@ -106,7 +106,7 @@
                         </div>
                       </div>
                       <!-- Convert from PDF menu items -->
-                      <div class="navbar-item py px-xl-1 px-2" style="margin-top: 1rem;">
+                      <div class="navbar-item py px-xl-1" style="margin-top: 1rem;">
                         <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">

From 63386baa0d790b2df348da563d8defbf25643919 Mon Sep 17 00:00:00 2001
From: Reece Browne <reecebrowne1995@gmail.com>
Date: Thu, 19 Dec 2024 12:58:57 +0000
Subject: [PATCH 3/3] Conditional logic for stacking columns

---
 src/main/resources/static/css/navbar.css      |  8 +++
 src/main/resources/static/js/navbar.js        | 51 ++++++++++++++-----
 .../resources/templates/fragments/navbar.html |  8 +--
 3 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css
index a437f0ec..71c57398 100644
--- a/src/main/resources/static/css/navbar.css
+++ b/src/main/resources/static/css/navbar.css
@@ -366,3 +366,11 @@ span.icon-text::after {
   background-color: #0056b3;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+#stacked {
+  gap: 1rem;
+}
+
+#stacked > .navbar-item {
+  margin: 0;
+}
diff --git a/src/main/resources/static/js/navbar.js b/src/main/resources/static/js/navbar.js
index de8509ad..97272a5b 100644
--- a/src/main/resources/static/js/navbar.js
+++ b/src/main/resources/static/js/navbar.js
@@ -1,18 +1,45 @@
-function removeElements() {
+function toolsManager() {
   document.addEventListener('DOMContentLoaded', function () {
-    document.querySelectorAll('.navbar-item').forEach((element) => {
-      const dropdownItems = element.querySelectorAll('.dropdown-item');
-      const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+    const stackedContainer = document.getElementById('stacked');
 
-      if (items.length == 0) {
-        if (
-          element.previousElementSibling &&
-          element.previousElementSibling.classList.contains('navbar-item') &&
-          element.previousElementSibling.classList.contains('nav-item-separator')
-        ) {
-          element.previousElementSibling.remove();
+    if (stackedContainer) {
+      const convertToPDF = stackedContainer.querySelector('.navbar-item:first-child');
+      const convertFromPDF = stackedContainer.querySelector('.navbar-item:nth-child(2)');
+
+      if (convertToPDF && convertFromPDF) {
+        const dropdownItemsTo = convertToPDF.querySelectorAll('.dropdown-item');
+        const dropdownItemsFrom = convertFromPDF.querySelectorAll('.dropdown-item');
+
+        const itemsTo = Array.from(dropdownItemsTo).filter((item) => !item.querySelector('hr.dropdown-divider'));
+        const itemsFrom = Array.from(dropdownItemsFrom).filter((item) => !item.querySelector('hr.dropdown-divider'));
+
+        const totalItems = itemsTo.length + itemsFrom.length;
+
+        if (totalItems > 12) {
+          stackedContainer.style.flexDirection = 'row';
+          stackedContainer.classList.remove('col-lg-2');
+          stackedContainer.classList.add('col-lg-4');
+          convertToPDF.style.flex = '1 1 50%';
+          convertFromPDF.style.flex = '1 1 50%';
+        }
+      }
+    }
+
+    document.querySelectorAll('.navbar-item').forEach((element) => {
+      if (!element.closest('#stacked')) {
+        const dropdownItems = element.querySelectorAll('.dropdown-item');
+        const items = Array.from(dropdownItems).filter((item) => !item.querySelector('hr.dropdown-divider'));
+
+        if (items.length === 0) {
+          if (
+            element.previousElementSibling &&
+            element.previousElementSibling.classList.contains('navbar-item') &&
+            element.previousElementSibling.classList.contains('nav-item-separator')
+          ) {
+            element.previousElementSibling.remove();
+          }
+          element.remove();
         }
-        element.remove();
       }
     });
   });
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index aa69681f..d4cdebbe 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -5,7 +5,7 @@
   <script th:inline="javascript">
     // Initializing the scripts
     initLanguageSettings();
-    removeElements();
+    toolsManager();
   </script>
   <script th:inline="javascript">
     const currentVersion = /*[[${@appVersion}]]*/ '';
@@ -82,9 +82,9 @@
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-single-page', 'looks_one', 'home.PdfToSinglePage.title', 'home.PdfToSinglePage.desc', 'PdfToSinglePage.tags', 'organize')}">
                         </div>
                       </div>
-                      <div class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;">
+                      <div id="stacked" class="navbar-item col-lg-2 col-sm-6 py px-xl-1 px-2"style="display:flex; flex-direction: column;">
                       <!-- Convert to PDF menu items -->
-                      <div class="navbar-item py px-xl-1 px-2">
+                      <div class="navbar-item py px-xl-1 px-2" style="margin-bottom: 1rem;">
                         <h6 class="menu-title" th:text="#{navbar.sections.convertTo}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('img-to-pdf', 'image', 'home.imageToPdf.title', 'home.imageToPdf.desc', 'imageToPdf.tags', 'image')}">
@@ -106,7 +106,7 @@
                         </div>
                       </div>
                       <!-- Convert from PDF menu items -->
-                      <div class="navbar-item py px-xl-1" style="margin-top: 1rem;">
+                      <div class="navbar-item py px-xl-1">
                         <h6 class="menu-title" th:text="#{navbar.sections.convertFrom}"></h6>
                         <div
                           th:replace="~{fragments/navbarEntry :: navbarEntry ('pdf-to-img', 'image', 'home.pdfToImage.title', 'home.pdfToImage.desc', 'pdfToImage.tags', 'image')}">