Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: secondary sidebar in collections

Browse Source
This commit is contained in:
tglide
2023-03-08 19:38:54 +00:00
parent 7a5c326ada
commit fffe6748ee
8 changed files with 129 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/layout/navigation.svelte
+47 -68
View File
@@ -4,9 +4,18 @@
import { trackEvent } from '$lib/actions/analytics';
$: project = $page.params.project;
$: path = `${base}/console/project-${project}`;
$: projectPath = `${base}/console/project-${project}`;
let narrow = true;
$: secondSideNav = $page.data.secondSideNav;
// We need to have this second variable, because we only want narrow
// to change automatically if we change from having a second side nav to
// not having one, not when the second side nav changes to a different value.
$: hasSecondSideNav = !!secondSideNav;
let narrow = false;
$: {
narrow = hasSecondSideNav;
}
</script>
<div class="side-nav">
@@ -19,10 +28,10 @@
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/overview`
`${projectPath}/overview`
)}
on:click={() => trackEvent('click_menu_overview')}
href={path}>
href={projectPath}>
<span class="icon-chart-bar" aria-hidden="true" />
<span class="text">Overview</span>
</a>
@@ -30,9 +39,11 @@
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/auth`)}
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/auth`
)}
on:click={() => trackEvent('click_menu_auth')}
href={`${path}/auth`}>
href={`${projectPath}/auth`}>
<span class="icon-user-group" aria-hidden="true" />
<span class="text">Auth</span>
</a>
@@ -41,10 +52,10 @@
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/databases`
`${projectPath}/databases`
)}
on:click={() => trackEvent('click_menu_databases')}
href={`${path}/databases`}>
href={`${projectPath}/databases`}>
<span class="icon-database" aria-hidden="true" />
<span class="text">Databases</span>
</a>
@@ -53,10 +64,10 @@
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(
`${path}/functions`
`${projectPath}/functions`
)}
on:click={() => trackEvent('click_menu_functions')}
href={`${path}/functions`}>
href={`${projectPath}/functions`}>
<span class="icon-lightning-bolt" aria-hidden="true" />
<span class="text">Functions</span>
</a>
@@ -64,9 +75,11 @@
<li class="drop-list-item">
<a
class="drop-button"
class:is-selected={$page.url.pathname.startsWith(`${path}/storage`)}
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/storage`
)}
on:click={() => trackEvent('click_menu_storage')}
href={`${path}/storage`}>
href={`${projectPath}/storage`}>
<span class="icon-folder" aria-hidden="true" />
<span class="text">Storage</span>
</a>
@@ -79,72 +92,38 @@
<section class="drop-section">
<a
class="drop-button"
href={`${path}/settings`}
href={`${projectPath}/settings`}
on:click={() => trackEvent('click_menu_settings')}
class:is-selected={$page.url.pathname.startsWith(`${path}/settings`)}>
class:is-selected={$page.url.pathname.startsWith(
`${projectPath}/settings`
)}>
<span class="icon-cog" aria-hidden="true" />
<span class="text">Settings</span>
</a>
</section>
</div>
{/if}
<button
class="side-nav-button button is-small is-secondary is-not-mobile"
aria-label="resize menu"
on:click={() => (narrow = !narrow)}>
<span
class:icon-cheveron-right={narrow}
class:icon-cheveron-left={!narrow}
aria-hidden="true" />
</button>
{#if secondSideNav}
<button
class="side-nav-button button is-small is-secondary is-not-mobile"
aria-label="resize menu"
on:click={() => (narrow = !narrow)}>
<span
class:icon-cheveron-right={narrow}
class:icon-cheveron-left={!narrow}
aria-hidden="true" />
</button>
{/if}
</div>
<div class="side-nav-level-2 is-open">
<div class="side-nav-main">
<section class="drop-section u-flex-vertical u-gap-8">
<button
class="u-flex u-cross-center u-sep-block-end u-padding-block-12 is-not-desktop"
id="aaa">
<span class="icon-cheveron-left" aria-hidden="true" />
<span class="eyebrow-heading-3 u-margin-inline-auto">Databases</span>
</button>
<h5 class="eyebrow-heading-3 u-padding-block-12">Header</h5>
<button class="button is-text is-full-width u-main-start u-padding-inline-0">
<span class="icon-plus" aria-hidden="true" />
<span class="text">Button</span>
</button>
<ul class="drop-list">
<li class="drop-list-item">
<a class="drop-button is-selected" href="/">
<span class="text">Home</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="text">Database</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="/settings.html">
<span class="text">Storage</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="/users.html">
<span class="text">Users</span>
</a>
</li>
<li class="drop-list-item">
<a class="drop-button" href="">
<span class="text">Functions</span>
</a>
</li>
</ul>
</section>
{#if secondSideNav}
<div class="side-nav-level-2 is-open">
<div class="side-nav-main">
<svelte:component this={secondSideNav} />
</div>
</div>
</div>
{/if}
</div>
<style>