mirror of
https://github.com/wukko/cobalt.git
synced 2025-06-12 21:27:39 +02:00
web/settings: move sub navigation into its own component
This commit is contained in:
wukko
230
web/src/components/subnav/PageNav.svelte
Normal file
230
web/src/components/subnav/PageNav.svelte
Normal file
@ -0,0 +1,230 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
import { goto } from "$app/navigation";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
import { t } from "$lib/i18n/translations";
|
||||
|
||||
import IconArrowLeft from "@tabler/icons-svelte/IconArrowLeft.svelte";
|
||||
|
||||
export let pageName: string;
|
||||
export let homeNavPath: string;
|
||||
export let homeDesktopPath: string;
|
||||
export let homeTitle: string;
|
||||
export let pageSubtitle = "";
|
||||
|
||||
let screenWidth: number;
|
||||
|
||||
$: currentPageTitle = $page.url.pathname.split("/").at(-1);
|
||||
$: stringPageTitle =
|
||||
currentPageTitle !== pageName
|
||||
? ` / ${$t(`${pageName}.page.${currentPageTitle}`)}`
|
||||
: "";
|
||||
|
||||
$: isMobile = screenWidth <= 750;
|
||||
$: isHome = $page.url.pathname === homeNavPath;
|
||||
$: {
|
||||
if (browser && !isMobile && isHome) {
|
||||
goto(homeDesktopPath, { replaceState: true });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
{homeTitle}{stringPageTitle} ~ {$t("general.cobalt")}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
<svelte:window bind:innerWidth={screenWidth} />
|
||||
|
||||
<div id="{pageName}-page" class="subnav-page">
|
||||
<div class="subnav-sidebar" class:back-visible={!isHome && isMobile}>
|
||||
<div class="subnav-header">
|
||||
{#if isMobile}
|
||||
{#if !isHome}
|
||||
<a
|
||||
class="back-button"
|
||||
href={homeNavPath}
|
||||
role="button"
|
||||
aria-label={$t("a11y.general.back")}
|
||||
>
|
||||
<IconArrowLeft />
|
||||
</a>
|
||||
{/if}
|
||||
<h3
|
||||
class="subnav-page-title"
|
||||
aria-level="1"
|
||||
tabindex="-1"
|
||||
data-first-focus
|
||||
data-focus-ring-hidden
|
||||
>
|
||||
{#if !isHome}
|
||||
{$t(`${pageName}.page.${currentPageTitle}`)}
|
||||
{:else}
|
||||
{homeTitle}
|
||||
{/if}
|
||||
</h3>
|
||||
{:else}
|
||||
{#if pageSubtitle}
|
||||
<div class="subtext subnav-subtitle">
|
||||
{pageSubtitle}
|
||||
</div>
|
||||
{/if}
|
||||
<h2 class="subnav-page-title" aria-level="1">
|
||||
{homeTitle}
|
||||
</h2>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<nav class="subnav-navigation" class:visible-mobile={isMobile && isHome}>
|
||||
<slot name="navigation"></slot>
|
||||
{#if isMobile && isHome && pageSubtitle}
|
||||
<div class="subtext subnav-subtitle center">
|
||||
{pageSubtitle}
|
||||
</div>
|
||||
{/if}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{#if !isMobile || !isHome}
|
||||
<main
|
||||
id="{pageName}-page-content"
|
||||
class="subnav-page-content"
|
||||
tabindex="-1"
|
||||
data-first-focus
|
||||
data-focus-ring-hidden
|
||||
>
|
||||
<slot name="content"></slot>
|
||||
</main>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.subnav-page {
|
||||
--subnav-nav-width: 250px;
|
||||
--subnav-padding: 30px;
|
||||
--subnav-padding-small: calc(
|
||||
var(--subnav-padding) - var(--padding)
|
||||
);
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: var(--subnav-nav-width) 1fr;
|
||||
overflow: hidden;
|
||||
padding-left: var(--subnav-padding);
|
||||
}
|
||||
|
||||
.subnav-page-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 600px;
|
||||
padding: calc(var(--subnav-padding) / 2);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.subnav-sidebar,
|
||||
.subnav-navigation {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.subnav-sidebar {
|
||||
width: var(--subnav-nav-width);
|
||||
padding-top: var(--subnav-padding);
|
||||
}
|
||||
|
||||
.subnav-sidebar.back-visible {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.subnav-sidebar {
|
||||
gap: var(--padding);
|
||||
}
|
||||
|
||||
.subnav-navigation {
|
||||
gap: var(--padding);
|
||||
padding-bottom: var(--padding);
|
||||
}
|
||||
|
||||
.subnav-header {
|
||||
--back-padding: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
.subnav-subtitle {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subnav-subtitle.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--secondary);
|
||||
gap: var(--back-padding);
|
||||
padding: var(--back-padding);
|
||||
|
||||
position: absolute;
|
||||
left: var(--back-padding);
|
||||
}
|
||||
|
||||
.back-button:active {
|
||||
background: var(--button-hover-transparent);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.back-button :global(svg) {
|
||||
stroke-width: 1.8px;
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.subnav-page {
|
||||
--subnav-nav-width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
grid-template-columns: 1fr;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subnav-navigation {
|
||||
padding: var(--padding);
|
||||
padding-bottom: calc(var(--padding) * 2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subnav-navigation.visible-mobile {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.subnav-page-content {
|
||||
padding: var(--padding) 0;
|
||||
padding-top: 0;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.subnav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: sticky;
|
||||
padding: var(--padding);
|
||||
gap: 4px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.subnav-sidebar {
|
||||
gap: 0px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.subnav-page-title {
|
||||
text-align: center;
|
||||
letter-spacing: -0.3px;
|
||||
font-size: 16.5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
47
web/src/components/subnav/PageNavSection.svelte
Normal file
47
web/src/components/subnav/PageNavSection.svelte
Normal file
@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
export let sectionTitle: string = "";
|
||||
</script>
|
||||
|
||||
<div id="subnav-section">
|
||||
{#if sectionTitle}
|
||||
<div id="subnav-section-title">
|
||||
{sectionTitle}
|
||||
</div>
|
||||
{/if}
|
||||
<div id="subnav-section-categories">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#subnav-section,
|
||||
#subnav-section-categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#subnav-section {
|
||||
gap: 6px;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#subnav-section-title {
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--gray);
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
#subnav-section-categories {
|
||||
background: var(--button);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--button-box-shadow);
|
||||
}
|
||||
|
||||
#subnav-section-title {
|
||||
padding-left: calc(7px * 1.5);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
web/src/components/subnav/PageNavTab.svelte
Normal file
129
web/src/components/subnav/PageNavTab.svelte
Normal file
@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
|
||||
import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
|
||||
|
||||
export let tabPath: string;
|
||||
export let tabTitle: string;
|
||||
export let iconColor: "gray" | "blue" | "green" = "gray";
|
||||
|
||||
$: isActive = $page.url.pathname === tabPath;
|
||||
</script>
|
||||
|
||||
<a
|
||||
class="subnav-tab"
|
||||
href={tabPath}
|
||||
class:active={isActive}
|
||||
role="button"
|
||||
>
|
||||
<div class="subnav-tab-left">
|
||||
<div class="tab-icon" style="background: var(--{iconColor})">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="subnav-tab-text">
|
||||
{tabTitle}
|
||||
</div>
|
||||
</div>
|
||||
<div class="subnav-tab-chevron">
|
||||
<IconChevronRight />
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.subnav-tab {
|
||||
--small-padding: 4px;
|
||||
--big-padding: 6px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: calc(var(--small-padding) * 2);
|
||||
padding: var(--big-padding);
|
||||
font-weight: 500;
|
||||
background: var(--primary);
|
||||
color: var(--button-text);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
|
||||
text-decoration: none;
|
||||
text-decoration-line: none;
|
||||
}
|
||||
|
||||
.subnav-tab-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: calc(var(--big-padding) * 1.5);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: var(--small-padding);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.subnav-tab .tab-icon :global(svg) {
|
||||
stroke-width: 1.5px;
|
||||
stroke: var(--white);
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.subnav-tab-chevron :global(svg) {
|
||||
display: none;
|
||||
stroke-width: 2px;
|
||||
stroke: var(--gray);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.subnav-tab:hover {
|
||||
background: var(--button-hover-transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.subnav-tab:active {
|
||||
background: var(--button-hover-transparent);
|
||||
}
|
||||
|
||||
.subnav-tab.active {
|
||||
background: var(--secondary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.subnav-tab-text {
|
||||
font-size: 14.5px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
.subnav-tab {
|
||||
--big-padding: 7px;
|
||||
background: none;
|
||||
padding: var(--big-padding) 11px;
|
||||
}
|
||||
|
||||
.subnav-tab:not(:last-child) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
box-shadow: 48px 3px 0px -1.8px var(--button-stroke);
|
||||
}
|
||||
|
||||
.subnav-tab:not(:first-child) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.subnav-tab-left {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.subnav-tab-chevron :global(svg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user