Switches out SideNav to SideNavigation component
This commit is contained in:
parent
3197174398
commit
b5fde37c39
2 changed files with 21 additions and 28 deletions
|
@ -2,6 +2,7 @@
|
||||||
import { getContext } from 'svelte'
|
import { getContext } from 'svelte'
|
||||||
const multilevel = getContext('sidenav-type');
|
const multilevel = getContext('sidenav-type');
|
||||||
export let href = "";
|
export let href = "";
|
||||||
|
export let external = false;
|
||||||
export let heading = ""
|
export let heading = ""
|
||||||
export let icon = "";
|
export let icon = "";
|
||||||
export let selected = false;
|
export let selected = false;
|
||||||
|
@ -13,7 +14,7 @@
|
||||||
{#if heading}
|
{#if heading}
|
||||||
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
|
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
|
||||||
{/if}
|
{/if}
|
||||||
<a {href} class="spectrum-SideNav-itemLink" aria-current="page">
|
<a target={external ? '_blank' : '_self'} {href} class="spectrum-SideNav-itemLink" aria-current="page">
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
|
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
|
||||||
<use xlink:href="#spectrum-icon-18-{icon}" />
|
<use xlink:href="#spectrum-icon-18-{icon}" />
|
||||||
|
|
|
@ -1,16 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { Home as Link } from "@budibase/bbui"
|
import { goto } from "@roxi/routify"
|
||||||
import {
|
import { Home as Link, SideNavigation as Navigation, SideNavigationItem as Item} from "@budibase/bbui"
|
||||||
AppsIcon,
|
|
||||||
HostingIcon,
|
|
||||||
DocumentationIcon,
|
|
||||||
CommunityIcon,
|
|
||||||
BugIcon,
|
|
||||||
} from "components/common/Icons"
|
|
||||||
import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
|
import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
|
||||||
import Logo from "/assets/budibase-logo.svg"
|
import Logo from "/assets/budibase-logo.svg"
|
||||||
|
|
||||||
let modal
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
|
@ -18,23 +10,23 @@
|
||||||
<div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
|
<div class="home-logo"><img src={Logo} alt="Budibase icon" /></div>
|
||||||
<div class="nav-section">
|
<div class="nav-section">
|
||||||
<div class="nav-top">
|
<div class="nav-top">
|
||||||
<Link icon={AppsIcon} title="Apps" href="/" active />
|
<Navigation>
|
||||||
<Link
|
<Item href="/builder/" icon="Apps" selected>
|
||||||
icon={HostingIcon}
|
Apps
|
||||||
title="Hosting"
|
</Item>
|
||||||
href="https://portal.budi.live/" />
|
<Item external href="https://portal.budi.live/" icon="Servers">
|
||||||
<Link
|
Hosting
|
||||||
icon={DocumentationIcon}
|
</Item>
|
||||||
title="Documentation"
|
<Item external href="https://docs.budibase.com/" icon="Book">
|
||||||
href="https://docs.budibase.com/" />
|
Documentation
|
||||||
<Link
|
</Item>
|
||||||
icon={CommunityIcon}
|
<Item external href="https://github.com/Budibase/budibase/discussions" icon="PeopleGroup">
|
||||||
title="Community"
|
Community
|
||||||
href="https://github.com/Budibase/budibase/discussions" />
|
</Item>
|
||||||
<Link
|
<Item external href="https://github.com/Budibase/budibase/issues/new/choose" icon="Bug">
|
||||||
icon={BugIcon}
|
Raise an issue
|
||||||
title="Raise an issue"
|
</Item>
|
||||||
href="https://github.com/Budibase/budibase/issues/new/choose" />
|
</Navigation>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-bottom">
|
<div class="nav-bottom">
|
||||||
<BuilderSettingsButton />
|
<BuilderSettingsButton />
|
||||||
|
|
Loading…
Reference in a new issue