Skip to content

Commit

Permalink
Merge pull request #463 from MuckRock/sveltekit-signedin
Browse files Browse the repository at this point in the history
  • Loading branch information
@allanlasser
allanlasser authored Mar 13, 2024
2 parents 82a9c2d + 0efde97 commit 6400d13
Show file tree
Hide file tree
Showing 5 changed files with 94 additions and 167 deletions.
197 changes: 58 additions & 139 deletions src/lib/components/MainLayout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
import OrgMenu from "./OrgMenu.svelte";
import Button from "./common/Button.svelte";
import Logo from "./common/Logo.svelte";
import SignedIn from "./common/SignedIn.svelte";
import { SidebarCollapse16, SidebarExpand16 } from "svelte-octicons";
import type { Writable } from "svelte/store";
import type { User } from "@/api/types";
import { SIGN_IN_URL } from "@/config/config";
export let modal: boolean = false;
export let basement: "left" | "right" | null = null;
Expand Down Expand Up @@ -35,81 +37,69 @@
const me = getContext<Writable<User>>("me");
</script>

<div
class="layout"
class:left={basement === "left"}
class:right={basement === "right"}
>
<div class="modal" class:hidden={!modal}>
<slot name="modal" />
<div class="backdrop" on:click={closeModal} />
</div>
<div class="container" on:click={closeBasement}>
<nav class="small">
<Button mode="ghost" on:click={openPanel("navigation")}>
<SidebarCollapse16 />
</Button>
<div class="container">
<nav class="small">
<Button mode="ghost" on:click={openPanel("navigation")}>
<SidebarCollapse16 />
</Button>
<a href="/" class="logo"><Logo /></a>
<Button mode="ghost" on:click={openPanel("action")}>
<SidebarExpand16 />
</Button>
</nav>
<nav
class="navigation left large"
class:active={panel === "navigation"}
id="navigation"
>
<header class="header">
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarExpand16 />
</Button>
</div>
<a href="/" class="logo"><Logo /></a>
<Button mode="ghost" on:click={openPanel("action")}>
<SidebarExpand16 />
</Button>
</nav>
<nav
class="navigation left large"
class:active={panel === "navigation"}
id="navigation"
>
<header class="header">
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarExpand16 />
</Button>
</div>
<a href="/" class="logo"><Logo /></a>
</header>
<main><slot name="navigation" /></main>
</nav>
<main class="content">
<slot name="content" />
</main>
<nav
class="action right large"
class:active={panel === "action"}
id="action"
>
<header class="header">
</header>
<main><slot name="navigation" /></main>
</nav>
<main class="content">
<slot name="content" />
</main>
<nav class="action right large" class:active={panel === "action"} id="action">
<header class="header">
<SignedIn>
<OrgMenu />
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarCollapse16 />
</Button>
</div>
</header>
<main><slot name="action" /></main>
<footer>
<p>{$me?.name}</p>
<p>Language</p>
<p>Help</p>
</footer>
</nav>
<div
class="small overlay"
class:active={panel !== null}
role="presentation"
on:click={closePanel}
on:keydown={closePanel}
/>
</div>
<div class="basement">
<slot name="basement" />
</div>
<Button slot="signedOut" mode="primary" href={SIGN_IN_URL}
>Sign In</Button
>
</SignedIn>
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarCollapse16 />
</Button>
</div>
</header>
<main><slot name="action" /></main>
<footer>
<SignedIn>{$me.name}</SignedIn>
<p>Language</p>
<p>Help</p>
</footer>
</nav>
<div
class="small overlay"
class:active={panel !== null}
role="presentation"
on:click={closePanel}
on:keydown={closePanel}
/>
</div>

<style>
.container {
display: flex;
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
gap: 0;
flex-shrink: 0;
background: var(--gray-1, #f5f6f7);
Expand Down Expand Up @@ -265,75 +255,4 @@
}
}
/* End Mobile Styles */
/* Basement and Layout Shift */
.layout {
position: relative;
width: 100vw;
height: 100vh;
}
.container {
transform: translateX(0);
transition:
transform 0.5s ease-in-out,
border-radius 0.5s ease-in-out,
box-shadow 0.5s linear;
}
.basement {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: -1;
width: 100%;
height: 100%;
background: var(--blue-1);
}
.layout.right .container {
transform: translateX(-75%);
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
overflow: hidden;
box-shadow: 0px 4px 16px 4px var(--gray-3, #99a8b3);
}
.layout.right .basement {
padding-left: 25%;
}
.layout.left .container {
transform: translateX(75%);
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
overflow: hidden;
box-shadow: 0px 4px 16px 4px var(--gray-3, #99a8b3);
}
.layout.left .basement {
padding-right: 25%;
}
/* Modal */
.modal {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.modal.hidden {
display: none;
background-color: transparent;
}
.modal .backdrop {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background: rgba(35, 57, 68, 0.5);
backdrop-filter: blur(2px);
}
</style>
13 changes: 13 additions & 0 deletions src/lib/components/common/SignedIn.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<script lang="ts">
import { getContext } from "svelte";
import type { Writable } from "svelte/store";
import type { User } from "@/api/types";
const me = getContext<Writable<User>>("me");
</script>

{#if $me}
<slot />
{:else}
<slot name="signedOut" />
{/if}
17 changes: 1 addition & 16 deletions src/lib/components/stories/MainLayout.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,9 @@
handlers: [addons.data],
},
},
argTypes: {
basement: {
control: { type: "select" },
options: ["left", "right", null],
},
},
};
let args = {
modal: false,
basement: null,
};
let args = {};
</script>

<Template let:args>
Expand Down Expand Up @@ -170,9 +161,3 @@
}}
{...args}
/>

<Story name="Modal" args={{ ...args, modal: true }} />

<Story name="Basement (Left)" args={{ ...args, basement: "left" }} />

<Story name="Basement (Right)" args={{ ...args, basement: "right" }} />
13 changes: 9 additions & 4 deletions src/routes/app/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import AddOns from "./sidebar/AddOns.svelte";
import type { AddOnListItem } from "@/lib/api/types";
import type { Page } from "@/api/types";
import SignedIn from "@/lib/components/common/SignedIn.svelte";
export let data: {
pinnedAddons: Promise<Page<AddOnListItem>>;
Expand All @@ -22,14 +23,18 @@
<MainLayout>
<svelte:fragment slot="navigation">
<Documents />
<Projects />
<SignedIn>
<Projects />
</SignedIn>
</svelte:fragment>

<slot slot="content" />

<svelte:fragment slot="action">
<Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
<Actions />
<AddOns pinnedAddOns={data.pinnedAddons} />
<SignedIn>
<Button mode="primary"><PlusCircle16 /> Upload Documents</Button>
<Actions />
<AddOns pinnedAddOns={data.pinnedAddons} />
</SignedIn>
</svelte:fragment>
</MainLayout>
21 changes: 13 additions & 8 deletions src/routes/app/sidebar/Documents.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,21 @@
import Flex from "@/lib/components/common/Flex.svelte";
import SidebarItem from "@/lib/components/sidebar/SidebarItem.svelte";
import { Globe16, Infinity16, Lock16, Organization16 } from "svelte-octicons";
import SignedIn from "@/lib/components/common/SignedIn.svelte";
</script>

<Flex direction="column">
<SidebarItem hover><Infinity16 /> {$_("projects.allDocuments")}</SidebarItem>
<SidebarItem hover><Globe16 /> {$_("projects.yourPubDocuments")}</SidebarItem>
<SidebarItem hover><Lock16 /> {$_("projects.yourDocuments")}</SidebarItem>
<SidebarItem hover>
<Organization16 />
{$_("projects.orgDocuments", {
values: { name: "MuckRock" },
})}
</SidebarItem>
<SignedIn>
<SidebarItem hover
><Globe16 /> {$_("projects.yourPubDocuments")}</SidebarItem
>
<SidebarItem hover><Lock16 /> {$_("projects.yourDocuments")}</SidebarItem>
<SidebarItem hover>
<Organization16 />
{$_("projects.orgDocuments", {
values: { name: "MuckRock" },
})}
</SidebarItem>
</SignedIn>
</Flex>

0 comments on commit 6400d13

Please sign in to comment.