Skip to content

Commit

Permalink
Adds Basement and Modal layers to MainLayout
Browse files Browse the repository at this point in the history
  • Loading branch information
@allanlasser
allanlasser committed Mar 5, 2024
1 parent 5f285a8 commit 7f6b771
Show file tree
Hide file tree
Showing 2 changed files with 193 additions and 56 deletions.
205 changes: 153 additions & 52 deletions src/lib/components/MainLayout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@
import type { Writable } from "svelte/store";
import type { User } from "@/api/types";
export let modal: boolean = false;
export let basement: "left" | "right" | null = null;
let panel: "navigation" | "action" | null = null;
function closePanel() {
Expand All @@ -19,67 +22,94 @@
};
}
function closeBasement() {
if (basement !== null) {
basement = null;
}
}
function closeModal() {
modal = false;
}
const me = getContext<Writable<User>>("me");
</script>

<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>
<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>
<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">
<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}
/>
<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">
<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>
</div>

<style>
.container {
display: flex;
width: 100vw;
height: 100vh;
width: 100%;
height: 100%;
gap: 0;
flex-shrink: 0;
background: var(--gray-1, #f5f6f7);
Expand Down Expand Up @@ -235,4 +265,75 @@
}
}
/* 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>
44 changes: 40 additions & 4 deletions src/lib/components/stories/MainLayout.stories.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,40 @@
import PageToolbar from "../common/PageToolbar.svelte";
import Search from "../Search.svelte";
import { addons } from "@/addons/browser/stories/mockData";
let results = documents as DocumentResults;
export const meta = {
title: "Components / Main Layout",
component: MainLayout,
parameters: { layout: "fullscreen" },
parameters: {
layout: "fullscreen",
msw: {
handlers: [addons.data],
},
},
argTypes: {
basement: {
control: { type: "select" },
options: ["left", "right", null],
},
},
};
let args = {
modal: false,
basement: null,
};
</script>

<Template>
<MainLayout>
<Template let:args>
<MainLayout {...args}>
<svelte:fragment slot="modal">
<div style="width: 50%; height: 50%; background: white">
<h1>Modal</h1>
</div>
</svelte:fragment>
<svelte:fragment slot="navigation">
<Flex direction="column">
<SidebarItem hover
Expand Down Expand Up @@ -108,35 +131,48 @@
</Flex>
</SidebarGroup>
</svelte:fragment>
<svelte:fragment slot="basement">
<h1>Basement</h1>
</svelte:fragment>
</MainLayout>
</Template>

<Story name="Desktop" />
<Story name="Desktop" {...args} />

<Story
name="Tablet (H)"
parameters={{
viewport: { defaultOrientation: "landscape", defaultViewport: "tablet" },
}}
{...args}
/>

<Story
name="Tablet (V)"
parameters={{
viewport: { defaultOrientation: "tablet", defaultViewport: "tablet" },
}}
{...args}
/>

<Story
name="Mobile (L)"
parameters={{
viewport: { defaultOrientation: "portrait", defaultViewport: "mobile2" },
}}
{...args}
/>

<Story
name="Mobile (S)"
parameters={{
viewport: { defaultOrientation: "portrait", defaultViewport: "mobile1" },
}}
{...args}
/>

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

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

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

0 comments on commit 7f6b771

Please sign in to comment.