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
+})