Fix top nav colours and fix selected tab not updating

This commit is contained in:
Andrew Kingston 2022-12-13 15:55:59 +00:00
parent 33ac401046
commit e1093fc07d
3 changed files with 18 additions and 26 deletions

View File

@ -82,7 +82,8 @@
.spectrum-Tabs-item { .spectrum-Tabs-item {
color: var(--spectrum-global-color-gray-600); color: var(--spectrum-global-color-gray-600);
} }
.spectrum-Tabs-item.is-selected { .spectrum-Tabs-item.is-selected,
.spectrum-Tabs-item:hover {
color: var(--spectrum-global-color-gray-900); color: var(--spectrum-global-color-gray-900);
} }
</style> </style>

View File

@ -1,5 +1,5 @@
<script> <script>
import { isActive, redirect, goto } from "@roxi/routify" import { isActive, redirect, goto, url } from "@roxi/routify"
import { import {
Icon, Icon,
Avatar, Avatar,
@ -16,7 +16,7 @@
import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte" import UpdateUserInfoModal from "components/settings/UpdateUserInfoModal.svelte"
import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte" import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
import Logo from "assets/bb-emblem.svg" import Logo from "assets/bb-emblem.svg"
import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags" // import { isEnabled, TENANT_FEATURE_FLAGS } from "helpers/featureFlags"
let loaded = false let loaded = false
let userInfoModal let userInfoModal
@ -25,6 +25,18 @@
let activeTab = "Apps" let activeTab = "Apps"
$: menu = buildMenu($auth.isAdmin) $: menu = buildMenu($auth.isAdmin)
$: $url(), updateActiveTab()
const updateActiveTab = () => {
for (let entry of menu) {
if ($isActive(entry.href)) {
if (activeTab !== entry.title) {
activeTab = entry.title
}
break
}
}
}
const buildMenu = admin => { const buildMenu = admin => {
let menu = [ let menu = [
@ -64,7 +76,7 @@
} }
// add link to account portal if the user has access // add link to account portal if the user has access
let accountSectionAdded = false // let accountSectionAdded = false
// link out to account-portal if account holder in cloud or always in self-host // link out to account-portal if account holder in cloud or always in self-host
// if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) { // if ($auth?.user?.accountPortalAccess || (!$adminStore.cloud && admin)) {
@ -146,14 +158,6 @@
loaded = true loaded = true
} }
} }
// Find selected tab
for (let entry of menu) {
if ($isActive(entry.href)) {
activeTab = entry.title
break
}
}
}) })
</script> </script>
@ -255,10 +259,7 @@
padding: 7px 0; padding: 7px 0;
} }
.nav :global(.spectrum-Tabs-itemLabel) { .nav :global(.spectrum-Tabs-itemLabel) {
color: #d0d0d0; font-weight: 600;
}
.nav :global(.spectrum-Tabs-item.is-selected .spectrum-Tabs-itemLabel) {
color: #ffffff;
} }
.branding { .branding {
display: grid; display: grid;

View File

@ -43,16 +43,6 @@
url={$url("./upgrade")} url={$url("./upgrade")}
active={$isActive("./upgrade")} active={$isActive("./upgrade")}
/> />
<SideNavItem
text="Secrets"
url={$url("./secrets")}
active={$isActive("./secrets")}
/>
<SideNavItem
text="Scheduled Backups"
url={$url("./backups")}
active={$isActive("./backups")}
/>
</SideNav> </SideNav>
</div> </div>
<slot /> <slot />