|
|
@ -1,6 +1,7 @@ |
|
|
<script> |
|
|
<script> |
|
|
import { getContext } from "svelte" |
|
|
import { getContext } from "svelte" |
|
|
import { Heading, Icon } from "@budibase/bbui" |
|
|
import { Heading, Icon } from "@budibase/bbui" |
|
|
|
|
|
import { routeStore } from "../../client/src/store" |
|
|
|
|
|
|
|
|
const { styleable, linkable, builderStore } = getContext("sdk") |
|
|
const { styleable, linkable, builderStore } = getContext("sdk") |
|
|
const component = getContext("component") |
|
|
const component = getContext("component") |
|
|
@ -26,6 +27,14 @@ |
|
|
Small: "s", |
|
|
Small: "s", |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// Permanently go into peek mode if we ever get the peek flag |
|
|
|
|
|
let isPeeking = false |
|
|
|
|
|
$: { |
|
|
|
|
|
if ($routeStore.queryParams?.peek) { |
|
|
|
|
|
isPeeking = true |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
$: validLinks = links?.filter(link => link.text && link.url) || [] |
|
|
$: validLinks = links?.filter(link => link.text && link.url) || [] |
|
|
$: typeClass = navigationClasses[navigation] || "none" |
|
|
$: typeClass = navigationClasses[navigation] || "none" |
|
|
$: widthClass = widthClasses[width] || "l" |
|
|
$: widthClass = widthClasses[width] || "l" |
|
|
@ -51,7 +60,7 @@ |
|
|
|
|
|
|
|
|
<div class="layout layout--{typeClass}" use:styleable={$component.styles}> |
|
|
<div class="layout layout--{typeClass}" use:styleable={$component.styles}> |
|
|
{#if typeClass !== "none"} |
|
|
{#if typeClass !== "none"} |
|
|
<div class="nav-wrapper" class:sticky> |
|
|
<div class="nav-wrapper" class:sticky class:hidden={isPeeking}> |
|
|
<div class="nav nav--{typeClass} size--{widthClass}"> |
|
|
<div class="nav nav--{typeClass} size--{widthClass}"> |
|
|
<div class="nav-header"> |
|
|
<div class="nav-header"> |
|
|
{#if validLinks?.length} |
|
|
{#if validLinks?.length} |
|
|
@ -139,6 +148,9 @@ |
|
|
border-bottom: 1px solid var(--spectrum-global-color-gray-300); |
|
|
border-bottom: 1px solid var(--spectrum-global-color-gray-300); |
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); |
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
} |
|
|
|
|
|
.nav-wrapper.hidden { |
|
|
|
|
|
display: none; |
|
|
|
|
|
} |
|
|
.layout--top .nav-wrapper.sticky { |
|
|
.layout--top .nav-wrapper.sticky { |
|
|
position: sticky; |
|
|
position: sticky; |
|
|
top: 0; |
|
|
top: 0; |
|
|
|