Improvment: Replacing change EPG menu.

src/tpl/topbar.php

@@ -14,14 +14,24 @@
 <?php endif; ?>
   </div>
 <?php if (count($epg_sources) > 1 || $allow_personal_epg): ?>
-  <select class="source-select" id="sourceSelect" onchange="switchSource(this.value)" title="Source EPG">
+  <div class="source-dropdown" id="sourceDropdown">
+    <button class="source-dropdown-btn" onclick="toggleSourceDropdown()" id="sourceDropdownBtn">
+      <span id="sourceDropdownLabel"><?= htmlspecialchars($epg_sources[0]['name'] ?? 'EPG') ?></span>
+      <span class="source-dropdown-arrow">&#9660;</span>
+    </button>
+    <div class="source-dropdown-menu" id="sourceDropdownMenu">
 <?php foreach ($epg_sources as $i => $src): ?>
-    <option value="<?= $i ?>"><?= htmlspecialchars($src['name']) ?></option>
+      <button class="source-dropdown-item<?= $i === 0 ? ' active' : '' ?>" onclick="switchSource(<?= $i ?>); closeSourceDropdown()">
+        <?= htmlspecialchars($src['name']) ?>
+      </button>
 <?php endforeach; ?>
 <?php if ($allow_personal_epg): ?>
-    <option value="personal">✏ Personal EPG</option>
+      <button class="source-dropdown-item source-dropdown-personal" onclick="switchSource('personal'); closeSourceDropdown()">
+        &#9998; Personal EPG
+      </button>
 <?php endif; ?>
-  </select>
+    </div>
+  </div>
 <?php endif; ?>
   <select class="theme-select" id="themeSelect" onchange="setTheme(this.value)" title="Thème">
 <?php