Centralise menu logic and show full menu on mobile
This commit is contained in:
parent
abd84118d9
commit
5d24fe0a13
8 changed files with 179 additions and 130 deletions
|
@ -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 @@
|
|||
<Logo />
|
||||
</div>
|
||||
<SideNav>
|
||||
{#each menu as { title, href }}
|
||||
<SideNavItem
|
||||
text={title}
|
||||
url={href}
|
||||
active={$isActive(href)}
|
||||
on:click={close}
|
||||
/>
|
||||
{#each $menu as { title, href, subPages }}
|
||||
{#if !subPages?.length}
|
||||
<SideNavItem
|
||||
text={title}
|
||||
url={href}
|
||||
active={$isActive(href)}
|
||||
on:click={close}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each $menu as { title, href, subPages }}
|
||||
{#if subPages?.length}
|
||||
<div class="category">{title}</div>
|
||||
{#each subPages as { title, href }}
|
||||
<SideNavItem
|
||||
text={title}
|
||||
url={href}
|
||||
active={$isActive(href)}
|
||||
on:click={close}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
{/each}
|
||||
</SideNav>
|
||||
<div>
|
||||
|
@ -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 {
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
<script>
|
||||
import { isActive, redirect, goto, url } from "@roxi/routify"
|
||||
import { Icon, notifications, Tabs, Tab } from "@budibase/bbui"
|
||||
import { organisation, auth, admin as adminStore } from "stores/portal"
|
||||
import { organisation, auth, menu } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
import UpgradeButton from "./_components/UpgradeButton.svelte"
|
||||
import MobileMenu from "./_components/MobileMenu.svelte"
|
||||
import Logo from "./_components/Logo.svelte"
|
||||
|
@ -13,10 +12,9 @@
|
|||
let mobileMenuVisible = false
|
||||
let activeTab = "Apps"
|
||||
|
||||
$: menu = buildMenu($auth.isAdmin)
|
||||
$: $url(), updateActiveTab()
|
||||
$: $url(), updateActiveTab($menu)
|
||||
|
||||
const updateActiveTab = () => {
|
||||
const updateActiveTab = menu => {
|
||||
for (let entry of menu) {
|
||||
if ($isActive(entry.href)) {
|
||||
if (activeTab !== entry.title) {
|
||||
|
@ -27,55 +25,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
const buildMenu = admin => {
|
||||
// Standard user and developer pages
|
||||
let menu = [
|
||||
{
|
||||
title: "Apps",
|
||||
href: "/builder/portal/apps",
|
||||
},
|
||||
{
|
||||
title: "Plugins",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
]
|
||||
|
||||
// Admin only pages
|
||||
if (admin) {
|
||||
menu = [
|
||||
{
|
||||
title: "Apps",
|
||||
href: "/builder/portal/apps",
|
||||
},
|
||||
{
|
||||
title: "Users",
|
||||
href: "/builder/portal/users/users",
|
||||
},
|
||||
{
|
||||
title: "Plugins",
|
||||
href: "/builder/portal/plugins",
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
href: "/builder/portal/settings",
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
// Check if allowed access to account section
|
||||
if (
|
||||
isEnabled(TENANT_FEATURE_FLAGS.LICENSING) &&
|
||||
($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin))
|
||||
) {
|
||||
menu.push({
|
||||
title: "Account",
|
||||
href: "/builder/portal/account",
|
||||
})
|
||||
}
|
||||
|
||||
return menu
|
||||
}
|
||||
|
||||
const showMobileMenu = () => (mobileMenuVisible = true)
|
||||
const hideMobileMenu = () => (mobileMenuVisible = false)
|
||||
|
||||
|
@ -104,7 +53,7 @@
|
|||
</div>
|
||||
<div class="desktop">
|
||||
<Tabs selected={activeTab}>
|
||||
{#each menu as { title, href }}
|
||||
{#each $menu as { title, href }}
|
||||
<Tab {title} on:click={() => $goto(href)} />
|
||||
{/each}
|
||||
</Tabs>
|
||||
|
@ -122,7 +71,7 @@
|
|||
<div class="main">
|
||||
<slot />
|
||||
</div>
|
||||
<MobileMenu visible={mobileMenuVisible} {menu} on:close={hideMobileMenu} />
|
||||
<MobileMenu visible={mobileMenuVisible} on:close={hideMobileMenu} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
|
|
@ -1,40 +1,19 @@
|
|||
<script>
|
||||
import { url, isActive } from "@roxi/routify"
|
||||
import { isActive } from "@roxi/routify"
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||
import { admin, auth } from "stores/portal"
|
||||
import { menu } from "stores/portal"
|
||||
|
||||
$: pages = $menu.find(x => x.title === "Account").subPages
|
||||
</script>
|
||||
|
||||
<Page narrow>
|
||||
<Content>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<!-- Always show usage in self-host or cloud if licensing enabled-->
|
||||
<SideNavItem
|
||||
text="Usage"
|
||||
url={$url("./usage")}
|
||||
active={$isActive("./usage")}
|
||||
/>
|
||||
<!-- Show the relevant hosting upgrade page-->
|
||||
{#if $admin.cloud && $auth?.user?.accountPortalAccess}
|
||||
<SideNavItem
|
||||
text="Upgrade"
|
||||
url={$admin.accountPortalUrl + "/portal/upgrade"}
|
||||
/>
|
||||
{:else if !$admin.cloud && admin}
|
||||
<SideNavItem
|
||||
text="Upgrade"
|
||||
url={$url("./upgrade")}
|
||||
active={$isActive("./upgrade")}
|
||||
/>
|
||||
{/if}
|
||||
<!-- Show the billing page to licensed account holders in cloud -->
|
||||
{#if $auth?.user?.accountPortalAccess && $auth.user.account.stripeCustomerId}
|
||||
<SideNavItem
|
||||
text="Billing"
|
||||
url={$admin.accountPortalUrl + "/portal/billing"}
|
||||
/>
|
||||
{/if}
|
||||
{#each pages as { title, href }}
|
||||
<SideNavItem text={title} url={href} active={$isActive(href)} />
|
||||
{/each}
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
|
|
|
@ -1,38 +1,20 @@
|
|||
<script>
|
||||
import { url, isActive } from "@roxi/routify"
|
||||
import { isActive } from "@roxi/routify"
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { Content, SideNav, SideNavItem } from "components/portal/page"
|
||||
import { admin } from "stores/portal"
|
||||
import { menu } from "stores/portal"
|
||||
|
||||
$: wide = $isActive("./email/:template")
|
||||
$: pages = $menu.find(x => x.title === "Settings").subPages
|
||||
</script>
|
||||
|
||||
<Page>
|
||||
<Content narrow={!wide}>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<SideNavItem
|
||||
text="Auth"
|
||||
url={$url("./auth")}
|
||||
active={$isActive("./auth")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Email"
|
||||
url={$url("./email")}
|
||||
active={$isActive("./email")}
|
||||
/>
|
||||
<SideNavItem
|
||||
text="Organisation"
|
||||
url={$url("./organisation")}
|
||||
active={$isActive("./organisation")}
|
||||
/>
|
||||
{#if !$admin.cloud}
|
||||
<SideNavItem
|
||||
text="Version"
|
||||
url={$url("./version")}
|
||||
active={$isActive("./version")}
|
||||
/>
|
||||
{/if}
|
||||
{#each pages as { title, href }}
|
||||
<SideNavItem text={title} url={href} active={$isActive(href)} />
|
||||
{/each}
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
|
|
|
@ -1,28 +1,20 @@
|
|||
<script>
|
||||
import { Page } from "@budibase/bbui"
|
||||
import { SideNav, SideNavItem, Content } from "components/portal/page"
|
||||
import { isActive, url } from "@roxi/routify"
|
||||
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
|
||||
import { isActive } from "@roxi/routify"
|
||||
import { menu } from "stores/portal"
|
||||
|
||||
$: wide = $isActive("./users/index") || $isActive("./groups/index")
|
||||
$: pages = $menu.find(x => x.title === "Users").subPages
|
||||
</script>
|
||||
|
||||
<Page>
|
||||
<Content narrow={!wide}>
|
||||
<div slot="side-nav">
|
||||
<SideNav>
|
||||
<SideNavItem
|
||||
text="Users"
|
||||
url={$url("./users")}
|
||||
active={$isActive("./users")}
|
||||
/>
|
||||
{#if isEnabled(TENANT_FEATURE_FLAGS.USER_GROUPS)}
|
||||
<SideNavItem
|
||||
text="Groups"
|
||||
url={$url("./groups")}
|
||||
active={$isActive("./groups")}
|
||||
/>
|
||||
{/if}
|
||||
{#each pages as { title, href }}
|
||||
<SideNavItem text={title} url={href} active={$isActive(href)} />
|
||||
{/each}
|
||||
</SideNav>
|
||||
</div>
|
||||
<slot />
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
<script>
|
||||
import { redirect } from "@roxi/routify"
|
||||
$redirect("./users")
|
||||
</script>
|
|
@ -11,3 +11,4 @@ export { groups } from "./groups"
|
|||
export { plugins } from "./plugins"
|
||||
export { backups } from "./backups"
|
||||
export { overview } from "./overview"
|
||||
export { menu } from "./menu"
|
||||
|
|
120
packages/builder/src/stores/portal/menu.js
Normal file
120
packages/builder/src/stores/portal/menu.js
Normal file
|
@ -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
|
||||
})
|
Loading…
Reference in a new issue