From c9b8bdf42faf13631cbfdeaaebf0441e22023869 Mon Sep 17 00:00:00 2001 From: Supun Wimalasena Date: Sun, 19 Jul 2026 20:20:18 +0200 Subject: [PATCH 1/7] embedded Console --- frontend/src/routes/console/+layout.svelte | 26 ++++++- .../routes/console/@components/Nav/Nav.svelte | 21 ++++-- .../@components/Nav/NewsletterNav.svelte | 74 ++++++++++++++----- frontend/src/routes/console/lib/embedded.ts | 17 +++++ 4 files changed, 109 insertions(+), 29 deletions(-) create mode 100644 frontend/src/routes/console/lib/embedded.ts diff --git a/frontend/src/routes/console/+layout.svelte b/frontend/src/routes/console/+layout.svelte index ce59aa77d..fb35304c5 100644 --- a/frontend/src/routes/console/+layout.svelte +++ b/frontend/src/routes/console/+layout.svelte @@ -5,6 +5,7 @@ Loader, toast } from '@hyvor/design/components'; + import { isEmbedded } from './lib/embedded'; import { CloudContext, type CloudContextOrganization, @@ -46,6 +47,11 @@ let isLoading = $state(true); function startConsole(switchingOrg = false) { + if (page.url.searchParams.has('embedded')) { + $isEmbedded = true; + document.body.style.backgroundColor = 'transparent'; + } + consoleApi .get({ userApi: true, @@ -105,7 +111,7 @@ } ]} > -
+
{#if isLoading}
@@ -135,7 +141,10 @@ }} style="display:flex; flex-direction: column; width: 100%; height: 100vh" > - + + {#if !$isEmbedded} + + {/if} {@render children?.()} {/if} @@ -159,4 +168,17 @@ justify-content: center; align-items: center; } + + main.embedded :global(#nav-wrap) { + height: 100%; + } + main.embedded :global(#nav-wrap > .newsletter-nav) { + flex: 1; + } + main.embedded :global(#nav-wrap > .newsletter-nav > .wrap) { + height: 100%; + } + main.embedded :global(#nav-wrap > .newsletter-nav > .wrap) { + height: 100%; + } diff --git a/frontend/src/routes/console/@components/Nav/Nav.svelte b/frontend/src/routes/console/@components/Nav/Nav.svelte index 974887af7..b36a91484 100644 --- a/frontend/src/routes/console/@components/Nav/Nav.svelte +++ b/frontend/src/routes/console/@components/Nav/Nav.svelte @@ -2,22 +2,27 @@ import { DarkToggle, LanguageToggle } from '@hyvor/design/components'; import AccountNav from './AccountNav.svelte'; import NewsletterNav from './NewsletterNav.svelte'; + import { isEmbedded } from '../../lib/embedded';