CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-05 12:34:50 +13:00
Code Issues Projects Releases Wiki Activity

adds active indicator to sidenav

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-05-05 11:14:08 +02:00
parent d39f0547b0
commit 31741975d4
1 changed files with 29 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/builder/src/pages/portal/_layout.svelte
View file

@ -1,6 +1,8 @@
<script> <script>
import { isActive } from "@roxi/routify"
import { onMount } from "svelte" import { onMount } from "svelte"
import { import {
Icon,
Avatar, Avatar,
Search, Search,
Layout, Layout,
@ -22,6 +24,18 @@
} }
onMount(getInfo) onMount(getInfo)
let menu = [
{ title: "Apps", href: "/portal" },
{ title: "Drafts", href: "/portal/drafts" },
{ title: "Users", href: "/portal/users", heading: "Manage" },
{ title: "Groups", href: "/portal/groups" },
{ title: "Auth", href: "/portal/auth" },
{ title: "Email", href: "/portal/email" },
{ title: "General", href: "/portal/general", heading: "Settings" },
{ title: "Theming", href: "/portal/theming" },
{ title: "Account", href: "/portal/account" },
]
</script> </script>
<div class="container"> <div class="container">
@ -38,15 +52,9 @@
</div> </div>
<div class="menu"> <div class="menu">
<Navigation> <Navigation>
<Item>Apps</Item> {#each menu as { title, href, heading }}
<Item>Drafts</Item> <Item selected={$isActive(href)} {href} {heading}>{title}</Item>
<Item heading="Manage">Users</Item> {/each}
<Item>Groups</Item>
<Item>Auth</Item>
<Item>Email</Item>
<Item heading="Settings">General</Item>
<Item>Theming</Item>
<Item>Account</Item>
</Navigation> </Navigation>
</div> </div>
</div> </div>
@ -55,7 +63,8 @@
<div class="toolbar"> <div class="toolbar">
<Search /> <Search />
<div class="avatar"> <div class="avatar">
<Avatar size="XL" name="John Doe" /> <Avatar size="M" name="John Doe" />
<Icon size="XL" name="ChevronDown" />
</div> </div>
</div> </div>
<div class="content"> <div class="content">
@ -91,6 +100,16 @@
.content { .content {
padding: var(--spacing-m); padding: var(--spacing-m);
} }
.avatar {
display: grid;
grid-template-columns: auto auto;
place-items: center;
grid-gap: var(--spacing-xs);
}
.avatar:hover {
cursor: pointer;
filter: brightness(110%);
}
.toolbar { .toolbar {
border-bottom: 2px solid var(--spectrum-alias-background-color-primary); border-bottom: 2px solid var(--spectrum-alias-background-color-primary);
display: grid; display: grid;