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