Fix top nav colours and fix selected tab not updating
This commit is contained in:
parent
33ac401046
commit
e1093fc07d
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 />
|
||||||
|
|
Loading…
Reference in New Issue