MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Reuse nav header

This commit is contained in:
Adria Navarro 2023-11-09 16:37:15 +01:00
parent 72c415e72c
commit bdfdac9f25
1 changed files with 7 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/builder/src/pages/builder/portal/apps/_components/PortalSideBar.svelte
View File

@ -1,13 +1,10 @@
<script>
import { Icon, Body } from "@budibase/bbui"
import { apps, sideBarCollapsed } from "stores/portal"
import { params, goto } from "@roxi/routify"
import { tick } from "svelte"
import NavItem from "components/common/NavItem.svelte"
import NavHeader from "components/common/NavHeader.svelte"
let searchInput
let searchString
let searching = false
$: filteredApps = $apps
.filter(app => {
@ -21,39 +18,16 @@
const lowerB = b.name.toLowerCase()
return lowerA > lowerB ? 1 : -1
})
const startSearching = async () => {
searching = true
searchString = ""
await tick()
searchInput.focus()
}
const stopSearching = () => {
searching = false
searchString = ""
}
</script>
<div class="side-bar" class:collapsed={$sideBarCollapsed}>
<div class="side-bar-controls">
{#if searching}
<input
bind:this={searchInput}
bind:value={searchString}
placeholder="Search for apps"
/>
{:else}
<Body size="S">Apps</Body>
<Icon name="Search" size="S" hoverable on:click={startSearching} />
{/if}
<div class="rotational" class:rotated={searching}>
<Icon
name="Add"
hoverable
on:click={searching ? stopSearching : () => $goto("./create")}
/>
</div>
<NavHeader
title="Apps"
placeholder="Search for apps"
bind:value={searchString}
onAdd={() => $goto("./create")}
/>
</div>
<div class="side-bar-nav">
<NavItem
@ -103,44 +77,13 @@
gap: var(--spacing-l);
padding: 0 var(--spacing-l);
}
.side-bar-controls :global(.spectrum-Body),
.side-bar-controls input {
flex: 1 1 auto;
}
.side-bar-controls :global(.spectrum-Icon) {
color: var(--spectrum-global-color-gray-700);
}
input {
outline: none;
border: none;
max-width: none;
flex: 1 1 auto;
color: var(--spectrum-global-color-gray-800);
font-size: 14px;
padding: 0;
transition: border 130ms ease-out;
font-family: var(--font-sans);
background: inherit;
}
input::placeholder {
color: var(--spectrum-global-color-gray-700);
transition: color 130ms ease-out;
}
input:hover::placeholder {
color: var(--spectrum-global-color-gray-800);
}
.side-bar-nav {
flex: 1 1 auto;
overflow: auto;
overflow-x: hidden;
}
div.rotational {
transition: transform 130ms ease-out;
}
div.rotational.rotated {
transform: rotate(45deg);
}
</style>