CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-13 02:05:54 +12:00
Code Issues Projects Releases Wiki Activity

Add ability for layout to hide navigation when inside a peeked modal

Browse source
This commit is contained in:
Andrew Kingston 2021-07-30 13:59:56 +01:00
parent 7723a1ed60
commit 9ad07f3cf7
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/standard-components/src/Layout.svelte
View file

@ -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;