From 529161f21c47878aee8e79f6f42ba603d55320df Mon Sep 17 00:00:00 2001
From: Daniel Kempkens <daniel+git@kempkens.io>
Date: Mon, 21 Aug 2023 19:06:56 +0200
Subject: [PATCH] fix(chat): move bookmarks to dropdown

---
 priv/templates/http/chat.eex | 45 ++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/priv/templates/http/chat.eex b/priv/templates/http/chat.eex
index 649859a..f5cc103 100644
--- a/priv/templates/http/chat.eex
+++ b/priv/templates/http/chat.eex
@@ -28,19 +28,40 @@
 
 <script>
   const bookmarks = document.querySelectorAll('[data-bookmark]');
-  const header = document.getElementsByTagName('h2')[0];
-  let container = document.createElement('p');
 
-  for (var i = 0; i < bookmarks.length; i++) {
-    let bookmarkElement = document.createElement('a');
-    bookmarkElement.href = `#${bookmarks[i].id}`;
-    bookmarkElement.innerText = bookmarks[i].dataset.bookmark;
-    bookmarkElement.className = "btn btn-secondary btn-sm";
-    bookmarkElement.setAttribute('role', 'button');
+  if (bookmarks.length > 0) {
+    const header = document.getElementsByTagName('h2')[0];
 
-    container.appendChild(bookmarkElement);
-    container.appendChild(document.createTextNode(' '));
+    const container = document.createElement('div');
+    container.className = 'dropdown';
+
+    const dropdownButton = document.createElement('button');
+    dropdownButton.id = 'bookmarkDropdown';
+    dropdownButton.className = 'btn btn-secondary dropdown-toggle';
+    dropdownButton.setAttribute('type', 'button');
+    dropdownButton.setAttribute('data-bs-toggle', 'dropdown');
+    dropdownButton.setAttribute('aria-expanded', 'false');
+    dropdownButton.innerText = 'Bookmarks';
+
+    container.appendChild(dropdownButton);
+
+    const dropdownMenu = document.createElement('ul');
+    dropdownMenu.className = 'dropdown-menu';
+
+    for (var i = 0; i < bookmarks.length; i++) {
+      console.log(bookmarks[i]);
+      let liElement = document.createElement('li');
+      let bookmarkElement = document.createElement('a');
+      bookmarkElement.href = `#${bookmarks[i].id}`;
+      bookmarkElement.innerText = bookmarks[i].dataset.bookmark;
+      bookmarkElement.className = "dropdown-item";
+
+      liElement.appendChild(bookmarkElement);
+      dropdownMenu.appendChild(liElement);
+    }
+
+    container.appendChild(dropdownMenu);
+    header.after(container);
+    container.after(document.createElement('br'));
   }
-
-  header.after(container);
 </script>