starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-20 16:02:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): Update sidebar menu (#1050)

Browse Source
This commit is contained in:
Ádám Kovács
2022-12-29 09:55:53 +01:00
committed by GitHub
parent 17a5b3ffdb
commit faa046a3fd
2 changed files with 28 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/sidebar/SidebarContent.svelte
+14 -14
View File
@@ -10,7 +10,7 @@
faUsersCog,
faCog,
faDollarSign,
faFolderTree
faFolderOpen
} from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'
import MenuLink from './MenuLink.svelte'
@@ -25,7 +25,7 @@
$: secondaryMenuLinks = [
{ label: 'Schedules', href: '/schedules', icon: faCalendar, disabled: $userStore?.operator },
{ label: 'Folders', href: '/folders', icon: faFolderTree, disabled: $userStore?.operator },
{ label: 'Folders', href: '/folders', icon: faFolderOpen, disabled: $userStore?.operator },
{ label: 'Groups', href: '/groups', icon: faUsersCog, disabled: $userStore?.operator },
{ label: 'Audit Logs', href: '/audit_logs', icon: faEye, disabled: $userStore?.operator },
{
@@ -50,22 +50,22 @@
export let isCollapsed: boolean = false
</script>
<div class="flex-1 flex flex-col pb-4 overflow-x-hidden scrollbar-hidden">
<nav class="h-full flex justify-between flex-col px-2">
<div class="space-y-1 pt-4">
{#each mainMenuLinks as menuLink (menuLink.href)}
<MenuLink class="text-md" {...menuLink} {isCollapsed} />
{/each}
<div class="h-2" />
</div>
<div class="space-1-2">
<nav class="grow flex md:justify-between flex-col overflow-x-hidden scrollbar-hidden px-2 md:pb-4">
<div class="space-y-1 pt-4 mb-6 md:mb-10">
{#each mainMenuLinks as menuLink (menuLink.href)}
<MenuLink class="text-md" {...menuLink} {isCollapsed} />
{/each}
</div>
<div>
<div class="space-y-1 mb-6 md:mb-10">
{#each secondaryMenuLinks as menuLink (menuLink.href)}
<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
{/each}
<div class="h-8" />
</div>
<div>
{#each thirdMenuLinks as menuLink (menuLink.href)}
<MenuLink class="text-xs" {...menuLink} {isCollapsed} />
{/each}
</div>
</nav>
</div>
</div>
</nav>
frontend/src/routes/(root)/(logged)/+layout.svelte
+14 -12
View File
@@ -111,7 +111,7 @@
{/if}
<div>
<div
class={classNames('relative md:hidden ', menuOpen ? 'z-40' : 'pointer-events-none')}
class={classNames('relative md:hidden', menuOpen ? 'z-40' : 'pointer-events-none')}
role="dialog"
aria-modal="true"
>
@@ -164,7 +164,7 @@
{#if !isCollapsed}Windmill{/if}
</div>
<div class="px-2 py-4 space-y-2 border-y border-gray-400">
<div class="px-2 py-4 space-y-2 border-y border-gray-500">
<WorkspaceMenu />
<UserMenu
on:user-settings={() => userSettings.openDrawer()}
@@ -181,29 +181,31 @@
<div
class={classNames(
'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40',
'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40',
isCollapsed ? 'md:w-12' : 'md:w-40'
)}
>
<div class="flex-1 flex flex-col min-h-0 shadow-lg bg-[#2e3440]">
<div class="flex-1 flex flex-col min-h-0 h-screen overflow-y-auto shadow-lg bg-[#2e3440]">
<button
on:click={() => {
goto('/')
}}
>
<div
class="flex flex-row items-center flex-shrink-0 px-4 py-3.5 font-extrabold text-white w-14 h-12"
class="center-center flex-row flex-shrink-0 px-2 py-3.5 font-extrabold text-white h-12"
class:w-40={!isCollapsed}
>
<div class="mr-1">
<WindmillIcon white={true} height="19px" width="20px" />
<div class:mr-1={!isCollapsed}>
<WindmillIcon white={true} height="20px" width="20px" />
</div>
<span class=""
>{#if !isCollapsed}Windmill{/if}</span
>
{#if !isCollapsed}
<span>
Windmill
</span>
{/if}
</div>
</button>
<div class="px-2 py-4 space-y-2 border-y border-gray-300">
<div class="px-2 py-4 space-y-2 border-y border-gray-500">
<WorkspaceMenu {isCollapsed} />
<UserMenu
on:user-settings={userSettings.openDrawer}
@@ -214,7 +216,7 @@
</div>
<SidebarContent {isCollapsed} />
<div class="flex-shrink-0 flex px-4 pb-3.5 pt-3 border-t border-gray-300">
<div class="flex-shrink-0 flex px-4 pb-3.5 pt-3 border-t border-gray-500">
<button
on:click={() => {
isCollapsed = !isCollapsed