The new new new version of the system menu seems to be working pretty well. Wrapping up for the day.

src/lib/e_app_access_type.svelte

@@ -24,17 +24,19 @@ import { events_loc } from '$lib/ae_events_stores';
 // *** Setup Svelte properties
 interface Props {
     log_lvl?: number;
+    hide?: null|boolean;
+    expand?: boolean;
     show_passcode_input: boolean;
     trigger_clear_access: null|boolean;
-    hidden: null|boolean;
 }
 
 let {
-    log_lvl = 0,
+    log_lvl = $bindable(0),
-    show_passcode_input = false,
+    hide = $bindable(false),
-    trigger_clear_access = null,
+    expand = $bindable(false),
-    hidden = true,
+    show_passcode_input = $bindable(false),
-    }: Props = $props();
+    trigger_clear_access = $bindable(null),
+}: Props = $props();
 
 
 let entered_passcode: null|string = $state(null);
@@ -104,6 +106,7 @@ $effect(() => {
 
         $ae_loc = {...$ae_loc, ...access_checks_results};
         $ae_loc = $ae_loc;
+        $ae_loc.sys_menu.expand = false;
     } else if (trigger) {
         trigger = false;
         if (log_lvl) {
@@ -277,19 +280,21 @@ function handle_clear_access() {
         bg-blue-100 text-gray-900
         dark:bg-blue-800 dark:text-gray-200
 
-        duration-300 delay-150 hover:delay-1000 hover:ease-out
-        transition-all hover:transition-all
         flex flex-col flex-wrap gap-1
         items-end justify-center
+
         w-72 max-w-72
-        p-1 my-1
+        p-1
         border-2 border-gray-200
+
+        duration-300 delay-150 hover:delay-1000 hover:ease-out
+        transition-all
         "
-    class:hidden={hidden}
+    class:hidden={hide}
     >
 
+    <!-- class:hidden={!$ae_sess.show__sign_in_out__fields} -->
     <header
-        class:hidden={!$ae_sess.show__sign_in_out__fields}
         class="ae_header w-64 "
         >
         <h2 class="text-sm text-center font-semibold">
@@ -461,7 +466,7 @@ function handle_clear_access() {
                 onclick={() => {
                     // handle_clear_access();
                     // trigger_clear_access = true;
-                    show_passcode_input = !show_passcode_input;
+                    show_passcode_input = true;
                 }}
                 class="btn btn-sm variant-outline-surface hover:preset-tonal-warning border border-warning-500 transition-all"
                 title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
@@ -477,6 +482,7 @@ function handle_clear_access() {
                 onclick={() => {
                     // handle_clear_access();
                     trigger_clear_access = true;
+                    show_passcode_input = true;
                     // show_passcode_input = true;
                 }}
                 class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 transition-all"

src/lib/e_app_cfg.svelte

@@ -117,12 +117,15 @@ function handle_clear_storage(item: null|string) {
         bg-blue-100 text-gray-900
         dark:bg-blue-800 dark:text-gray-200
 
-        transition hover:transition-all
         flex flex-col flex-wrap gap-1
-        items-center justify-center
+        items-end justify-center
+
         w-72 max-w-72
-        p-1 my-1
+        p-1
         border-2 border-gray-200
+
+        duration-300 delay-150 hover:delay-1000 hover:ease-out
+        transition-all
         "
     class:hidden={hide}
     >
@@ -262,7 +265,6 @@ function handle_clear_storage(item: null|string) {
 class:justify-end={!expand} -->
 <div
     class="flex flex-row gap-2 items-center justify-between w-full"
-
     >
     <!-- {#if !expand} -->
     <span>
@@ -301,7 +303,7 @@ class:justify-end={!expand} -->
     <button
         class="
             ae_cfg_btn
-            btn btn-sm
+            btn btn-sm text-sm
             preset-tonal-warning
             group transition-all
             "
@@ -311,7 +313,7 @@ class:justify-end={!expand} -->
         >
         <!-- <span class="fas fa-cog m-1"></span> -->
         <span class="inline-block" title="Settings">
-        <Settings />
+        <Settings class="m-1" />
         </span>
         <span
             class="

src/lib/e_app_sign_in_out.svelte

@@ -349,48 +349,19 @@ async function handle_change_password() {
         bg-blue-100 text-gray-900
         dark:bg-blue-800 dark:text-gray-200
 
-        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
+
         w-72 max-w-72
-        p-1 my-1
+        p-1
         border-2 border-gray-200
+
+        duration-300 delay-150 hover:delay-1000 hover:ease-out
+        transition-all
         "
     class:hidden={hidden}
     >
-    <button
-        type="button"
-        class="btn btn-sm variant-outline-warning hover:preset-tonal-warning border border-warning-500 *:hover:inline w-full"
-        title="Sign In"
-        onclick={() => {
-            $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
-        }}
-        >
-        {#if $ae_loc?.person_id && $ae_loc?.user_id}
 
-            {#if $ae_sess.show__sign_in_out__fields}
-                <CircleX class="mx-1" />
-                Hide User Sign-In Options
-            {:else}
-                <User class="mx-1 inline-block text-gray-500" />
-                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
-            {/if}
-        {:else}
-
-            {#if $ae_sess.show__sign_in_out__fields}
-                <CircleX class="mx-1" />
-                Hide User Sign-In Options
-            {:else}
-                <!-- <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" /> -->
-                <UserLock size="1.25em" class="mx-1 inline-block text-gray-500" />
-                <!-- <User class="mx-1 inline-block text-gray-500" /> -->
-                <span class="hidden">
-                User Sign-In?
-                </span>
-            {/if}
-
-        {/if}
-    </button>
 
     <header
         class:hidden={!$ae_sess.show__sign_in_out__fields}
@@ -749,6 +720,82 @@ async function handle_change_password() {
 
     </span>
 
+
+<div
+    class="flex flex-row gap-2 items-center justify-between w-full"
+    >
+    <span>
+        {#if $ae_loc?.person_id && $ae_loc?.user_id}
+            <span class="fas fa-user mx-1 text-gray-500"></span>
+            {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
+        {:else}
+            <span class="fas fa-user-x mx-1 text-gray-500"></span>
+            Sign in?
+        {/if}
+    </span>
+
+    <button
+        type="button"
+        class="
+            btn btn-sm text-xs
+            variant-outline-warning hover:preset-tonal-warning
+            border border-warning-500 group
+            "
+        title="Sign In"
+        onclick={() => {
+            $ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
+        }}
+        >
+        {#if $ae_loc?.person_id && $ae_loc?.user_id}
+
+            {#if $ae_sess.show__sign_in_out__fields}
+                <CircleX class="m-1" />
+                <span
+                    class="
+                        cfg_text
+                        hidden
+                        group-hover:inline
+                        "
+                    >
+                    Hide Sign-In
+                </span>
+            {:else}
+                <User class="mx-1 inline-block text-gray-500" />
+                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
+            {/if}
+
+        {:else}
+
+            {#if $ae_sess.show__sign_in_out__fields}
+                <CircleX class="mx-1" />
+                <span
+                    class="
+                        cfg_text
+                        hidden
+                        group-hover:inline
+                        "
+                    >
+                    Hide Sign-In
+                </span>
+            {:else}
+                <!-- <LockKeyhole size="1.25em" class="mx-1 inline-block text-gray-500" /> -->
+                <UserLock size="1.25em" class="m-1 inline-block text-gray-500" />
+                <!-- <User class="mx-1 inline-block text-gray-500" /> -->
+                <span
+                    class="
+                        cfg_text
+                        hidden
+                        group-hover:inline
+                        "
+                    >
+                    User Sign-In
+                </span>
+            {/if}
+
+        {/if}
+    </button>
+</div>
+
 </section>
 
 <!-- Change Password Modal -->

src/lib/e_app_sys_menu.svelte

@@ -74,13 +74,13 @@ max-w-max -->
         transition hover:transition-all
         z-10 hover:z-20
     "
-    class:hidden={!$ae_loc?.sys_menu?.expand_btn}
+    class:hidden={!expand_btn}
     > -->
-<!-- && !$ae_loc?.sys_menu?.expand -->
+<!-- && !expand -->
     <!-- !$ae_loc
     ?.sys_menu?.expand_btn -->
 <!-- bg-blue-100/60 dark:bg-blue-800/50 -->
-<!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
+<!-- class:hover:border-transparent={!expand} -->
 <!-- mx-1 my-2 -->
 <!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
 <section
@@ -117,17 +117,18 @@ max-w-max -->
         duration-500 hover:duration-200
         ease-in-out
     "
-    class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
+    class:top-0={expand && 1 == 3}
-    class:w-full={$ae_loc?.sys_menu?.expand}
+    class:w-full={expand}
     class:hidden={false}
-    class:border-transparent={!$ae_loc?.sys_menu?.expand}
+    class:border-transparent={!expand}
 
-    class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
+    class:hover:bg-transparent={!expand}
     >
 
-
+<!-- class:hidden={!expand} -->
 <div
-    class:hidden={!$ae_loc?.expand && 1 == 3}
+    class:preset-filled-warning-100-900={expand}
+
     class:border-green-200={$ae_loc?.expand}
     class:dark:border-green-800={$ae_loc?.expand}
     class="
@@ -140,13 +141,11 @@ max-w-max -->
 
         w-full
 
-        bg-white/80 dark:dark-gray-800/80
+        bg-white/80
-        hover:bg-red-100/90 dark:hover:bg-gray-800/90
+        hover:bg-red-100/90 active:bg-red-200 focus:bg-red-300
+        dark:dark-gray-800/80 dark:hover:bg-gray-800/90
 
         relative
-        *:hover:inline
-        *:hover:visible
-        **:hover:visible
 
         opacity-70
         hover:opacity-100
@@ -155,32 +154,206 @@ max-w-max -->
         delay-1000 hover:delay-500
         duration-200 hover:duration-200
         ease-in-out
-        group
         "
     >
 
     {#if $ae_loc?.person_id || $ae_loc?.user_id}
-    <span
+    <!-- class:hidden={!expand}
-        class:hidden={!$ae_loc?.sys_menu?.expand}
+    class:hover:visible={expand}
-        class:hover:visible={$ae_loc?.sys_menu?.expand}
+    class:invisible={!expand} -->
-        class:invisible={!$ae_loc?.sys_menu?.expand}
+    <div
-        class="w-48"
+        class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
-
         title="
         Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
         Username: {$ae_loc?.user?.username ?? '-- not set --'}
         Email: {$ae_loc?.user?.email ?? '-- not set --'}
         "
         >
-        <User class="mx-1 inline-block text-gray-500" />
+        <span class="flex flex-row gap-1 w-32">
-        {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}<br />
+            <User class="mx-1 inline-block text-gray-500" />
-        <!-- <ShieldUser /> -->
+            <span
-        <ShieldUser class="mx-1 inline-block text-gray-500" />
+                class="group-hover:inline-block"
-        {$ae_loc?.user?.username ?? '-- not set --'}<br />
+                class:hidden={!expand}>
-    </span>
+                {$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
+            </span>
+        </span>
+
+        <span class:hidden={!expand}>
+            <!-- <ShieldUser /> -->
+            <ShieldUser class="mx-1 inline-block text-gray-500" />
+            <span>
+                {$ae_loc?.user?.username ?? '-- not set --'}
+            </span>
+        </span>
+    </div>
     {/if}
 
 
+    <div class="flex flex-row gap-1 items-center justify-between transition-all w-full">
+        {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
+            <span
+                class="flex flex-row gap-1 group"
+                title={`Current access type/level: ${$ae_loc.access_type}`}
+                >
+                <!-- <span class="fas fa-unlock mx-1"></span> -->
+                <!-- <ShieldPlus class="inline-block" /> -->
+
+
+                {#if $ae_loc.access_type == 'super'}
+                    <span class="fas fa-hat-wizard m-1"></span>
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Super</span>
+                {:else if $ae_loc.access_type == 'manager'}
+                    <span class="fas fa-user-shield m-1"></span>
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Manager</span>
+                {:else if $ae_loc.access_type == 'administrator'}
+                    <span class="fas fa-user-ninja m-1"></span>
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Administrator</span>
+                {:else if $ae_loc.access_type == 'trusted'}
+                    <span class="fas fa-user-check m-1"></span>
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Trusted Access</span>
+                {:else if $ae_loc.access_type == 'public'}
+                    Public
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Access</span>
+                {:else if $ae_loc.access_type == 'authenticated'}
+                    Authenticated
+                    <span
+                        class="hidden group-hover:inline-block"
+                        class:hidden={!expand}
+                        >Access</span>
+                {:else if $ae_loc.access_type == 'anonymous'}
+                    Anonymous Access
+                {:else}
+                    Unknown Access
+                {/if}
+            </span>
+
+            {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
+                <button
+                    type="button"
+                    onclick={() => {
+                        // handle_clear_access();
+                        // trigger_clear_access = true;
+                        // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
+
+                        if (!expand) {
+                            expand = true;
+                            $ae_loc.sys_menu.expand = true;
+                            $ae_loc.sys_menu.hide_access_type = false;
+                            $ae_loc.sys_menu.expand_access_type = true;
+                            // $ae_loc.sys_menu.expand_btn = false;
+                            // $ae_loc.app_cfg.show_element__access_type = true;
+                            // $ae_loc.app_cfg.show_element__passcode_input = true;
+                        } else {
+                            // expand = true;
+                            // $ae_loc.sys_menu.expand = false;
+                            $ae_loc.sys_menu.hide_access_type = false;
+                            $ae_loc.sys_menu.expand_access_type = true;
+
+                            // $ae_loc.sys_menu.expand_btn = true;
+                        }
+                    }}
+                    class="btn btn-sm text-xs variant-outline-surface hover:variant-ghost-warning transition-all group"
+                    title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
+                    >
+                    <!-- <span class="fas fa-lock mx-1"></span> -->
+                    <!-- <ShieldMinus /> -->
+                    <ShieldEllipsis class="inline-block" />
+                    <span class="hidden group-hover:inline-block">Passcode?</span>
+
+                </button>
+            {:else}
+                <button
+                    type="button"
+                    onclick={() => {
+                        trigger_clear_access = true;
+
+                        if (expand) {
+                            $ae_loc.sys_menu.hide_access_type = false;
+                            $ae_loc.sys_menu.expand_access_type = false;
+                            expand = false;
+
+                            // $ae_loc.sys_menu.expand = true;
+                            // $ae_loc.sys_menu.expand_btn = false;
+                            $ae_loc.app_cfg.show_element__access_type = true;
+                            $ae_loc.app_cfg.show_element__passcode_input = true;
+
+                            // await tick();
+                            // console.log('Layout button click: Focus on passcode input!');
+                            // /** @type {HTMLElement | null} */
+                            // const to_focus = document.getElementById('access_passcode_input');
+                            // to_focus?.focus();
+                        } else {
+                            $ae_loc.sys_menu.hide_access_type = false;
+                            $ae_loc.sys_menu.expand_access_type = true;
+                            // $ae_loc.sys_menu.expand = false;
+                            // $ae_loc.sys_menu.expand_btn = true;
+                        }
+                    }}
+                    class="
+                        btn btn-sm text-xs
+                        variant-outline-surface hover:variant-ghost-warning
+                        transition-all group
+                        "
+                    title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
+                    >
+                    <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
+                    <ShieldMinus class="inline-block" />
+                    <span class="hidden group-hover:inline-block">
+                        Clear?
+                    </span>
+                </button>
+            {/if}
+        {:else}
+            <button
+                    type="button"
+                    onclick={async () => {
+
+                        expand = true;
+                        $ae_loc.sys_menu.hide_access_type = false;
+                        $ae_loc.sys_menu.expand_access_type = true;
+
+                        // $ae_loc.sys_menu.expand = true;
+                        // $ae_loc.sys_menu.expand_btn = false;
+                        // $ae_loc.app_cfg.show_element__access_type = true;
+                        // $ae_loc.app_cfg.show_element__passcode_input = true;
+                        await tick();
+                        console.log('Layout button click: Focus on passcode input!');
+                        /** @type {HTMLElement | null} */
+                        const to_focus = document.getElementById('access_passcode_input');
+                        to_focus?.focus();
+
+                    }}
+                    class="
+                        btn btn-sm text-xs
+                        variant-outline-surface hover:variant-ghost-success
+                        transition-all group
+                        "
+                    title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
+                    >
+                <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
+                <!-- <span class="">Unlock?</span> -->
+                <ShieldUser class="inline-block" />
+                <span class="hidden group-hover:inline-block">Auth?</span>
+            </button>
+        {/if}
+    </div>
+
+
 
     {#if $ae_loc.edit_mode}
         <button
@@ -189,17 +362,20 @@ 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
+            class="
-
+                btn btn-sm text-xs
-            "
+                preset-tonal-warning
+                preset-outlined-warning-800-200
+                hover:preset-tonal-success
+                transition-all group
+                gap-1
+                "
             title="Edit mode is currently enabled. Click to disable."
             >
-            <span class=" *:hover:inline-block">
+            <span class="fas fa-toggle-on m-1 inline-block"></span>
-            <span class="fas fa-toggle-on mx-1 inline-block"></span>
+            <span class="">Edit</span>
-            Edit
+            <span class="hidden group-hover:inline-block">
-            <span class="hidden">
+                Mode
-                Mode On
-            </span>
             </span>
         </button>
     {:else if $ae_loc.authenticated_access}
@@ -209,164 +385,46 @@ max-w-max -->
                 $ae_loc.edit_mode = true;
                 // dispatch_edit_mode_changed();
             }}
-            class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
+            class="
+                btn btn-sm text-xs
+                preset-tonal-surface
+                preset-outlined-warning-400-600
+                hover:preset-tonal-warning
+                transition-all group
+                gap-1
+                "
             title="Edit mode is currently disabled. Click to enable."
             >
-            <span class="fas fa-toggle-off mx-1"></span>
+            <span class="fas fa-toggle-off m-1 inline"></span>
-            <span class="">Edit</span>
+            <span class="inline">Edit</span>
-            <span class="hidden">
+            <span class="hidden group-hover:inline">
                 Mode?
             </span>
         </button>
     {/if}
 
-    <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 flex flex-row gap-1 items-center justify-between"
-                    title={`Current access type/level: ${$ae_loc.access_type}`}
-                    >
-                    <!-- <span class="fas fa-unlock mx-1"></span> -->
-                    <!-- <ShieldPlus class="inline-block" /> -->
-
-
-                    {#if $ae_loc.access_type == 'super'}
-                        <span class="fas fa-hat-wizard m-1"></span>
-                        <span class="hidden">Super</span>
-                    {:else if $ae_loc.access_type == 'manager'}
-                        <span class="fas fa-user-shield m-1"></span>
-                        <span class="hidden">Manager</span>
-                    {:else if $ae_loc.access_type == 'administrator'}
-                        <span class="fas fa-user-ninja m-1"></span>
-                        <span class="hidden">Administrator</span>
-                    {:else if $ae_loc.access_type == 'trusted'}
-                        <span class="fas fa-user-check m-1"></span>
-                        <span class="hidden">Trusted Access</span>
-                    {:else if $ae_loc.access_type == 'public'}
-                        Public
-                        <span class="hidden">Access</span>
-                    {:else if $ae_loc.access_type == 'authenticated'}
-                        Authenticated
-                        <span class="hidden">Access</span>
-                    {:else if $ae_loc.access_type == 'anonymous'}
-                        Anonymous Access
-                    {:else}
-                        Unknown Access
-                    {/if}
-                </span>
-
-                {#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
-                    <button
-                        type="button"
-                        onclick={() => {
-                            // handle_clear_access();
-                            // trigger_clear_access = true;
-                            // $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
-
-                            if (!$ae_loc?.sys_menu?.expand) {
-                                $ae_loc.sys_menu.expand = true;
-                                // $ae_loc.sys_menu.expand_btn = false;
-                                $ae_loc.app_cfg.show_element__access_type = true;
-                                $ae_loc.app_cfg.show_element__passcode_input = true;
-                            } else {
-                                $ae_loc.sys_menu.expand = false;
-                                // $ae_loc.sys_menu.expand_btn = true;
-                            }
-                        }}
-                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
-                        title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
-                        >
-                        <!-- <span class="fas fa-lock mx-1"></span> -->
-                        <!-- <ShieldMinus /> -->
-                        <ShieldEllipsis class="inline-block" />
-                        <span class="hidden">Passcode?</span>
-
-                    </button>
-                {:else}
-                    <button
-                        type="button"
-                        onclick={() => {
-                            trigger_clear_access = true;
-
-                            if ($ae_loc?.sys_menu?.expand_btn) {
-                                $ae_loc.sys_menu.expand = true;
-                                $ae_loc.sys_menu.expand_btn = false;
-                                $ae_loc.app_cfg.show_element__access_type = true;
-                                $ae_loc.app_cfg.show_element__passcode_input = true;
-
-                                // await tick();
-                                // console.log('Layout button click: Focus on passcode input!');
-                                // /** @type {HTMLElement | null} */
-                                // const to_focus = document.getElementById('access_passcode_input');
-                                // to_focus?.focus();
-                            } else {
-                                $ae_loc.sys_menu.expand = false;
-                                $ae_loc.sys_menu.expand_btn = true;
-                            }
-                        }}
-                        class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
-                        title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
-                        >
-                        <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
-                        <ShieldMinus class="inline-block" />
-                        Clear?
-                    </button>
-                {/if}
-            {:else}
-                <button
-                        type="button"
-                        onclick={async () => {
-                            if ($ae_loc?.sys_menu?.expand_btn) {
-                                $ae_loc.sys_menu.expand = true;
-                                $ae_loc.sys_menu.expand_btn = false;
-                                $ae_loc.app_cfg.show_element__access_type = true;
-                                $ae_loc.app_cfg.show_element__passcode_input = true;
-                                await tick();
-                                console.log('Layout button click: Focus on passcode input!');
-                                /** @type {HTMLElement | null} */
-                                const to_focus = document.getElementById('access_passcode_input');
-                                to_focus?.focus();
-                            } else {
-                                $ae_loc.sys_menu.expand = false;
-                                $ae_loc.sys_menu.expand_btn = true;
-                            }
-                            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
-                        }}
-                        class="
-                            btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
-                            *:hover:inline
-                            "
-                        title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
-                        >
-                    <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
-                    <!-- <span class="">Unlock?</span> -->
-                    <ShieldUser class="inline-block" />
-                    <span class="hidden">Auth?</span>
-                </button>
-            {/if}
-        </div>
-    </span>
 
     <!-- <div> -->
-    <!-- class:visible={$ae_loc?.sys_menu?.expand} -->
+    <!-- class:visible={expand} -->
-    <!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
+    <!-- class:invisible={!expand} -->
     <!-- class:hover:visible={true} -->
     <!-- invisible -->
     <button
         type="button"
-        class:w-48={$ae_loc?.sys_menu?.expand}
+        class:w-full={expand}
-
         class="
             btn btn-sm
-            preset-tonal-tertiary hover:preset-filled-success active:preset-filled-success
+            preset-filled-tertiary-400-600
+            preset-outlined-tertiary-400-600
+            hover:preset-filled-success active:preset-filled-success
             px-6 py-1
-            invisible group-hover:visible groupx
+            transition-all group
             "
-        title="Show or hide the menu"
+        title="Show/Hide the system menu"
         onclick={async () => {
-            if (!$ae_loc?.sys_menu?.expand) {
+            if (!expand) {
-                $ae_loc.sys_menu.expand = true;
+                expand = true;
+                // $ae_loc.sys_menu.expand = true;
                 // $ae_loc.sys_menu.expand_btn = false;
                 $ae_loc.app_cfg.show_element__access_type = true;
 
@@ -382,26 +440,27 @@ max-w-max -->
                 const to_focus = document.getElementById('access_passcode_input');
                 to_focus?.focus();
             } else {
-                $ae_loc.sys_menu.expand = false;
+                expand = false;
+                // $ae_loc.sys_menu.expand = false;
                 // $ae_loc.sys_menu.expand_btn = true;
-                $ae_loc.app_cfg.show_element__passcode_input = false;
+                // $ae_loc.app_cfg.show_element__passcode_input = false;
             }
-            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
+            // $ae_loc.sys_menu.expand_btn = !expand_btn;
         }}
         >
-        <span class=" *:hover:inline-block">
+        <!-- <span class=""> -->
-        {#if $ae_loc?.sys_menu?.expand}
+        {#if expand}
-            <CircleX class="inline-block" />
+            <CircleX class="m-1 inline-block" />
-            <span class="inline-block">
+            <span class="hidden group-hover:inline-block">
                 Hide Menu
             </span>
         {:else}
-            <Menu class="inline-block" />
+            <Menu class="m-1 inline-block" />
-            <span class="hidden groupx-hover:inline-block">
+            <span class="hidden group-hover:inline-block">
                 Menu
             </span>
         {/if}
-        </span>
+        <!-- </span> -->
     </button>
     <!-- </div> -->
 
@@ -416,6 +475,8 @@ max-w-max -->
         <!-- hover:opacity-100 -->
          <!-- bg-white dark:bg-gray-800 -->
 <div
+    class:preset-filled-warning-200-800={expand}
+    class:hidden={!expand}
     class="
         ae_app__sys_menu
 
@@ -423,7 +484,7 @@ max-w-max -->
         flex flex-col
         items-end
         justify-end
-        gap-4
+        gap-2
 
         min-w-48
 
@@ -440,35 +501,43 @@ max-w-max -->
 
         z-20 hover:z-30
     "
-    class:hidden={!$ae_loc?.sys_menu?.expand}
     >
 
     <button
         type="button"
-        class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *:hover:inline px-6 py-1"
+        class:w-full={expand}
-        title="Sign In"
+        class="
+            btn btn-sm
+            preset-filled-tertiary-400-600
+            preset-outlined-tertiary-400-600
+            hover:preset-filled-success active:preset-filled-success
+            px-6 py-1
+            transition-all group
+            "
+        title="Show/Hide the system menu"
         onclick={() => {
-            if (!$ae_loc?.sys_menu?.expand) {
+            if (!expand) {
+                    expand = true;
                     $ae_loc.sys_menu.expand = true;
                     // $ae_loc.sys_menu.expand_btn = false;
                 } else {
                     $ae_loc.sys_menu.expand = false;
                     // $ae_loc.sys_menu.expand_btn = true;
                 }
-            // $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
+            // $ae_loc.sys_menu.expand_btn = !expand_btn;
-            // $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
+            // $ae_loc.sys_menu.expand = !expand;
         }}
         >
-        {#if $ae_loc?.sys_menu?.expand}
+        {#if expand}
-            <CircleX class="mx-1 inline-block" />
+            <CircleX class="m-1 inline-block" />
-            <!-- <span class="hidden"> -->
+            <span class="hidden group-hover:inline-block">
                 Hide Menu
-            <!-- </span> -->
+            </span>
         {:else}
-            <Menu class="mx-1 inline-block" />
+            <Menu class="m-1 inline-block" />
-            <!-- <span class="hidden"> -->
+            <span class="hidden group-hover:inline-block">
                 Menu
-            <!-- </span> -->
+            </span>
         {/if}
     </button>
 
@@ -480,15 +549,16 @@ max-w-max -->
         hide={$ae_loc.sys_menu.hide_app_cfg}
         expand={$ae_loc.sys_menu.expand_app_cfg}
         />
-
+    </span>
+    <span
+        class:hidden={!$ae_loc.edit_mode}
+        >
     <Element_theme
         hide={$ae_loc.sys_menu.hide_app_cfg}
         expand={$ae_loc.sys_menu.expand_app_cfg}
         set_theme_mode={true}
         set_theme_name={true}
-    />
+        />
-
-    <!-- END: Theme -->
     </span>
     <!-- {/if} -->
 
@@ -501,13 +571,13 @@ max-w-max -->
         />
     {/if}
 
-    {#if $ae_loc?.app_cfg?.show_element__access_type}
+    {#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
+    <!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
     <Element_access_type
-        hide={$ae_loc.sys_menu.hide_access_type}
+        bind:hide={$ae_loc.sys_menu.hide_access_type}
-        expand={$ae_loc.sys_menu.expand_access_type}
+        bind:expand={$ae_loc.sys_menu.expand_access_type}
-        show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
+        bind:show_passcode_input={$ae_loc.app_cfg.show_element__passcode_input}
-        trigger_clear_access={trigger_clear_access}
+        bind:trigger_clear_access={trigger_clear_access}
-        hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
         />
     {/if}
 

src/lib/e_app_theme.svelte

@@ -44,17 +44,26 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
         dark:bg-blue-800 dark:text-gray-200
 
         flex flex-col flex-wrap gap-1
-        items-end justify-end
+        items-end justify-center
+
         w-72 max-w-72
-        p-1 my-1
+        p-1
         border-2 border-gray-200
+
+        duration-300 delay-150 hover:delay-1000 hover:ease-out
         transition-all
         "
     class:hidden={hide}
     >
 
-<div>
+<div
+    class:hidden={!expand}
+    class="flex flex-row flex-wrap gap-2 items-center justify-between w-full"
+    >
     <!-- Theme Name: -->
+    <span class="text-sm font-semibold">
+    {$ae_loc.theme_name}
+    </span>
     <select
         onchange={(event) => {
             // $slct_trigger = 'set_theme_name';
@@ -80,8 +89,7 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
             // }
         }}
         bind:value={$ae_loc.theme_name}
-        class="select"
+        class="select w-32"
-        class:hidden={!expand}
         title="Theme name"
         >
         <option value="">-- None --</option>
@@ -158,10 +166,10 @@ if ($ae_loc.app_cfg.theme_mode == 'light') {
             >
             <!-- <span class="fas fa-adjust"></span> -->
             {#if $ae_loc.theme_mode == 'light'}
-                <Sun />
+                <Sun class="m-1" />
                 <span class="hidden md:inline-block group-hover:inline-block">Light Mode</span>
             {:else if $ae_loc.theme_mode == 'dark'}
-                <Moon />
+                <Moon class="m-1" />
                 <span class="hidden group-hover:inline-block">Dark Mode</span>
             {/if}
             <span

src/routes/+layout.svelte

@@ -947,8 +947,8 @@ $effect(() => {
     {#if !$ae_loc?.iframe || $ae_loc?.trusted_access}
         <E_app_sys_menu
             data={data}
-            hide={$ae_loc.sys_menu.hide}
+            bind:hide={$ae_loc.sys_menu.hide}
-            expand={$ae_loc.sys_menu.expand}
+            bind:expand={$ae_loc.sys_menu.expand}
             />
 
         <!-- The app debug menu -->