ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-12-26 13:29:05 +01:00
Code Issues Packages Releases Activity

Add NavbarLinks component

Browse Source
This commit is contained in:
Jan Eitzinger 2023-08-24 09:22:12 +02:00
parent 80be78604f
commit 204901189d
2 changed files with 78 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
web/frontend/src/Header.svelte
View File

@ -17,6 +17,7 @@
DropdownItem, DropdownItem,
InputGroupText, InputGroupText,
} from "sveltestrap"; } from "sveltestrap";
import NavbarLinks from "./NavbarLinks.svelte";
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
@ -118,122 +119,60 @@
> >
<Nav navbar> <Nav navbar>
{#if screenSize > 1500} {#if screenSize > 1500}
{#each views.filter((item) => item.requiredRole <= authlevel) as item} <NavbarLinks
{#if !item.perCluster} {clusters}
<NavLink links={views.filter(
href={item.href} (item) => item.requiredRole <= authlevel
active={window.location.pathname == item.href} )}
><Icon name={item.icon} /> {item.title}</NavLink />
>
{:else}
<Dropdown nav inNavbar>
<DropdownToggle nav caret>
<Icon name={item.icon} />
{item.title}
</DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster}
<DropdownItem
href={item.href + cluster.name}
active={window.location.pathname ==
item.href + cluster.name}
>
{cluster.name}
</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{/if}
{/each}
{:else if screenSize > 1300} {:else if screenSize > 1300}
{#each views.filter((item) => item.requiredRole <= authlevel && item.menu != "Stats") as item} <NavbarLinks
{#if !item.perCluster} {clusters}
<NavLink links={views.filter(
href={item.href} (item) =>
active={window.location.pathname == item.href} item.requiredRole <= authlevel &&
><Icon name={item.icon} /> {item.title}</NavLink item.menu != "Stats"
> )}
{:else} />
<Dropdown nav inNavbar>
<DropdownToggle nav caret>
<Icon name={item.icon} />
{item.title}
</DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster}
<DropdownItem
href={item.href + cluster.name}
active={window.location.pathname ==
item.href + cluster.name}
>
{cluster.name}
</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{/if}
{/each}
<Dropdown nav> <Dropdown nav>
<DropdownToggle nav caret> <DropdownToggle nav caret>
<Icon name="graph-up" /> <Icon name="graph-up" />
Stats Stats
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
{#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "Stats") as item} <NavbarLinks
<Dropdown nav inNavbar> {clusters}
<DropdownToggle nav caret> links={views.filter(
<Icon name={item.icon} /> (item) =>
{item.title} item.requiredRole <= authlevel &&
</DropdownToggle> item.menu == "Stats"
<DropdownMenu class="dropdown-menu-lg-end"> )}
{#each clusters as cluster} />
<DropdownItem
href={item.href + cluster.name}
active={window.location.pathname ==
item.href + cluster.name}
>
{cluster.name}
</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{/each}
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
{:else} {:else}
{#each views.filter((item) => item.requiredRole <= authlevel && item.menu == "none") as item} <NavbarLinks
<NavLink {clusters}
href={item.href} links={views.filter(
active={window.location.pathname == item.href} (item) =>
><Icon name={item.icon} /> {item.title}</NavLink item.requiredRole <= authlevel &&
> item.menu == "none"
{/each} )}
/>
{#each Array("Groups", "Stats") as menu} {#each Array("Groups", "Stats") as menu}
<Dropdown nav> <Dropdown nav>
<DropdownToggle nav caret> <DropdownToggle nav caret>
{menu} {menu}
</DropdownToggle> </DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end"> <DropdownMenu class="dropdown-menu-lg-end">
{#each views.filter((item) => item.requiredRole <= authlevel && item.menu == menu) as item} <NavbarLinks
<Dropdown nav inNavbar> {clusters}
<DropdownToggle nav caret> links={views.filter(
<Icon name={item.icon} /> (item) =>
{item.title} item.requiredRole <= authlevel &&
</DropdownToggle> item.menu == menu
<DropdownMenu class="dropdown-menu-lg-end"> )}
{#each clusters as cluster} />
<DropdownItem
href={item.href + cluster.name}
active={window.location
.pathname ==
item.href + cluster.name}
>
{cluster.name}
</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{/each}
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
{/each} {/each}
@ -290,4 +229,3 @@
</NavItem> </NavItem>
</Nav> </Nav>
</Navbar> </Navbar>

39
web/frontend/src/NavbarLinks.svelte Normal file
View File

@ -0,0 +1,39 @@
<script>
import {
Icon,
NavLink,
Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
} from "sveltestrap";
export let clusters; // array of names
export let links; // array of nav links
</script>
{#each links as item}
{#if !item.perCluster}
<NavLink href={item.href} active={window.location.pathname == item.href}
><Icon name={item.icon} /> {item.title}</NavLink
>
{:else}
<Dropdown nav inNavbar>
<DropdownToggle nav caret>
<Icon name={item.icon} />
{item.title}
</DropdownToggle>
<DropdownMenu class="dropdown-menu-lg-end">
{#each clusters as cluster}
<DropdownItem
href={item.href + cluster.name}
active={window.location.pathname ==
item.href + cluster.name}
>
{cluster.name}
</DropdownItem>
{/each}
</DropdownMenu>
</Dropdown>
{/if}
{/each}