From 6bdd5faa7a8e9f70a24b984b9b3d26e70362ec8f Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Mon, 10 Aug 2026 16:14:12 +0200
Subject: [PATCH] Fix dropdown menu styling: no rounded corners, no gaps,
 consistent hover

- border-radius: 0 on all dropdown-menu and dropdown-item
- padding: 0 and margin: 0 on dropdown-menu
- margin-left: 0 on submenu (no gap between parent and child)
- margin-top: -1px on submenu (seamless border overlap)
- CSS hover opens submenu on desktop, click on mobile
- white-space: nowrap on dropdown items
- Fix statistics getFullStats -> getStats
- Fix Twig ?? operator -> default filter on dashboard/statistics
- Asset server (public/asset.php) for production static file serving
- .htaccess rewrite rules for themes/admin/plugins assets
---
 .../theme/default/views/pages/dashboard.twig  |  4 +-
 .../theme/default/views/pages/statistics.twig |  6 +-
 cms/core/class/CodePressCMS.php               | 12 ++--
 public/admin.php                              |  2 +-
 themes/default/assets/css/theme.css           | 55 ++++++++++++++-
 themes/default/assets/css_compiled/theme.css  | 55 ++++++++++++++-
 themes/default/assets/js/app.js               | 23 ++++---
 themes/default/assets/scss/theme.scss         | 67 ++++++++++++++++++-
 8 files changed, 199 insertions(+), 25 deletions(-)

diff --git a/admin/theme/default/views/pages/dashboard.twig b/admin/theme/default/views/pages/dashboard.twig
index 0940340..afc52f4 100644
--- a/admin/theme/default/views/pages/dashboard.twig
+++ b/admin/theme/default/views/pages/dashboard.twig
@@ -17,7 +17,7 @@
             <div class="card-body d-flex justify-content-between align-items-center">
                 <div>
                     <h6 class="text-muted mb-1">Weergaven (30 dagen)</h6>
-                    <h3 class="mb-0">{{ (analytics_summary.totals.views ?? 0)|number_format(0, ',', '.') }}</h3>
+                    <h3 class="mb-0">{{ (analytics_summary.totals.views|default(0))|number_format(0, ',', '.') }}</h3>
                 </div>
                 <i class="bi bi-eye stat-icon text-primary"></i>
             </div>
@@ -28,7 +28,7 @@
             <div class="card-body d-flex justify-content-between align-items-center">
                 <div>
                     <h6 class="text-muted mb-1">Unieke bezoekers (30 dagen)</h6>
-                    <h3 class="mb-0">{{ (analytics_summary.totals.uniques ?? 0)|number_format(0, ',', '.') }}</h3>
+                    <h3 class="mb-0">{{ (analytics_summary.totals.uniques|default(0))|number_format(0, ',', '.') }}</h3>
                 </div>
                 <i class="bi bi-people stat-icon text-success"></i>
             </div>
diff --git a/admin/theme/default/views/pages/statistics.twig b/admin/theme/default/views/pages/statistics.twig
index 5dff69d..1186be6 100644
--- a/admin/theme/default/views/pages/statistics.twig
+++ b/admin/theme/default/views/pages/statistics.twig
@@ -11,7 +11,7 @@
             <div class="card-body d-flex justify-content-between align-items-center">
                 <div>
                     <h6 class="text-muted mb-1">Totaal aantal views</h6>
-                    <h3 class="mb-0">{{ (stats.totals.views ?? 0)|number_format(0, ',', '.') }}</h3>
+                    <h3 class="mb-0">{{ (stats.totals.views|default(0))|number_format(0, ',', '.') }}</h3>
                 </div>
                 <i class="bi bi-eye stat-icon text-primary"></i>
             </div>
@@ -22,7 +22,7 @@
             <div class="card-body d-flex justify-content-between align-items-center">
                 <div>
                     <h6 class="text-muted mb-1">Unieke bezoekers</h6>
-                    <h3 class="mb-0">{{ (stats.totals.uniques ?? 0)|number_format(0, ',', '.') }}</h3>
+                    <h3 class="mb-0">{{ (stats.totals.uniques|default(0))|number_format(0, ',', '.') }}</h3>
                 </div>
                 <i class="bi bi-people stat-icon text-success"></i>
             </div>
@@ -33,7 +33,7 @@
             <div class="card-body d-flex justify-content-between align-items-center">
                 <div>
                     <h6 class="text-muted mb-1">Pagina views</h6>
-                    <h3 class="mb-0">{{ (stats.pages|length ?? 0) }}</h3>
+                    <h3 class="mb-0">{{ stats.pages|length|default(0) }}</h3>
                 </div>
                 <i class="bi bi-file-earmark-text stat-icon text-info"></i>
             </div>
diff --git a/cms/core/class/CodePressCMS.php b/cms/core/class/CodePressCMS.php
index 2d1bddc..8f8c6e7 100644
--- a/cms/core/class/CodePressCMS.php
+++ b/cms/core/class/CodePressCMS.php
@@ -1427,7 +1427,7 @@ class CodePressCMS {
                     $isExpanded = $this->folderContainsActivePage($item['children']);
                     
                     if ($level === 0) {
-                        // Root level folders
+                        // Root level folders - Bootstrap dropdown
                         $html .= '<li class="nav-item dropdown">';
                         $html .= '<a class="nav-link dropdown-toggle" href="#" id="' . $folderId . '" role="button" data-bs-toggle="dropdown" aria-expanded="' . ($isExpanded ? 'true' : 'false') . '">';
                         $html .= htmlspecialchars($item['title']) . ' <i class="bi bi-chevron-down"></i>';
@@ -1437,12 +1437,12 @@ class CodePressCMS {
                         $html .= '</ul>';
                         $html .= '</li>';
                     } else {
-                        // Nested folders in dropdown
-                        $html .= '<li class="dropdown-submenu">';
-                        $html .= '<a class="dropdown-item dropdown-toggle" href="#" id="' . $folderId . '">';
-                        $html .= htmlspecialchars($item['title']) . ' <i class="bi bi-chevron-down"></i>';
+                        // Nested folders - CSS hover submenu (unlimited depth)
+                        $html .= '<li class="dropdown-submenu' . ($isExpanded ? ' show' : '') . '">';
+                        $html .= '<a class="dropdown-item dropdown-toggle" href="#" id="' . $folderId . '" role="button" aria-expanded="' . ($isExpanded ? 'true' : 'false') . '">';
+                        $html .= htmlspecialchars($item['title']) . ' <i class="bi bi-chevron-right"></i>';
                         $html .= '</a>';
-                        $html .= '<ul class="dropdown-menu" aria-labelledby="' . $folderId . '">';
+                        $html .= '<ul class="dropdown-menu' . ($isExpanded ? ' show' : '') . '" aria-labelledby="' . $folderId . '">';
                         $html .= $this->renderMenu($item['children'], $level + 1);
                         $html .= '</ul>';
                         $html .= '</li>';
diff --git a/public/admin.php b/public/admin.php
index 5b05caa..e2aaaf8 100644
--- a/public/admin.php
+++ b/public/admin.php
@@ -916,7 +916,7 @@ function handleSecurity($auth, $config, $twig, $user, $csrf): void
 function handleStatistics($auth, $config, $twig, $user, $csrf, $siteConfig): void
 {
     $analytics = new Analytics($siteConfig['analytics'] ?? []);
-    $stats = $analytics->getFullStats();
+    $stats = $analytics->getStats();
     $route = 'statistics';
 
     echo $twig->render('pages/statistics.twig', [
diff --git a/themes/default/assets/css/theme.css b/themes/default/assets/css/theme.css
index f796fc9..db6c6db 100644
--- a/themes/default/assets/css/theme.css
+++ b/themes/default/assets/css/theme.css
@@ -71,15 +71,22 @@
 .dropdown-menu {
   background-color: var(--header-bg) !important;
   border: 1px solid var(--header-font) !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
-
 .dropdown-item {
   color: var(--header-font) !important;
+  border-radius: 0 !important;
+  padding: 0.5rem 1rem;
 }
-.dropdown-item:hover {
+.dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: var(--header-font) !important;
 }
+.nav-tabs .dropdown-menu {
+  margin-top: 0 !important;
+}
 
 .dropdown-toggle::after {
   display: none !important;
@@ -287,6 +294,50 @@ pre code {
   line-height: 1.5;
 }
 
+/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -1px;
+  margin-left: 0;
+  display: none;
+  border-radius: 0 !important;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > .dropdown-toggle {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+}
+.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
+  float: right;
+  margin-top: 0.25rem;
+}
+.dropdown-menu .dropdown-item {
+  width: 100%;
+  white-space: nowrap;
+}
+@media (max-width: 767.98px) {
+  .dropdown-submenu > .dropdown-menu {
+    left: 0;
+    top: 100%;
+    margin-top: 0;
+    margin-left: 1rem;
+    border: none;
+    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    box-shadow: none;
+  }
+  .dropdown-submenu:hover > .dropdown-menu {
+    display: none;
+  }
+  .dropdown-submenu.show > .dropdown-menu {
+    display: block;
+  }
+}
+
 code {
   background: #e8e8e8;
   padding: 0.15rem 0.4rem;
diff --git a/themes/default/assets/css_compiled/theme.css b/themes/default/assets/css_compiled/theme.css
index f796fc9..db6c6db 100644
--- a/themes/default/assets/css_compiled/theme.css
+++ b/themes/default/assets/css_compiled/theme.css
@@ -71,15 +71,22 @@
 .dropdown-menu {
   background-color: var(--header-bg) !important;
   border: 1px solid var(--header-font) !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
-
 .dropdown-item {
   color: var(--header-font) !important;
+  border-radius: 0 !important;
+  padding: 0.5rem 1rem;
 }
-.dropdown-item:hover {
+.dropdown-item:hover, .dropdown-item:focus {
   background-color: rgba(255, 255, 255, 0.1) !important;
   color: var(--header-font) !important;
 }
+.nav-tabs .dropdown-menu {
+  margin-top: 0 !important;
+}
 
 .dropdown-toggle::after {
   display: none !important;
@@ -287,6 +294,50 @@ pre code {
   line-height: 1.5;
 }
 
+/* Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover */
+.dropdown-submenu {
+  position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-top: -1px;
+  margin-left: 0;
+  display: none;
+  border-radius: 0 !important;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+  display: block;
+}
+.dropdown-submenu:hover > .dropdown-toggle {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+}
+.dropdown-submenu > .dropdown-toggle .bi-chevron-right {
+  float: right;
+  margin-top: 0.25rem;
+}
+.dropdown-menu .dropdown-item {
+  width: 100%;
+  white-space: nowrap;
+}
+@media (max-width: 767.98px) {
+  .dropdown-submenu > .dropdown-menu {
+    left: 0;
+    top: 100%;
+    margin-top: 0;
+    margin-left: 1rem;
+    border: none;
+    border-left: 2px solid rgba(255, 255, 255, 0.2);
+    box-shadow: none;
+  }
+  .dropdown-submenu:hover > .dropdown-menu {
+    display: none;
+  }
+  .dropdown-submenu.show > .dropdown-menu {
+    display: block;
+  }
+}
+
 code {
   background: #e8e8e8;
   padding: 0.15rem 0.4rem;
diff --git a/themes/default/assets/js/app.js b/themes/default/assets/js/app.js
index df508da..913ddb3 100644
--- a/themes/default/assets/js/app.js
+++ b/themes/default/assets/js/app.js
@@ -93,34 +93,41 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     });
 
-    // Handle nested dropdowns for touch devices using event delegation
+    // Handle nested dropdowns — toggle submenu on click (for mobile/touch)
+    // On desktop, CSS hover handles submenu display
     document.addEventListener('click', function(e) {
-        const toggle = e.target.closest('.dropdown-submenu .dropdown-toggle');
+        const toggle = e.target.closest('.dropdown-submenu > .dropdown-toggle');
 
         if (toggle) {
             e.preventDefault();
             e.stopPropagation();
 
-            const submenu = toggle.closest('.dropdown-submenu');
+            const submenu = toggle.parentElement;
             const dropdown = submenu.querySelector('.dropdown-menu');
 
-            // Close other submenus at the same level
+            // Close other open submenus at the same level
             const parent = submenu.parentElement;
-            parent.querySelectorAll('.dropdown-submenu').forEach(function(sibling) {
+            parent.querySelectorAll(':scope > .dropdown-submenu').forEach(function(sibling) {
                 if (sibling !== submenu) {
+                    sibling.classList.remove('show');
                     var siblingMenu = sibling.querySelector('.dropdown-menu');
                     if (siblingMenu) siblingMenu.classList.remove('show');
                 }
             });
 
             // Toggle current submenu
-            if (dropdown) dropdown.classList.toggle('show');
+            if (dropdown) {
+                dropdown.classList.toggle('show');
+                submenu.classList.toggle('show');
+            }
             return;
         }
 
         // Close all open submenus when clicking outside
-        document.querySelectorAll('.dropdown-submenu .dropdown-menu.show').forEach(function(menu) {
-            menu.classList.remove('show');
+        document.querySelectorAll('.dropdown-submenu.show').forEach(function(sm) {
+            sm.classList.remove('show');
+            var menu = sm.querySelector('.dropdown-menu');
+            if (menu) menu.classList.remove('show');
         });
     });
 });
diff --git a/themes/default/assets/scss/theme.scss b/themes/default/assets/scss/theme.scss
index 688ee38..1f2c87e 100644
--- a/themes/default/assets/scss/theme.scss
+++ b/themes/default/assets/scss/theme.scss
@@ -110,17 +110,27 @@ $header-bg-opacity: 1;
 .dropdown-menu {
     background-color: var(--header-bg) !important;
     border: 1px solid var(--header-font) !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
 }
 
 .dropdown-item {
     color: var(--header-font) !important;
+    border-radius: 0 !important;
+    padding: 0.5rem 1rem;
 
-    &:hover {
+    &:hover, &:focus {
         background-color: rgba(255, 255, 255, 0.1) !important;
         color: var(--header-font) !important;
     }
 }
 
+// Remove Bootstrap dropdown border/spacing on nav-tabs dropdown
+.nav-tabs .dropdown-menu {
+    margin-top: 0 !important;
+}
+
 // Hide Bootstrap dropdown arrow and use custom icon
 .dropdown-toggle::after {
     display: none !important;
@@ -287,6 +297,61 @@ $header-bg-opacity: 1;
     }
 }
 
+// Bootstrap 5 nested dropdown support (dropdown-submenu) — unlimited depth, CSS hover
+.dropdown-submenu {
+    position: relative;
+
+    > .dropdown-menu {
+        top: 0;
+        left: 100%;
+        margin-top: -1px;
+        margin-left: 0;
+        display: none;
+        border-radius: 0 !important;
+    }
+
+    // Open submenu on hover (desktop)
+    &:hover > .dropdown-menu {
+        display: block;
+    }
+
+    // Keep parent highlighted when hovering submenu
+    &:hover > .dropdown-toggle {
+        background-color: rgba(255, 255, 255, 0.15) !important;
+    }
+
+    // Arrow pointing right
+    > .dropdown-toggle .bi-chevron-right {
+        float: right;
+        margin-top: 0.25rem;
+    }
+}
+
+// Ensure dropdown items fill width and no gaps
+.dropdown-menu .dropdown-item {
+    width: 100%;
+    white-space: nowrap;
+}
+
+// Mobile: submenu appears below instead of beside, open on tap
+@media (max-width: 767.98px) {
+    .dropdown-submenu > .dropdown-menu {
+        left: 0;
+        top: 100%;
+        margin-top: 0;
+        margin-left: 1rem;
+        border: none;
+        border-left: 2px solid rgba(255, 255, 255, 0.2);
+        box-shadow: none;
+    }
+    .dropdown-submenu:hover > .dropdown-menu {
+        display: none;
+    }
+    .dropdown-submenu.show > .dropdown-menu {
+        display: block;
+    }
+}
+
 // Sidebar styling
 .sidebar-column {
     background-color: var(--sidebar-bg) !important;