Tidy up homepage and navigation

app/javascript/controllers/dashboard_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["eventsCount", "rulesCount", "networkRangesCount", "systemHealth", "recentEvents", "topBlockedIps"]
+  static values = {
+    period: String,
+    refreshInterval: { type: Number, default: 30000 } // 30 seconds
+  }
+
+  connect() {
+    this.startRefreshing()
+  }
+
+  disconnect() {
+    this.stopRefreshing()
+  }
+
+  startRefreshing() {
+    this.refreshTimer = setInterval(() => {
+      this.refreshDashboard()
+    }, this.refreshIntervalValue)
+  }
+
+  stopRefreshing() {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer)
+    }
+  }
+
+  async refreshDashboard() {
+    try {
+      const response = await fetch(`/analytics?period=${this.periodValue}`, {
+        headers: {
+          "Accept": "text/vnd.turbo-stream.html"
+        }
+      })
+
+      if (response.ok) {
+        const html = await response.text()
+        Turbo.renderStreamMessage(html)
+      }
+    } catch (error) {
+      console.error("Failed to refresh dashboard:", error)
+    }
+  }
+
+  periodChanged(event) {
+    this.periodValue = event.currentTarget.dataset.period
+    this.refreshDashboard()
+  }
+}

app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  connect() {
+    // Add click outside listener to close dropdown
+    this.boundHide = this.hide.bind(this)
+    document.addEventListener("click", this.boundHide)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.boundHide)
+  }
+
+  toggle(event) {
+    event.preventDefault()
+    event.stopPropagation()
+
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  hide(event) {
+    // Don't hide if clicking inside the dropdown
+    if (this.element.contains(event.target)) return
+
+    this.menuTarget.classList.add("hidden")
+  }
+}

app/javascript/controllers/mobile_menu_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu", "open", "close"]
+
+  toggle(event) {
+    event.preventDefault()
+
+    const menu = this.menuTarget
+    const openIcon = this.openTarget
+    const closeIcon = this.closeTarget
+
+    menu.classList.toggle("hidden")
+    openIcon.classList.toggle("hidden")
+    closeIcon.classList.toggle("hidden")
+  }
+}