From 369757b35b68123cde4c56454803975a58d434d4 Mon Sep 17 00:00:00 2001
From: Jan Eitzinger <jan@moebiusband.org>
Date: Thu, 31 Aug 2023 14:18:33 +0200
Subject: [PATCH] Fix Navbar layout

---
 web/frontend/src/Header.svelte      |   7 +-
 web/frontend/src/NavbarTools.svelte | 199 ++++++++++++++--------------
 2 files changed, 105 insertions(+), 101 deletions(-)

diff --git a/web/frontend/src/Header.svelte b/web/frontend/src/Header.svelte
index 038d1a3..03c8cd0 100644
--- a/web/frontend/src/Header.svelte
+++ b/web/frontend/src/Header.svelte
@@ -8,7 +8,7 @@
         NavbarToggler,
         Dropdown,
         DropdownToggle,
-        DropdownMenu
+        DropdownMenu,
     } from "sveltestrap";
     import NavbarLinks from "./NavbarLinks.svelte";
     import NavbarTools from "./NavbarTools.svelte";
@@ -106,12 +106,13 @@
     </NavbarBrand>
     <NavbarToggler on:click={() => (isOpen = !isOpen)} />
     <Collapse
+        style="justify-content: space-between"
         {isOpen}
         navbar
         expand="md"
         on:update={({ detail }) => (isOpen = detail.isOpen)}
     >
-        <Nav class="ms-auto" navbar>
+        <Nav navbar>
             {#if screenSize > 1500 || screenSize < 768}
                 <NavbarLinks
                     {clusters}
@@ -171,7 +172,7 @@
                     </Dropdown>
                 {/each}
             {/if}
-            <NavbarTools username={username} authlevel={authlevel} roles={roles} screenSize={screenSize}/>
         </Nav>
+        <NavbarTools {username} {authlevel} {roles} {screenSize} />
     </Collapse>
 </Navbar>
diff --git a/web/frontend/src/NavbarTools.svelte b/web/frontend/src/NavbarTools.svelte
index 5655a7c..2bf9aca 100644
--- a/web/frontend/src/NavbarTools.svelte
+++ b/web/frontend/src/NavbarTools.svelte
@@ -1,6 +1,7 @@
 <script>
     import {
         Icon,
+        Nav,
         NavItem,
         InputGroup,
         Input,
@@ -8,117 +9,119 @@
         InputGroupText,
         Container,
         Row,
-        Col
+        Col,
     } from "sveltestrap";
 
     export let username; // empty string if auth. is disabled, otherwise the username as string
     export let authlevel; // Integer
     export let roles; // Role Enum-Like
-    export let screenSize // screensize
-
+    export let screenSize; // screensize
 </script>
 
-{#if screenSize >= 768}
-    <NavItem>
-        <form method="GET" action="/search">
-            <InputGroup>
-                <Input
-                    type="text"
-                    placeholder="Search 'type:<query>' ..."
-                    name="searchId"
-                    style="margin-left: 10px;"
-                />  <!-- bootstrap classes w/o effect -->
-                <Button outline type="submit"><Icon name="search" /></Button
-                >
-                <InputGroupText
-                    style="cursor:help;"
-                    title={authlevel >= roles.support
-                        ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
-                        : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
-                    ><Icon name="info-circle" /></InputGroupText
-                >
-            </InputGroup>
-        </form>
-    </NavItem>
-    {#if username}
+<Nav navbar>
+    {#if screenSize >= 768}
         <NavItem>
-            <form method="POST" action="/logout">
-                <Button
-                    outline
-                    color="success"
-                    type="submit"
-                    style="margin-left: 10px;"
-                >
-                    {#if screenSize > 1630}
-                        <Icon name="box-arrow-right" /> Logout {username}
-                    {:else}
-                        <Icon name="box-arrow-right" />
-                    {/if}
-                </Button>
+            <form method="GET" action="/search">
+                <InputGroup>
+                    <Input
+                        type="text"
+                        placeholder="Search 'type:<query>' ..."
+                        name="searchId"
+                        style="margin-left: 10px;"
+                    />
+                    <!-- bootstrap classes w/o effect -->
+                    <Button outline type="submit"><Icon name="search" /></Button
+                    >
+                    <InputGroupText
+                        style="cursor:help;"
+                        title={authlevel >= roles.support
+                            ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
+                            : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
+                        ><Icon name="info-circle" /></InputGroupText
+                    >
+                </InputGroup>
             </form>
         </NavItem>
-    {/if}
-    <NavItem>
-        <Button
-            outline
-            on:click={() => (window.location.href = "/config")}
-            style="margin-left: 10px;"
-        >
-            <Icon name="gear" />
-        </Button>
-    </NavItem>
-{:else}
-    <NavItem>
-        <Container>
-            <Row cols={2}>
-                <Col xs="6">
-                    <form method="POST" action="/logout">
+        {#if username}
+            <NavItem>
+                <form method="POST" action="/logout">
+                    <Button
+                        outline
+                        color="success"
+                        type="submit"
+                        style="margin-left: 10px;"
+                    >
+                        {#if screenSize > 1630}
+                            <Icon name="box-arrow-right" /> Logout {username}
+                        {:else}
+                            <Icon name="box-arrow-right" />
+                        {/if}
+                    </Button>
+                </form>
+            </NavItem>
+        {/if}
+        <NavItem>
+            <Button
+                outline
+                on:click={() => (window.location.href = "/config")}
+                style="margin-left: 10px;"
+            >
+                <Icon name="gear" />
+            </Button>
+        </NavItem>
+    {:else}
+        <NavItem>
+            <Container>
+                <Row cols={2}>
+                    <Col xs="6">
+                        <form method="POST" action="/logout">
+                            <Button
+                                outline
+                                color="success"
+                                type="submit"
+                                size="sm"
+                                class="my-2 w-100"
+                            >
+                                <Icon name="box-arrow-right" /> Logout {username}
+                            </Button>
+                        </form>
+                    </Col>
+                    <Col xs="6">
                         <Button
                             outline
-                            color="success"
-                            type="submit"
+                            on:click={() => (window.location.href = "/config")}
                             size="sm"
                             class="my-2 w-100"
                         >
-                            <Icon name="box-arrow-right" /> Logout {username}
+                            {#if authlevel >= roles.admin}
+                                <Icon name="gear" /> Admin Settings
+                            {:else}
+                                <Icon name="gear" /> Plotting Options
+                            {/if}
                         </Button>
-                    </form>
-                </Col>
-                <Col xs="6">
-                    <Button
-                    outline
-                    on:click={() => (window.location.href = "/config")}
-                    size="sm"
-                    class="my-2 w-100"
-                >
-                    {#if authlevel >= roles.admin}
-                        <Icon name="gear" /> Admin Settings
-                    {:else}
-                        <Icon name="gear" /> Plotting Options
-                    {/if}
-                </Button>
-                </Col>
-            </Row>
-        </Container>
-    </NavItem>
-    <NavItem style="margin-left: 10px; margin-right:10px;">
-        <form method="GET" action="/search">
-            <InputGroup>
-                <Input
-                    type="text"
-                    placeholder="Search 'type:<query>' ..."
-                    name="searchId"
-                />
-                <Button outline type="submit"><Icon name="search" /></Button
-                >
-                <InputGroupText
-                    style="cursor:help;"
-                    title={authlevel >= roles.support
-                        ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
-                        : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
-                    ><Icon name="info-circle" /></InputGroupText
-                >
-            </InputGroup>
-        </form>
-    </NavItem>
-{/if}
+                    </Col>
+                </Row>
+            </Container>
+        </NavItem>
+        <NavItem style="margin-left: 10px; margin-right:10px;">
+            <form method="GET" action="/search">
+                <InputGroup>
+                    <Input
+                        type="text"
+                        placeholder="Search 'type:<query>' ..."
+                        name="searchId"
+                    />
+                    <Button outline type="submit"><Icon name="search" /></Button
+                    >
+                    <InputGroupText
+                        style="cursor:help;"
+                        title={authlevel >= roles.support
+                            ? "Example: 'projectId:a100cd', Types are: jobId | jobName | projectId | arrayJobId | username | name"
+                            : "Example: 'jobName:myjob', Types are jobId | jobName | projectId | arrayJobId "}
+                        ><Icon name="info-circle" /></InputGroupText
+                    >
+                </InputGroup>
+            </form>
+        </NavItem>
+    {/if}
+</Nav>