refactor: separate top bar component
This commit is contained in:
@@ -1,146 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from "$app/paths";
|
||||
import { CircleQuestionMark, Moon, Sun } from "@lucide/svelte";
|
||||
import StatusDot from "./StatusDot.svelte";
|
||||
import IconButton from "./ui/IconButton.svelte";
|
||||
|
||||
interface Props {
|
||||
theme: "light" | "dark";
|
||||
crumb?: string;
|
||||
status?: string;
|
||||
ontoggle: () => void;
|
||||
}
|
||||
|
||||
let { theme, crumb, status = "AUTO PIPELINE", ontoggle }: Props = $props();
|
||||
|
||||
let lang = $state("RU");
|
||||
</script>
|
||||
|
||||
<header class="topbar">
|
||||
<a class="brand" href={resolve("/")}>
|
||||
<span class="brand-mark">EP</span>
|
||||
<span>easy-png-tools</span>
|
||||
{#if crumb}<span class="version">{crumb}</span>{/if}
|
||||
</a>
|
||||
<nav class="nav">
|
||||
<a href={resolve("/preview/demo")}>Workspace</a>
|
||||
<a href={resolve("/preview/list-tools")}>Catalog</a>
|
||||
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
|
||||
<a href={resolve("/preview/tools/remove-background-png")}
|
||||
>Background remover</a
|
||||
>
|
||||
</nav>
|
||||
<div class="top-actions">
|
||||
<span class="status"><StatusDot /> {status}</span>
|
||||
<IconButton
|
||||
icon={CircleQuestionMark}
|
||||
label="Help"
|
||||
variant="clear"
|
||||
onclick={() => {}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={theme === "light" ? Moon : Sun}
|
||||
label="Toggle theme"
|
||||
variant="clear"
|
||||
onclick={ontoggle}
|
||||
/>
|
||||
<div class="lang" role="group" aria-label="Language">
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "RU"}
|
||||
onclick={() => (lang = "RU")}>RU</button
|
||||
><span class="lang-div">/</span>
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "EN"}
|
||||
onclick={() => (lang = "EN")}>EN</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 64px;
|
||||
padding: 0 clamp(20px, 4vw, 64px);
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font: 600 14px var(--font-mono);
|
||||
color: var(--foreground);
|
||||
text-decoration: none;
|
||||
}
|
||||
.brand-mark {
|
||||
background: var(--blue);
|
||||
color: #fff;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: 11px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.version {
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--blue);
|
||||
}
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 22px;
|
||||
margin-right: 28px;
|
||||
margin-left: auto;
|
||||
}
|
||||
.nav a {
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav a:hover {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.lang-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
padding: 6px 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lang-div {
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.lang-btn.active {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from "$app/paths";
|
||||
import LangToggle from "../ui/LangToggle.svelte";
|
||||
import ThemeToggle from "../ui/ThemeToggle.svelte";
|
||||
import TopNav from "../ui/TopNav.svelte";
|
||||
|
||||
interface Props {
|
||||
theme: "light" | "dark";
|
||||
crumb?: string;
|
||||
ontoggle: () => void;
|
||||
}
|
||||
|
||||
let { theme, crumb, ontoggle }: Props = $props();
|
||||
</script>
|
||||
|
||||
<header class="topbar">
|
||||
<a class="brand" href={resolve("/")}>
|
||||
<span class="brand-mark">EP</span>
|
||||
<span>easy-png-tools</span>
|
||||
{#if crumb}
|
||||
<span class="version">{crumb}</span>
|
||||
{/if}
|
||||
</a>
|
||||
<TopNav />
|
||||
<div class="top-actions">
|
||||
<ThemeToggle {theme} {ontoggle} />
|
||||
<LangToggle />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--space-xl);
|
||||
background: var(--color-background);
|
||||
border-bottom: var(--size-border) solid var(--color-border);
|
||||
}
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
font: bold var(--font-button) var(--font-mono);
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
.brand-mark {
|
||||
background: var(--color-main);
|
||||
color: var(--color-background);
|
||||
width: var(--space-brand);
|
||||
height: var(--space-brand);
|
||||
font-size: var(--font-brand);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.version {
|
||||
font: var(--font-text) var(--font-mono);
|
||||
letter-spacing: var(--space-text-l);
|
||||
color: var(--color-main);
|
||||
}
|
||||
.top-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xl);
|
||||
}
|
||||
</style>
|
||||
@@ -27,8 +27,12 @@
|
||||
aria-label={ariaLabel}
|
||||
onclick={() => onclick?.()}
|
||||
>
|
||||
{#if icon}<Icon {icon} size={14} />{/if}
|
||||
{#if icon}
|
||||
<Icon {icon} size={14} />
|
||||
{/if}
|
||||
{#if label}
|
||||
<span class="btn-label">{label}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
<script lang="ts">
|
||||
let lang = $state("RU");
|
||||
|
||||
// TODO: change to sectioned dual buttons
|
||||
</script>
|
||||
|
||||
<div class="lang" role="group" aria-label="Language">
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "RU"}
|
||||
onclick={() => (lang = "RU")}>RU</button
|
||||
><span class="lang-div">/</span>
|
||||
<button
|
||||
type="button"
|
||||
class="lang-btn"
|
||||
class:active={lang === "EN"}
|
||||
onclick={() => (lang = "EN")}>EN</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.lang {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
.lang-btn {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
font: 10px var(--font-mono);
|
||||
padding: 6px 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lang-div {
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
.lang-btn.active {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,20 @@
|
||||
<script lang="ts">
|
||||
import { Moon, Sun } from "@lucide/svelte";
|
||||
import IconButton from "../ui/IconButton.svelte";
|
||||
|
||||
interface Props {
|
||||
theme: "light" | "dark";
|
||||
ontoggle: () => void;
|
||||
}
|
||||
|
||||
let { theme, ontoggle }: Props = $props();
|
||||
|
||||
// TODO: change icon animations - custom button instead of IconButton
|
||||
</script>
|
||||
|
||||
<IconButton
|
||||
icon={theme === "light" ? Moon : Sun}
|
||||
label="Toggle theme"
|
||||
variant="clear"
|
||||
onclick={ontoggle}
|
||||
/>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { resolve } from "$app/paths";
|
||||
</script>
|
||||
|
||||
<nav class="nav">
|
||||
<a href={resolve("/preview/demo")}>Workspace</a>
|
||||
<a href={resolve("/preview/list-tools")}>Catalog</a>
|
||||
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
|
||||
<a href={resolve("/preview/tools/remove-background-png")}>
|
||||
Background remover
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xxl);
|
||||
margin-right: var(--space-xxxl);
|
||||
margin-left: auto;
|
||||
}
|
||||
.nav a {
|
||||
color: var(--color-text);
|
||||
font: bold var(--font-text) var(--font-mono);
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav a:hover {
|
||||
color: var(--color-main);
|
||||
}
|
||||
</style>
|
||||
@@ -127,11 +127,20 @@
|
||||
--space-m: 8px;
|
||||
--space-l: 12px;
|
||||
--space-xl: 16px;
|
||||
--space-xxl: 24px;
|
||||
--space-xxxl: 32px;
|
||||
|
||||
--space-brand: 32px;
|
||||
|
||||
--space-text-s: 0;
|
||||
--space-text-m: 0.06em;
|
||||
--space-text-l: 0.12em;
|
||||
|
||||
--size-border: 1px;
|
||||
--size-border-thick: 2px;
|
||||
|
||||
--font-text: 10px;
|
||||
--font-brand: 12px;
|
||||
--font-button: 14px;
|
||||
|
||||
--radius-s: 0px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/state";
|
||||
import Footer from "$lib/components/kit/layout/Footer.svelte";
|
||||
import TopBar from "$lib/components/kit/TopBar.svelte";
|
||||
import TopBar from "$lib/components/kit/layout/TopBar.svelte";
|
||||
import type { Snippet } from "svelte";
|
||||
import "../../preview.css";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user