Merge branch 'users' of github.com:appwrite/appwrite-console-poc into users

src/lib/layout/shell.svelte

@@ -6,6 +6,7 @@
     import { Pill } from '$lib/elements';
 
     export let isOpen = false;
+    export let showSideNavigation = false;
 
     $: base = `/console/${$page.params.project}`;
 
@@ -58,7 +59,10 @@
 
 <svelte:window on:resize={throttle(onScroll, 25)} />
 
-<main class="grid-with-side" class:is-open={isOpen}>
+<main
+    class:grid-with-side={showSideNavigation}
+    class:grid={!showSideNavigation}
+    class:is-open={isOpen}>
     <header class="main-header">
         <button
             class="icon-button is-no-desktop"

src/routes/console/__layout-intro.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import Shell from '$lib/layout/shell.svelte';
+    import Header from '$lib/layout/header.svelte';
+</script>
+
+<Shell>
+    <svelte:fragment slot="header">
+        <Header />
+    </svelte:fragment>
+    <slot />
+    <footer class="main-footer" />
+</Shell>

src/routes/console/__layout.svelte

@@ -4,7 +4,7 @@
     import Header from '$lib/layout/header.svelte';
 </script>
 
-<Shell>
+<Shell showSideNavigation>
     <svelte:fragment slot="header">
         <Header />
     </svelte:fragment>

src/routes/console/index@intro.svelte

@@ -3,6 +3,7 @@
     import { base } from '$app/paths';
     import { Tiles, Tile } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import { sdkForConsole } from '$lib/stores/sdk';
     import type { Models } from '@aw-labs/appwrite-console';
     import CreateOrganization from './_createOrganization.svelte';
@@ -40,22 +41,24 @@
 <svelte:head>
     <title>Appwrite - Console</title>
 </svelte:head>
-<h1>Your Organizations</h1>
-<Button on:click={() => (addOrganization = true)}>Add Organization</Button>
+<Container>
+    <h1>Your Organizations</h1>
+    <Button on:click={() => (addOrganization = true)}>Add Organization</Button>
 
-{#await request}
-    <div aria-busy="true" />
-{:then organizations}
-    {#each organizations as organization}
-        <h1>{organization.name}</h1>
-        <Tiles>
-            {#each organization.projects as project}
-                <Tile href={`${base}/console/${project.$id}`} title={project.name} />
-            {/each}
-        </Tiles>
-        <Button on:click={() => createProject(organization.$id)}>Create Project</Button>
-    {/each}
-{/await}
+    {#await request}
+        <div aria-busy="true" />
+    {:then organizations}
+        {#each organizations as organization}
+            <h1>{organization.name}</h1>
+            <Tiles>
+                {#each organization.projects as project}
+                    <Tile href={`${base}/console/${project.$id}`} title={project.name} />
+                {/each}
+            </Tiles>
+            <Button on:click={() => createProject(organization.$id)}>Create Project</Button>
+        {/each}
+    {/await}
+</Container>
 
 <CreateOrganization bind:show={addOrganization} />
 <CreateProject