Work on the system and debug menus

src/lib/ae_stores.ts

@@ -68,9 +68,10 @@ const ae_app_local_data_defaults: key_val = {
     browser_type: null, // Safari needs help with scrolling correctly in iframes.
     title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
 
-    debug_menu: false, // Flag show debug menu.
+    // debug_menu: false, // Flag show debug menu.
     debug_mode: false, // Flag to know if we should be in debug mode and show show debug options.
     edit_mode: false, // Flag to know if we should be in edit mode and show edit options.
+    // sys_menu: true, // Flag show system menu.
     sync_local_config: true, // Flag to know if we should sync local config with the remote API server.
 
     'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
@@ -163,6 +164,20 @@ const ae_app_local_data_defaults: key_val = {
         show_element__sql_qry_results: false,
     },
 
+    sys_menu: {
+        hide: false,
+        expand: false,
+        hide_access_type: false,
+        hide_edit_mode: false,
+        hide_user: false,
+        hide_theme: false,
+        hide_cfg: false,
+    },
+    debug_menu: {
+        hide: false,
+        expand: false,
+    },
+
     app_cfg: {
         show_element__header: false,
         show_element__footer: false,

src/lib/e_app_debug_menu.svelte

@@ -18,15 +18,15 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
 // *** Setup Svelte properties
 interface Props {
     log_lvl?: number;
-    show_debug_menu: boolean;
+    hide?: null|boolean;
-    hidden: null|boolean;
+    expand?: boolean;
 }
 
 let {
-    log_lvl = 0,
+    log_lvl = $bindable(0),
-    show_debug_menu = false,
+    hide = $bindable(false),
-    hidden = true,
+    expand = $bindable(false),
-    }: Props = $props();
+}: Props = $props();
 
 
 </script>
@@ -64,18 +64,18 @@ hover:opacity-100 -->
         border-red-300 dark:border-red-700
         hover:border-red-500 hover:dark:border-red-500
         "
-    class:top-0={$ae_loc?.debug_menu}
+    class:top-0={expand}
-    class:w-full={$ae_loc?.debug_menu}
+    class:w-full={expand}
-    class:hidden={!$ae_loc?.trusted_access}
+    class:hidden={hide}
-    class:border-transparent={!$ae_loc?.debug_menu}
+    class:border-transparent={!expand}
-    class:hover:border-transparent={!$ae_loc?.debug_menu}
+    class:hover:border-transparent={!expand}
-    class:hover:bg-transparent={!$ae_loc?.debug_menu}
+    class:hover:bg-transparent={!expand}
     >
 
     <div
-        class:hidden={!$ae_loc?.debug_menu}
+        class:hidden={!expand}
-        class:border-red-200={$ae_loc?.debug_menu}
+        class:border-red-200={expand}
-        class:dark:border-red-800={$ae_loc?.debug_menu}
+        class:dark:border-red-800={expand}
         class="
 
             transition-all
@@ -143,7 +143,8 @@ hover:opacity-100 -->
             type="button"
             onclick={() => {
                 console.log('Debug ae_loc:', $ae_loc);
-                $ae_loc.debug_menu = !$ae_loc?.debug_menu;
+                // $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
+                expand = !expand;
             }}
             class="
                 btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
@@ -166,7 +167,8 @@ hover:opacity-100 -->
         type="button"
         onclick={() => {
             console.log('Debug ae_loc:', $ae_loc);
-            $ae_loc.debug_menu = !$ae_loc?.debug_menu;
+            // $ae_loc.debug_menu.expand = !$ae_loc?.debug_menu?.expand;
+            expand = !expand;
         }}
         id="AE-Quick-Debug"
         class="

src/lib/e_app_sys_menu.svelte

@@ -32,16 +32,16 @@ import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
 interface Props {
     log_lvl?: number;
     data: any;
-    show_sys_menu: boolean;
+    hide?: null|boolean;
-    hidden: null|boolean;
+    expand?: boolean;
 }
 
 let {
-    log_lvl = 0,
+    log_lvl = $bindable(0),
     data = null,
-    show_sys_menu = false,
+    hide = $bindable(false),
-    hidden = true,
+    expand = $bindable(false),
-    }: Props = $props();
+}: Props = $props();
 
 let trigger_clear_access: null|boolean = $state(null);
 </script>
@@ -84,6 +84,8 @@ max-w-max -->
 <!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
 <section
     class="
+        ae_app__sys_menu
+
         hidden-print
         z-50
         absolute bottom-0 right-0

src/routes/+layout.svelte

@@ -109,6 +109,31 @@ let flag_denied: boolean = $state(false); // Access Denied
 // let flag_reason: string = $state(''); // Reason: New version, Expired Cache, Access Denied
 
 // BEGIN: Sanity Checks:
+// Added 2025-07-15
+if (!$ae_loc?.sys_menu) {
+    $ae_loc.sys_menu = {
+        hide: false,
+        expand: false,
+        hide_access_type: false,
+        expand_access_type: false,
+        hide_edit_mode: false,
+        expand_edit_mode: false,
+        hide_user: false,
+        expand_user: false,
+        hide_theme: false,
+        expand_theme: false,
+        hide_cfg: false,
+        expand_cfg: false,
+    };
+}
+// Added 2025-07-15
+if (!$ae_loc?.debug_menu) {
+    $ae_loc.debug_menu = {
+        hide: false,
+        expand: false,
+    };
+}
+
 if (!$ae_loc?.app_cfg) {
     flag_reload = true;
     flag_expired = true;
@@ -119,6 +144,7 @@ if (!$ae_loc?.app_cfg) {
     // $ae_loc.app_cfg.show_element__menu_btn = true;
     // $ae_loc.app_cfg.show_element__menu = false;
 }
+
 if (!$ae_loc?.ver) {
     flag_reload = true;
     flag_expired = true;
@@ -919,10 +945,17 @@ $effect(() => {
 {#if (browser) }
     <!-- Always show if Trusted access or higher. Do not show if in iframe mode. -->
     {#if !$ae_loc?.iframe || $ae_loc?.trusted_access}
-        <E_app_sys_menu data={data} />
+        <E_app_sys_menu
+            data={data}
+            hide={$ae_loc.sys_menu.hide}
+            expand={$ae_loc.sys_menu.expand}
+            />
 
         <!-- The app debug menu -->
-        <E_app_debug_menu />
+        <E_app_debug_menu
+            hide={$ae_loc.debug_menu.hide}
+            expand={$ae_loc.debug_menu.expand}
+            />
     {:else}
         <!-- Nothing to show -->
     {/if}