Skip to content

Commit

Permalink
Update MainLayout
Browse files Browse the repository at this point in the history
  • Loading branch information
@allanlasser
allanlasser committed Apr 3, 2024
1 parent fa43846 commit 3c792b5
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 118 deletions.
215 changes: 108 additions & 107 deletions src/lib/components/MainLayout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<script lang="ts">
import { getContext } from "svelte";
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 { type Org, type User } from "@/api/types";
import { SIGN_IN_URL } from "@/config/config";
import Flex from "./common/Flex.svelte";
import UserMenu from "./accounts/UserMenu.svelte";
import OrgMenu from "./accounts/OrgMenu.svelte";
export let modal: boolean = false;
export let basement: "left" | "right" | null = null;
Expand Down Expand Up @@ -35,57 +37,72 @@
}
const me = getContext<Writable<User>>("me");
const org = getContext<Writable<Org>>("org");
console.log(me, org);
</script>

<div class="container">
<nav class="small">
<Button mode="ghost" on:click={openPanel("navigation")}>
<SidebarCollapse16 />
</Button>
<header>
{#if $$slots.navigation}
<div class="small openPane">
<Button mode="ghost" on:click={openPanel("navigation")}>
<SidebarCollapse16 />
</Button>
</div>
{/if}
<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}>
<div class="breadcrumbs"></div>
<SignedIn>
<Flex>
<OrgMenu org={$org} />
<UserMenu user={$me} />
</Flex>
<Button slot="signedOut" mode="primary" href={SIGN_IN_URL}>
Sign In
</Button>
</SignedIn>
{#if $$slots.action}
<div class="small openPane">
<Button mode="ghost" on:click={openPanel("action")}>
<SidebarExpand16 />
</Button>
</div>
<a href="/" class="logo"><Logo /></a>
</header>
<main><slot name="navigation" /></main>
</nav>
<main class="content">
<slot name="content" />
{/if}
</header>

<main>
{#if $$slots.navigation}
<nav
class="navigation left"
class:active={panel === "navigation"}
id="navigation"
>
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarExpand16 />
</Button>
</div>
<slot name="navigation" />
</nav>
{/if}

<article class="content">
<slot name="content" />
</article>

{#if $$slots.action}
<nav class="action right" class:active={panel === "action"} id="action">
<div class="small closePane">
<Button mode="ghost" on:click={closePanel}>
<SidebarCollapse16 />
</Button>
</div>
<slot name="action" />
</nav>
{/if}
</main>
<nav class="action right large" class:active={panel === "action"} id="action">
<header class="header">
<SignedIn>
<OrgMenu />
<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}
Expand All @@ -98,59 +115,74 @@
<style>
.container {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
gap: 0;
flex-shrink: 0;
background: var(--gray-1, #f5f6f7);
}
header {
display: flex;
padding: 1rem;
gap: 0.5rem;
align-items: flex-start;
align-self: stretch;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: var(--white, #ffffff);
border-bottom: 1px solid var(--gray-2, #d8dee2);
box-shadow: var(--shadow);
flex: 0 0 0;
padding: 0 1rem;
z-index: 1;
}
main {
display: flex;
flex-direction: column;
padding: 1rem;
gap: 2rem;
flex: 1 0 0;
max-height: 100%;
overflow-y: auto;
display: flex;
flex-direction: row;
overflow: hidden;
}
nav {
flex: 1 0 0;
min-width: 16rem;
max-width: 18rem;
max-height: 100%;
overflow-y: auto;
display: flex;
flex-direction: column;
position: relative;
padding: 1rem;
gap: 1rem;
}
article {
flex: 1 0 0;
display: flex;
flex-direction: row;
max-height: 100%;
max-width: 100%;
overflow-y: auto;
}
.logo {
height: 2rem;
height: 1.5rem;
width: auto;
padding: 0 0.5rem;
}
.breadcrumbs {
flex: 1 0 0;
}
.navigation {
border-right: 1px solid var(--gray-2, #d8dee2);
}
.action {
border-left: 1px solid var(--gray-2, #d8dee2);
}
.action footer {
display: flex;
width: 100%;
position: sticky;
bottom: 0;
padding: 1rem;
z-index: 1;
flex-direction: column;
align-items: flex-start;
gap: 0.875rem;
background: var(--gray-1, #f5f6f7);
}
.content {
padding: 0;
}
Expand All @@ -165,35 +197,14 @@
display: none;
}
nav.small {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0.5rem;
flex: 0 0 0;
max-width: unset;
border-bottom: 1px solid var(--gray-2, #d8dee2);
}
nav.small .logo {
height: 1.5rem;
width: auto;
}
.small.overlay {
display: block;
visibility: hidden;
}
@media (max-width: 64rem) {
.container {
flex-direction: column;
}
.small {
display: block;
}
nav.large {
header {
gap: 1rem;
}
nav {
min-width: 33vh;
max-width: 100vh;
display: flex;
Expand All @@ -205,35 +216,25 @@
transition: transform 0.25s ease-in-out;
overflow: hidden;
}
nav.large.right {
nav.right {
transform: translateX(100%);
right: 0;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
nav.large.left {
nav.left {
left: 0;
transform: translateX(-100%);
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
}
nav.large.active {
nav.active {
display: flex;
transform: translateX(0);
transition: transform 0.25s ease-in-out;
}
nav.large header {
align-items: center;
flex-direction: row-reverse;
padding: 0.5rem;
}
nav.large .logo {
display: none;
}
nav.small {
display: flex;
}
.small.overlay {
visibility: hidden;
position: fixed;
z-index: 1;
background: var(--gray-5, #233944);
Expand Down
11 changes: 1 addition & 10 deletions src/lib/components/accounts/OrgMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,18 +63,9 @@
width: 2rem;
}
/* Small styles */
@media (max-width: 64rem) {
.avatar {
height: 1.5rem;
width: 1.5rem;
}
.name {
font-size: var(--font-l, 1.25rem);
}
.premium {
height: 1.5rem;
width: 1.5rem;
display: none;
}
}
</style>
8 changes: 7 additions & 1 deletion src/lib/components/accounts/UserMenu.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
<Dropdown id={dropdownId} position="right">
<SidebarItem slot="title">
<img src={user.avatar_url} alt="Avatar" class="avatar" />
{user.name}
<span class="name">{user.name}</span>
<div class="dropdownArrow"><ChevronDown16 /></div>
</SidebarItem>
<Menu>
Expand Down Expand Up @@ -69,4 +69,10 @@
display: flex;
align-items: center;
}
@media (max-width: 64rem) {
.name {
display: none;
}
}
</style>

0 comments on commit 3c792b5

Please sign in to comment.