forge/Anvil
1
0
Fork 0
Code Pull requests Activity

refactor: extract sidebar to component

Browse source 
I realised that I must not show the sidebar everywhere. So to not move
code around I extracted it into its own component. This one is not
matching the design (because of the links etc.) but is a step in the
direction.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch 2024-07-05 12:07:05 +02:00
parent ead9d281d0
commit 841ddd5a17
No known key found for this signature in database
GPG key ID: 5A668E771F1ED854
3 changed files with 50 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/lib/components/atoms/SettingsSidebar.svelte
View file

@ -12,7 +12,13 @@ You should have received a copy of the GNU Affero General Public License along w
-->
<script>
import { AppRail, AppRailAnchor, AppRailTile, getDrawerStore } from '@skeletonlabs/skeleton';
import {
AppRail,
AppRailAnchor,
AppRailTile,
Drawer,
getDrawerStore
} from '@skeletonlabs/skeleton';
import { _, locale, locales } from 'svelte-i18n';
import { Bell24, Gear24, Key24, Paintbrush24, Person24 } from 'svelte-octicons';
@ -25,6 +31,14 @@ You should have received a copy of the GNU Affero General Public License along w
}
</script>
<Drawer>
{#if $drawerStore.id === 'profile'}
<b>Profile settings go here</b>
{:else}
{$drawerStore.id}
{/if}
</Drawer>
<AppRail aspectRatio="auto" gap="gap-8" height="h-auto" width="w-[230px]" spacing="my-2">
<svelte:fragment slot="lead">
<AppRailTile

55
src/routes/+layout.svelte
View file

@ -5,7 +5,12 @@ SPDX-FileCopyrightText: 2024 André Jaenisch
SPDX-License-Identifier: AGPL-3.0-or-later
-->
<script lang="ts">
<script>
import { locale } from 'svelte-i18n';
import { initializeStores } from '@skeletonlabs/skeleton';
import { mapLocaleToDir } from '$lib/i18n';
// The ordering of these imports is critical to your app working properly
//import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
import '../theme.postcss';
@ -13,59 +18,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
//import '@skeletonlabs/skeleton/styles/skeleton.css';
// Most of your app wide CSS should be put in this file
import '../app.postcss';
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
import { locale, locales } from 'svelte-i18n';
import { mapLocaleToDir } from '$lib/i18n';
locale.subscribe((l) => {
if (typeof document !== 'undefined') {
document.dir = mapLocaleToDir(l);
}
});
initializeStores();
</script>
<!-- App Shell -->
<AppShell>
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar>
<svelte:fragment slot="lead">
<strong class="text-xl">Anvil</strong>
</svelte:fragment>
<svelte:fragment slot="trail">
<select bind:value={$locale} class="select">
{#each $locales as locale}
<option value={locale}>{locale}</option>
{/each}
</select>
<a
class="btn btn-sm variant-ghost-surface"
href="https://matrix.to/#/#general-forgefed:matrix.batsense.net"
target="_blank"
rel="noreferrer"
>
Matrix
</a>
<a
class="btn btn-sm variant-ghost-surface"
href="https://forgefed.org"
target="_blank"
rel="noreferrer"
>
ForgeFed
</a>
<a
class="btn btn-sm variant-ghost-surface"
href="https://codeberg.org/anvil/anvil"
target="_blank"
rel="noreferrer"
>
Code
</a>
</svelte:fragment>
</AppBar>
</svelte:fragment>
<!-- Page Route Content -->
<slot />
</AppShell>

25
stories/atoms/SettingsSidebar.stories.ts Normal file
View file

@ -0,0 +1,25 @@
/* Stories for SettingsSidebar atom.
* Copyright (C) 2024 André Jaenisch
* SPDX-FileCopyrightText: 2024 André Jaenisch
* SPDX-License-Identifier: AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import type { Meta, StoryObj } from '@storybook/svelte';
import SettingsSidebar from '$lib/components/atoms/SettingsSidebar.svelte';
const meta = {
title: 'Atoms/SettingsSidebar',
component: SettingsSidebar,
tags: ['autodocs']
} satisfies Meta<SettingsSidebar>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Plain: Story = {};