diff --git a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte index 8baf7609d0..0077c0acc9 100644 --- a/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte +++ b/packages/builder/src/pages/builder/portal/_components/MobileMenu.svelte @@ -6,9 +6,9 @@ import UpgradeButton from "./UpgradeButton.svelte" import { fade } from "svelte/transition" import Logo from "./Logo.svelte" + import { menu } from "stores/portal" export let visible = false - export let menu const dispatch = createEventDispatcher() @@ -28,13 +28,28 @@ - {#each menu as { title, href }} - + {#each $menu as { title, href, subPages }} + {#if !subPages?.length} + + {/if} + {/each} + {#each $menu as { title, href, subPages }} + {#if subPages?.length} +
{title}
+ {#each subPages as { title, href }} + + {/each} + {/if} {/each}
@@ -47,6 +62,13 @@ .mobile-nav { display: none; } + .category { + color: var(--spectrum-global-color-gray-600); + font-size: var(--font-size-s); + margin-left: var(--spacing-m); + margin-top: 24px; + margin-bottom: 4px; + } @media (max-width: 640px) { .mobile-nav-underlay { diff --git a/packages/builder/src/pages/builder/portal/_layout.svelte b/packages/builder/src/pages/builder/portal/_layout.svelte index 9048502550..8cc5f5c79e 100644 --- a/packages/builder/src/pages/builder/portal/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/_layout.svelte @@ -1,9 +1,8 @@
- - - - {#if $admin.cloud && $auth?.user?.accountPortalAccess} - - {:else if !$admin.cloud && admin} - - {/if} - - {#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/settings/_layout.svelte b/packages/builder/src/pages/builder/portal/settings/_layout.svelte index 57410bcaeb..ec26ca5754 100644 --- a/packages/builder/src/pages/builder/portal/settings/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/settings/_layout.svelte @@ -1,38 +1,20 @@
- - - - {#if !$admin.cloud} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/users/_layout.svelte b/packages/builder/src/pages/builder/portal/users/_layout.svelte index 79d749f21c..97de1eeabf 100644 --- a/packages/builder/src/pages/builder/portal/users/_layout.svelte +++ b/packages/builder/src/pages/builder/portal/users/_layout.svelte @@ -1,28 +1,20 @@
- - {#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)} - - {/if} + {#each pages as { title, href }} + + {/each}
diff --git a/packages/builder/src/pages/builder/portal/users/index.svelte b/packages/builder/src/pages/builder/portal/users/index.svelte new file mode 100644 index 0000000000..4dbb81f7c6 --- /dev/null +++ b/packages/builder/src/pages/builder/portal/users/index.svelte @@ -0,0 +1,4 @@ + diff --git a/packages/builder/src/stores/portal/index.js b/packages/builder/src/stores/portal/index.js index 81d26b900e..9a27604034 100644 --- a/packages/builder/src/stores/portal/index.js +++ b/packages/builder/src/stores/portal/index.js @@ -11,3 +11,4 @@ export { groups } from "./groups" export { plugins } from "./plugins" export { backups } from "./backups" export { overview } from "./overview" +export { menu } from "./menu" diff --git a/packages/builder/src/stores/portal/menu.js b/packages/builder/src/stores/portal/menu.js new file mode 100644 index 0000000000..54ed4bdba8 --- /dev/null +++ b/packages/builder/src/stores/portal/menu.js @@ -0,0 +1,120 @@ +import { derived } from "svelte/store" +import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" +import { admin } from "./admin" +import { auth } from "./auth" + +export const menu = derived([admin, auth], ([$admin, $auth]) => { + // Standard user and developer pages + let menu = [ + { + title: "Apps", + href: "/builder/portal/apps", + }, + { + title: "Plugins", + href: "/builder/portal/plugins", + }, + ] + + // Admin only pages + if ($auth.isAdmin) { + // Determine user sub pages + let userSubPages = [ + { + title: "Users", + href: "/builder/portal/users/users", + }, + ] + if (isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)) { + userSubPages.push({ + title: "Groups", + href: "/builder/portal/users/groups", + }) + } + + // Determine settings sub pages + let settingsSubPages = [ + { + title: "Auth", + href: "/builder/portal/settings/auth", + }, + { + title: "Email", + href: "/builder/portal/settings/email", + }, + { + title: "Organisation", + href: "/builder/portal/settings/organisation", + }, + ] + if (!$admin.cloud) { + settingsSubPages.push({ + title: "Version", + href: "/builder/portal/settings/version", + }) + } + + menu = [ + { + title: "Apps", + href: "/builder/portal/apps", + }, + { + title: "Users", + href: "/builder/portal/users", + subPages: userSubPages, + }, + { + title: "Plugins", + href: "/builder/portal/plugins", + }, + { + title: "Settings", + href: "/builder/portal/settings", + subPages: settingsSubPages, + }, + ] + } + + // Check if allowed access to account section + if ( + isEnabled(TENANT_FEATURE_FLAGS.LICENSING) && + ($auth?.user?.accountPortalAccess || (!$admin.cloud && $auth.isAdmin)) + ) { + // Determine account sub pages + let accountSubPages = [ + { + title: "Usage", + href: "/builder/portal/account/usage", + }, + ] + if ($admin.cloud && $auth?.user?.accountPortalAccess) { + accountSubPages.push({ + title: "Upgrade", + href: $admin.accountPortalUrl + "/portal/upgrade", + }) + } else if (!$admin.cloud && admin) { + accountSubPages.push({ + title: "Upgrade", + href: "/builder/portal/account/upgrade", + }) + } + if ( + $auth?.user?.accountPortalAccess && + $auth.user.account.stripeCustomerId + ) { + accountSubPages.push({ + title: "Billing", + href: $admin.accountPortalUrl + "/portal/billing", + }) + } + + menu.push({ + title: "Account", + href: "/builder/portal/account", + subPages: accountSubPages, + }) + } + + return menu +})