This commit is contained in:
Christoph Kluge 2023-08-31 14:48:22 +02:00
commit 98f1255d4f
2 changed files with 105 additions and 101 deletions

View File

@ -8,7 +8,7 @@
NavbarToggler, NavbarToggler,
Dropdown, Dropdown,
DropdownToggle, DropdownToggle,
DropdownMenu DropdownMenu,
} from "sveltestrap"; } from "sveltestrap";
import NavbarLinks from "./NavbarLinks.svelte"; import NavbarLinks from "./NavbarLinks.svelte";
import NavbarTools from "./NavbarTools.svelte"; import NavbarTools from "./NavbarTools.svelte";
@ -106,12 +106,13 @@
</NavbarBrand> </NavbarBrand>
<NavbarToggler on:click={() => (isOpen = !isOpen)} /> <NavbarToggler on:click={() => (isOpen = !isOpen)} />
<Collapse <Collapse
style="justify-content: space-between"
{isOpen} {isOpen}
navbar navbar
expand="md" expand="md"
on:update={({ detail }) => (isOpen = detail.isOpen)} on:update={({ detail }) => (isOpen = detail.isOpen)}
> >
<Nav class="ms-auto" navbar> <Nav navbar>
{#if screenSize > 1500 || screenSize < 768} {#if screenSize > 1500 || screenSize < 768}
<NavbarLinks <NavbarLinks
{clusters} {clusters}
@ -171,7 +172,7 @@
</Dropdown> </Dropdown>
{/each} {/each}
{/if} {/if}
<NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
</Nav> </Nav>
<NavbarTools {username} {authlevel} {roles} {screenSize} />
</Collapse> </Collapse>
</Navbar> </Navbar>

View File

@ -1,6 +1,7 @@
<script> <script>
import { import {
Icon, Icon,
Nav,
NavItem, NavItem,
InputGroup, InputGroup,
Input, Input,
@ -8,17 +9,17 @@
InputGroupText, InputGroupText,
Container, Container,
Row, Row,
Col Col,
} from "sveltestrap"; } from "sveltestrap";
export let username; // empty string if auth. is disabled, otherwise the username as string export let username; // empty string if auth. is disabled, otherwise the username as string
export let authlevel; // Integer export let authlevel; // Integer
export let roles; // Role Enum-Like export let roles; // Role Enum-Like
export let screenSize // screensize export let screenSize; // screensize
</script> </script>
{#if screenSize >= 768} <Nav navbar>
{#if screenSize >= 768}
<NavItem> <NavItem>
<form method="GET" action="/search"> <form method="GET" action="/search">
<InputGroup> <InputGroup>
@ -27,7 +28,8 @@
placeholder="Search 'type:<query>' ..." placeholder="Search 'type:<query>' ..."
name="searchId" name="searchId"
style="margin-left: 10px;" style="margin-left: 10px;"
/> <!-- bootstrap classes w/o effect --> />
<!-- bootstrap classes w/o effect -->
<Button outline type="submit"><Icon name="search" /></Button <Button outline type="submit"><Icon name="search" /></Button
> >
<InputGroupText <InputGroupText
@ -67,7 +69,7 @@
<Icon name="gear" /> <Icon name="gear" />
</Button> </Button>
</NavItem> </NavItem>
{:else} {:else}
<NavItem> <NavItem>
<Container> <Container>
<Row cols={2}> <Row cols={2}>
@ -121,4 +123,5 @@
</InputGroup> </InputGroup>
</form> </form>
</NavItem> </NavItem>
{/if} {/if}
</Nav>