From 096d4c26519d5e3815592a0d3dfba2a02a146888 Mon Sep 17 00:00:00 2001
From: Chris Kruining <c.kruining@4dotnet.nl>
Date: Tue, 7 Jan 2025 13:45:19 +0100
Subject: [PATCH] refactor nav item to utilize dropdown component

---
 src/routes/(editor).tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/src/routes/(editor).tsx b/src/routes/(editor).tsx
index 5fd3902..654c2e5 100644
--- a/src/routes/(editor).tsx
+++ b/src/routes/(editor).tsx
@@ -10,6 +10,7 @@ import { FaSolidPalette } from "solid-icons/fa";
 import { LocalePicker } from "~/features/i18n";
 import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme";
 import css from "./editor.module.css";
+import { Dropdown } from "~/components/dropdown";
 
 const event = getRequestEvent();
 
@@ -79,15 +80,9 @@ export default function Editor(props: ParentProps) {
                 <section class={css.right}>
                     <LocalePicker />
 
-                    <div class={css.themeMenu}>
-                        <button class={css.themeMenuButton} id={`${themeMenuId}-button`} popoverTarget={`${themeMenuId}-dialog`} title="Open theme picker menu">
-                            <FaSolidPalette />
-                        </button>
-
-                        <dialog class={css.themeMenuDialog} id={`${themeMenuId}-dialog`} popover anchor={`${themeMenuId}-button`}>
-                            <ColorSchemePicker />
-                        </dialog>
-                    </div>
+                    <Dropdown id={themeMenuId} class={css.themeMenu} text={<FaSolidPalette />}>
+                        <ColorSchemePicker />
+                    </Dropdown>
                 </section>
             </nav>