feat: hide AE menu by default in iframe mode; add show_menu override

iframe=true now hides the sys bar for all users (previously trusted_access
users still saw it). Admins can pass show_menu=true to re-enable it while
testing an embedded page like video_conferences.

hide_menu=true remains for non-iframe hide use cases (kiosk, etc).

Updated URL builder: hide_menu checkbox → show_menu checkbox.
Updated GUIDE__Development.md URL params table.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-17 20:18:09 -04:00
parent c1f96ba94e
commit ec5b09dfaa
3 changed files with 24 additions and 16 deletions

View File

@@ -55,8 +55,9 @@ URL params consumed by the app. Params are read by layouts and applied on mount.
| Param | Values | Effect |
| --- | --- | --- |
| `iframe` | `true` / `false` | Enables iframe mode — hides sys bar for non-trusted users, suppresses sign-in/passcode UI |
| `hide_menu` | `true` | Hides the AE system bar entirely, even for trusted_access users. Use when embedding in Novi or pages with their own navigation. |
| `iframe` | `true` / `false` | Enables iframe mode — hides the AE system bar for all users by default, suppresses sign-in/passcode UI |
| `show_menu` | `true` | Override: show the AE system bar inside an iframe. Intended for admins/trusted users who need menu access while testing an embed. |
| `hide_menu` | `true` | Explicitly hide the AE system bar outside of iframe mode (e.g. fullscreen kiosk pages). |
| `theme` | theme name | Applies a theme on load, then removes param from URL (no history entry) |
| `theme_mode` | `light` / `dark` | Applies theme mode on load, then removes param from URL |

View File

@@ -251,16 +251,23 @@
// Iframe Detection
let iframe = data.url.searchParams.get('iframe');
if (iframe === 'true') $ae_loc.iframe = true;
else if (iframe === 'false') $ae_loc.iframe = false;
// hide_menu=true — suppress the AE system bar when embedding in Novi or
// other host pages with their own navigation. Applies even for trusted_access
// users who would otherwise always see the menu in iframe mode.
if (data.url.searchParams.get('hide_menu') === 'true') {
if (iframe === 'true') {
$ae_loc.iframe = true;
// Hide the AE system bar by default in iframe embeds — it's nav chrome
// the host page doesn't need. Trusted admins can override with show_menu=true
// to access the menu while testing an embedded page (e.g. video_conferences).
$ae_loc.sys_menu.hide = true;
} else if (iframe === 'false') {
$ae_loc.iframe = false;
}
// show_menu=true — override to show the AE system bar even inside an iframe.
// Intended for trusted/admin users who need menu access while testing an embed.
// hide_menu=true — explicitly hide the bar outside of iframe contexts.
const menu_override = data.url.searchParams.get('show_menu');
if (menu_override === 'true') $ae_loc.sys_menu.hide = false;
else if (data.url.searchParams.get('hide_menu') === 'true') $ae_loc.sys_menu.hide = true;
// Theme URL params — ?theme=AE_Firefly_SteelBlue&theme_mode=dark
// Applied once on load, then silently removed from the URL (no history entry).
const url_theme = data.url.searchParams.get('theme');

View File

@@ -36,8 +36,8 @@
let disable_reaction = $state(true);
let disable_raise_hand = $state(true);
// Toggle to hide AE system menu when embedding in other pages
let hide_ae_menu = $state(false);
// show_menu=true overrides the default iframe hide — for admins testing the embed
let show_ae_menu = $state(false);
let show_advanced = $state(false);
let show_sound = $state(false);
@@ -67,8 +67,8 @@
if (disable_participant_left) p.set('participant_left_sound', 'true');
if (disable_reaction) p.set('reaction_sound', 'true');
if (disable_raise_hand) p.set('raise_hand_sound', 'true');
// AE embed option: hide AE system menu when embedding in other pages
if (hide_ae_menu) p.set('hide_menu', 'true');
// AE embed: iframe=true hides the menu by default; show_menu=true lets admins override
if (show_ae_menu) p.set('show_menu', 'true');
return `${effective_base}?${p.toString()}`;
});
@@ -226,12 +226,12 @@
<label class="flex items-center gap-2 cursor-pointer w-fit">
<input
type="checkbox"
bind:checked={hide_ae_menu}
bind:checked={show_ae_menu}
class="checkbox checkbox-sm"
/>
<span class="text-xs"
>Hide AE system menu <span class="opacity-40"
>(hide_menu=true)</span
>Show AE system menu <span class="opacity-40"
>(show_menu=true)</span
></span
>
</label>