More work on the menus...

src/lib/ae_stores.ts

@@ -343,6 +343,10 @@ let ae_app_session_data_defaults: key_val = {
         hide_quick_info: true
     },
 
+    app_cfg: {
+        show_element__passcode_input: true,
+    },
+
     'ds': {
         'submit_status': null,
     },

src/lib/e_app_access_type.svelte

@@ -283,7 +283,7 @@ function handle_clear_access() {
         flex flex-col flex-wrap gap-1
         items-end justify-center
 
-        w-72 max-w-72
+        w-full
         p-1
         border-2 border-gray-200
 
@@ -295,7 +295,7 @@ function handle_clear_access() {
 
     <!-- class:hidden={!$ae_sess.show__sign_in_out__fields} -->
     <header
-        class="ae_header w-64 hidden"
+        class="ae_header hidden"
         >
         <h2 class="text-sm text-center font-semibold">
             Passcode Sign In
@@ -400,7 +400,7 @@ function handle_clear_access() {
     {/if}
     </div>
 
-    <div class="transition-all flex flex-row flex-wrap gap-1 items-end justify-end">
+    <div class="flex flex-row flex-wrap gap-1 items-end justify-end w-full transition-all">
 
     {#if $ae_loc?.access_type && $ae_loc?.access_type == 'anonymous' && 1==3}
         <span>
@@ -497,9 +497,11 @@ function handle_clear_access() {
     {/if}
 
     {#if (show_passcode_input)}
-    <span class="flex flex-row gap-1 items-center justify-center">
+    <span class="flex flex-row gap-1 items-center justify-between w-full">
-        <ShieldEllipsis class="inline-block" />
+        <span>
-        <span class="unlock_text">Passcode:</span>
+        <ShieldEllipsis class="inline-block text-gray-500" />
+        <span class="unlock_text text-sm">Passcode:</span>
+        </span>
 
         <!-- svelte-ignore a11y_autofocus -->
         <input

src/lib/e_app_sign_in_out.svelte

@@ -12,6 +12,7 @@ import {
     Key,
     LogIn, LogOut, LockKeyhole,
     Mail, MailCheck,
+    ShieldUser,
     User, UserCheck, UserLock
     } from '@lucide/svelte';
 
@@ -722,15 +723,16 @@ async function handle_change_password() {
 
 
 <div
-    class="flex flex-row gap-2 items-center justify-between w-full"
+    class="flex flex-row gap-1 items-center justify-between w-full transition-all"
     >
     <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>
+            <!-- <span class="fas fa-user-x mx-1 text-gray-500"></span> -->
-            Sign in?
+            <ShieldUser class="inline-block text-gray-500" />
+            User sign in:
         {/if}
     </span>
 
@@ -744,6 +746,9 @@ async function handle_change_password() {
         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_sess.show__sign_in_out__fields) {
+                $ae_sess.app_cfg.show_element__passcode_input = true;
+            }
         }}
         >
         {#if $ae_loc?.person_id && $ae_loc?.user_id}

src/lib/e_app_sys_menu.svelte

@@ -93,7 +93,6 @@ max-w-max -->
 
         opacity-90
         hover:opacity-100
-        active:opacity-100
 
         w-min
         max-w-md
@@ -118,10 +117,10 @@ max-w-max -->
         ease-in-out
     "
     class:top-0={expand && 1 == 3}
+    class:opacity-100={expand}
     class:w-full={expand}
     class:hidden={false}
     class:border-transparent={!expand}
-
     class:hover:bg-transparent={!expand}
     >
 
@@ -292,7 +291,7 @@ max-w-max -->
                             // $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;
+                            $ae_sess.app_cfg.show_element__passcode_input = true;
 
                             // await tick();
                             // console.log('Layout button click: Focus on passcode input!');
@@ -367,7 +366,7 @@ max-w-max -->
                 // dispatch_edit_mode_changed();
             }}
             class="
-                btn btn-sm text-xs
+                btn btn-base text-sm
                 preset-tonal-warning
                 preset-outlined-warning-800-200
                 hover:preset-tonal-success
@@ -390,12 +389,13 @@ max-w-max -->
                 // dispatch_edit_mode_changed();
             }}
             class="
-                btn btn-sm text-xs
+                btn btn-base text-sm
                 preset-tonal-surface
                 preset-outlined-warning-400-600
                 hover:preset-tonal-warning
                 transition-all group
                 gap-1
+                min-w-24
                 "
             title="Edit mode is currently disabled. Click to enable."
             >
@@ -417,11 +417,12 @@ max-w-max -->
         type="button"
         class:w-full={expand}
         class="
-            btn btn-sm
+            btn btn-base text-sm
             preset-filled-tertiary-400-600
             preset-outlined-tertiary-400-600
             hover:preset-filled-success active:preset-filled-success
             px-6 py-1
+            min-w-24
             transition-all group
             "
         title="Show/Hide the system menu"
@@ -433,9 +434,9 @@ max-w-max -->
                 $ae_loc.app_cfg.show_element__access_type = true;
 
                 if ($ae_loc?.access_type == 'anonymous') {
-                    $ae_loc.app_cfg.show_element__passcode_input = true;
+                    $ae_sess.app_cfg.show_element__passcode_input = true;
                 } else {
-                    $ae_loc.app_cfg.show_element__passcode_input = false;
+                    $ae_sess.app_cfg.show_element__passcode_input = false;
                 }
                 // $ae_loc.app_cfg.show_element__passcode_input = true;
                 await tick();
@@ -580,7 +581,7 @@ max-w-max -->
     <Element_access_type
         bind:hide={$ae_loc.sys_menu.hide_access_type}
         bind:expand={$ae_loc.sys_menu.expand_access_type}
-        bind:show_passcode_input={$ae_loc.app_cfg.show_element__passcode_input}
+        bind:show_passcode_input={$ae_sess.app_cfg.show_element__passcode_input}
         bind:trigger_clear_access={trigger_clear_access}
         />
     {/if}