From c46c670e871cc3c68dd708fcf572e232cee5642f Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 14 May 2025 19:57:22 -0400
Subject: [PATCH] Mostly layout and style clean up

---
 src/lib/e_app_access_type.svelte |   2 +-
 src/lib/e_app_cfg.svelte         |   2 +-
 src/lib/e_app_debug_menu.svelte  |   9 +-
 src/lib/e_app_sign_in_out.svelte |   2 +-
 src/lib/e_app_sys_menu.svelte    | 196 ++++++++++++++++++++++---------
 5 files changed, 149 insertions(+), 62 deletions(-)

diff --git a/src/lib/e_app_access_type.svelte b/src/lib/e_app_access_type.svelte
index 5274818d..f80644f1 100644
--- a/src/lib/e_app_access_type.svelte
+++ b/src/lib/e_app_access_type.svelte
@@ -273,7 +273,7 @@ function handle_clear_access() {
     class="
         ae_access_type
         hidden-print
-        bg-red-100 text-gray-900
+        bg-blue-100 text-gray-900
         duration-300 delay-150 hover:delay-1000 hover:ease-out
         transition-all hover:transition-all
         flex flex-col flex-wrap gap-1
diff --git a/src/lib/e_app_cfg.svelte b/src/lib/e_app_cfg.svelte
index 3a450666..13432664 100644
--- a/src/lib/e_app_cfg.svelte
+++ b/src/lib/e_app_cfg.svelte
@@ -98,7 +98,7 @@ function handle_clear_storage(item: null|string) {
     class="
         ae_app_cfg
         hidden-print
-        bg-red-100 text-gray-900
+        bg-blue-100 text-gray-900
         transition hover:transition-all
         flex flex-col flex-wrap gap-1
         items-center justify-center
diff --git a/src/lib/e_app_debug_menu.svelte b/src/lib/e_app_debug_menu.svelte
index 2b5e0ea2..d0ab576d 100644
--- a/src/lib/e_app_debug_menu.svelte
+++ b/src/lib/e_app_debug_menu.svelte
@@ -36,7 +36,7 @@ let {
 <!-- opacity-25
 hover:opacity-100 -->
 <!-- text-slate-400 hover:text-slate-800 -->
-<div
+<section
     class="
         absolute bottom-0 left-0
         flex
@@ -178,12 +178,13 @@ hover:opacity-100 -->
         <!-- fixed bottom-0 left-0 -->
         &pi;
     </button>
-</div>
+
+</section>
 
 
 <style lang="postcss">
 /* BEGIN: AE's Svelte Quick Debug component  */
-#AE-Quick-Debug {
+#xxxAE-Quick-Debug {
     /* position: absolute; */
     /* position: fixed; */
     /* position: relative; */
@@ -221,7 +222,7 @@ hover:opacity-100 -->
     transition-timing-function: ease-out;
 }
 
-#AE-Quick-Debug:hover {
+#xxxAE-Quick-Debug:hover {
     /* lightyellow */
     /* background-color: hsla(60,100%,90%,.95); */
     /* background-color: rgba(var(--color-surface-500) / 1); */
diff --git a/src/lib/e_app_sign_in_out.svelte b/src/lib/e_app_sign_in_out.svelte
index 82a33216..814e8fee 100644
--- a/src/lib/e_app_sign_in_out.svelte
+++ b/src/lib/e_app_sign_in_out.svelte
@@ -281,7 +281,7 @@ async function handle_change_password() {
     class="
         ae_sign_in_out
         hidden-print
-        bg-red-100 text-gray-900
+        bg-blue-100 text-gray-900
         transition-all duration-300 delay-150 hover:delay-1000 hover:ease-out hover:transition-all
         flex flex-col flex-wrap gap-1
         items-end justify-center
diff --git a/src/lib/e_app_sys_menu.svelte b/src/lib/e_app_sys_menu.svelte
index fd857bb6..2c7ad035 100644
--- a/src/lib/e_app_sys_menu.svelte
+++ b/src/lib/e_app_sys_menu.svelte
@@ -52,7 +52,7 @@ let trigger_clear_access: null|boolean = $state(null);
 max-h-max
 min-w-full
 max-w-max -->
-<section
+<!-- <section
     class="
         ae_app__menu
         hidden-print
@@ -74,9 +74,77 @@ max-w-max -->
         z-10 hover:z-20
     "
     class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
+    > -->
+     <!-- && !$ae_loc?.app_cfg?.show_element__menu -->
+      <!-- !$ae_loc?.app_cfg?.show_element__menu_btn -->
+<section
+    class="
+        absolute bottom-6 right-0
+        flex flex-col-reverse gap-1
+        items-end justify-center
+        text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
+
+        dark:text-slate-400 dark:hover:text-slate-200
+        bg-blue-100/60 dark:bg-blue-800/50
+        hover:bg-blue-200 hover:dark:bg-blue-900
+
+        mx-1 my-2
+        w-min
+        max-w-md
+        transition-all
+        transition-delay-1000
+        transition-duration-1000
+        ease-in
+        z-50
+
+        opacity-60
+        hover:opacity-100
+
+        border-2
+        border-blue-300 dark:border-blue-700
+        hover:border-blue-500 hover:dark:border-blue-500
+    "
+    class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
+    class:w-full={$ae_loc?.app_cfg?.show_element__menu}
+    class:hidden={false}
+    class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
+    class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
+    class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
     >
 
-    <span class="hidden"
+
+<div
+    class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
+    class:border-green-200={$ae_loc?.show_element__menu}
+    class:dark:border-green-800={$ae_loc?.show_element__menu}
+    class="
+        flex flex-col items-end justify-end
+        gap-1
+        transition-all
+        transition-delay-1000
+        transition-duration-1000
+        ease-in
+        overflow-y-auto
+
+        p-1
+
+        bg-white dark:dark-gray-800
+
+        relative
+        *:hover:inline
+        *:hover:visible
+
+        opacity-50
+        hover:opacity-100
+        "
+    >
+
+    <span
+        class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
+        class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
+        class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
+        class="w-48"
+
         title="
         Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
         Username: {$ae_loc?.user?.username ?? '-- not set --'}
@@ -97,14 +165,18 @@ max-w-max -->
                 $ae_loc.edit_mode = false;
                 // dispatch_edit_mode_changed();
             }}
-            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block"
+            class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all
+
+            "
             title="Edit mode is currently enabled. Click to disable."
             >
-            <span class="fas fa-toggle-on mx-1"></span>
+            <span class=" *:hover:inline-block">
+            <span class="fas fa-toggle-on mx-1 inline-block"></span>
             Edit
             <span class="hidden">
                 Mode On
             </span>
+            </span>
         </button>
     {:else if $ae_loc.authenticated_access}
         <button
@@ -123,15 +195,15 @@ max-w-max -->
             </span>
         </button>
     {/if}
-
-    <div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
+<span>
+    <div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
         {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
             <span
                 class="*:hover:inline"
                 title={`Current access type/level: ${$ae_loc.access_type}`}
                 >
                 <!-- <span class="fas fa-unlock mx-1"></span> -->
-                <ShieldPlus class="inline-block" />
+                <!-- <ShieldPlus class="inline-block" /> -->
 
 
                 {#if $ae_loc.access_type == 'super'}
@@ -167,14 +239,14 @@ max-w-max -->
                         // trigger_clear_access = true;
                         // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
 
-                        if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+                        if (!$ae_loc?.app_cfg?.show_element__menu) {
                             $ae_loc.app_cfg.show_element__menu = true;
-                            $ae_loc.app_cfg.show_element__menu_btn = false;
+                            // $ae_loc.app_cfg.show_element__menu_btn = false;
                             $ae_loc.app_cfg.show_element__access_type = true;
                             $ae_loc.app_cfg.show_element__passcode_input = true;
                         } else {
                             $ae_loc.app_cfg.show_element__menu = false;
-                            $ae_loc.app_cfg.show_element__menu_btn = true;
+                            // $ae_loc.app_cfg.show_element__menu_btn = true;
                         }
                     }}
                     class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
@@ -249,16 +321,19 @@ max-w-max -->
             </button>
         {/if}
     </div>
-
-
+</span>
+    <!-- <div> -->
     <button
         type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
-        title="Sign In"
+        class:w-48={$ae_loc?.app_cfg?.show_element__menu}
+        class:visible={$ae_loc?.app_cfg?.show_element__menu}
+        class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
+        class="btn btn-sm variant-outline-surface hover:variant-ghost-success px-6 py-1"
+        title="Show or hide the menu"
         onclick={async () => {
-            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
+            if (!$ae_loc?.app_cfg?.show_element__menu) {
                 $ae_loc.app_cfg.show_element__menu = true;
-                $ae_loc.app_cfg.show_element__menu_btn = false;
+                // $ae_loc.app_cfg.show_element__menu_btn = false;
                 $ae_loc.app_cfg.show_element__access_type = true;
 
                 if ($ae_loc?.access_type == 'anonymous') {
@@ -274,47 +349,54 @@ max-w-max -->
                 to_focus?.focus();
             } else {
                 $ae_loc.app_cfg.show_element__menu = false;
-                $ae_loc.app_cfg.show_element__menu_btn = true;
+                // $ae_loc.app_cfg.show_element__menu_btn = true;
                 $ae_loc.app_cfg.show_element__passcode_input = false;
             }
             // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
         }}
         >
+        <span class=" *:hover:inline-block">
         {#if $ae_loc?.app_cfg?.show_element__menu}
             <CircleX class="inline-block" />
-            <!-- <span class="hidden"> -->
+            <span class="inline-block">
                 Hide Menu
-            <!-- </span> -->
+            </span>
         {:else}
             <Menu class="inline-block" />
             <span class="hidden">
                 Menu
             </span>
         {/if}
+        </span>
     </button>
+    <!-- </div> -->
+
+</div>
 
 
-</section>
 
 <!-- Show menu on right side of page -->
 <!-- min-h-96 -->
-<section
+<!-- absolute right-0 bottom-10 -->
+ <!-- opacity-50 -->
+        <!-- hover:opacity-100 -->
+         <!-- bg-white dark:bg-gray-800 -->
+<div
     class="
         ae_app__menu
         hidden-print
         flex flex-col
-        items-center
+        items-end
         justify-end
         gap-4
 
         min-w-48
-        absolute right-0 bottom-10
-        bg-white dark:bg-gray-800
+
+
         border border-gray-200 dark:border-gray-700
         rounded-lg
-        p-2
-        opacity-50
-        hover:opacity-100
+        px-1 py-2
+
         duration-100 delay-1000 hover:delay-100 hover:ease-out
         transition hover:transition-all
         z-20 hover:z-30
@@ -322,6 +404,35 @@ max-w-max -->
     class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
     >
 
+    <button
+        type="button"
+        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline px-6 py-1"
+        title="Sign In"
+        onclick={() => {
+            if (!$ae_loc?.app_cfg?.show_element__menu) {
+                    $ae_loc.app_cfg.show_element__menu = true;
+                    // $ae_loc.app_cfg.show_element__menu_btn = false;
+                } else {
+                    $ae_loc.app_cfg.show_element__menu = false;
+                    // $ae_loc.app_cfg.show_element__menu_btn = true;
+                }
+            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
+            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
+        }}
+        >
+        {#if $ae_loc?.app_cfg?.show_element__menu}
+            <CircleX class="mx-1 inline-block" />
+            <!-- <span class="hidden"> -->
+                Hide Menu
+            <!-- </span> -->
+        {:else}
+            <Menu class="mx-1 inline-block" />
+            <!-- <span class="hidden"> -->
+                Menu
+            <!-- </span> -->
+        {/if}
+    </button>
+
     <!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
     <span
         class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
@@ -348,33 +459,8 @@ max-w-max -->
         />
     {/if}
 
-    <button
-        type="button"
-        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
-        title="Sign In"
-        onclick={() => {
-            if ($ae_loc?.app_cfg?.show_element__menu_btn) {
-                    $ae_loc.app_cfg.show_element__menu = true;
-                    $ae_loc.app_cfg.show_element__menu_btn = false;
-                } else {
-                    $ae_loc.app_cfg.show_element__menu = false;
-                    $ae_loc.app_cfg.show_element__menu_btn = true;
-                }
-            // $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
-            // $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
-        }}
-        >
-        {#if $ae_loc?.app_cfg?.show_element__menu}
-            <CircleX class="mx-1 inline-block" />
-            <!-- <span class="hidden"> -->
-                Hide Menu
-            <!-- </span> -->
-        {:else}
-            <Menu class="mx-1 inline-block" />
-            <!-- <span class="hidden"> -->
-                Menu
-            <!-- </span> -->
-        {/if}
-    </button>
+
+
+</div>
 
 </section>