mirror of
https://github.com/Art051/immich.git
synced 2025-08-11 19:29:00 +00:00
100866be37
* collapsable menu in web, more mobile friendly
* finished sidebar collapsing
* make navigation bar more responsive
* make search bar and admin button more responsive
* fix administration small button coloring
* fix upload button over opened search bar
* open search directly on small devices
* make admin sidebar more responsive
* add small edge to admin content
* server stats more responsive
* fix eslint errors
* server stats flex wrap
* Delete .env
* Revert change in hooks.server.ts
* Revert change in vite.config.js
* little clean up, replace {``} with ""
* remove package-lock.json in root folder
* revert upload button to linkbutton
* show extended sidebar also on focus
* combine changes in side-bar.svelte and
+layout.svelte to side-bar-section
* fix navigation-bar cog color in light theme
---------
Co-authored-by: Paul Paffe <paul.paffe@gmx.net>
96 lines
3.2 KiB
Svelte
96 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
// DO NOT include `import { page } from '$app/stores'` here, because this can
|
|
// lead to pages not being unmounted, which then causes weird page nesting
|
|
// and routing issues.
|
|
//
|
|
// This is an issue in SvelteKit caused by using the page store in layouts and
|
|
// using transitions on pages: https://github.com/sveltejs/kit/issues/7405
|
|
|
|
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
|
|
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
|
|
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
|
|
import Sync from 'svelte-material-icons/Sync.svelte';
|
|
import Cog from 'svelte-material-icons/Cog.svelte';
|
|
import Server from 'svelte-material-icons/Server.svelte';
|
|
import StatusBox from '$lib/components/shared-components/status-box.svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { AppRoute } from '../../lib/constants';
|
|
import type { LayoutData } from './$types';
|
|
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
|
|
|
|
let isCollapsed: boolean;
|
|
export let data: LayoutData;
|
|
|
|
// Circumvents the need to import the page store. Should be replaced by
|
|
// `$page.data.meta.title` once issue #7405 of SvelteKit is resolved.
|
|
const getPageTitle = (routeId: string | null) => {
|
|
switch (routeId) {
|
|
case AppRoute.ADMIN_USER_MANAGEMENT:
|
|
return 'User Management';
|
|
case AppRoute.ADMIN_SETTINGS:
|
|
return 'System Settings';
|
|
case AppRoute.ADMIN_JOBS:
|
|
return 'Jobs';
|
|
case AppRoute.ADMIN_STATS:
|
|
return 'Server Stats';
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<NavigationBar user={data.user} />
|
|
|
|
<main>
|
|
<section class="grid md:grid-cols-[250px_auto] grid-cols-[70px_auto] pt-[72px] h-screen">
|
|
<SideBarSection bind:isCollapsed>
|
|
<SideBarButton
|
|
title="Users"
|
|
logo={AccountMultipleOutline}
|
|
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
|
|
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
|
|
{isCollapsed}
|
|
/>
|
|
<SideBarButton
|
|
title="Jobs"
|
|
logo={Sync}
|
|
isSelected={data.routeId === AppRoute.ADMIN_JOBS}
|
|
on:selected={() => goto(AppRoute.ADMIN_JOBS)}
|
|
{isCollapsed}
|
|
/>
|
|
<SideBarButton
|
|
title="Settings"
|
|
logo={Cog}
|
|
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
|
|
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
|
|
{isCollapsed}
|
|
/>
|
|
<SideBarButton
|
|
title="Server Stats"
|
|
logo={Server}
|
|
isSelected={data.routeId === AppRoute.ADMIN_STATS}
|
|
on:selected={() => goto(AppRoute.ADMIN_STATS)}
|
|
{isCollapsed}
|
|
/>
|
|
<div class="mb-6 mt-auto">
|
|
<StatusBox {isCollapsed} />
|
|
</div>
|
|
</SideBarSection>
|
|
|
|
<section class="overflow-y-auto immich-scrollbar ">
|
|
<div id="setting-title" class="pt-10 w-full bg-immich-bg dark:bg-immich-dark-bg">
|
|
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
|
|
{getPageTitle(data.routeId)}
|
|
</h1>
|
|
<hr class="dark:border-immich-dark-gray" />
|
|
</div>
|
|
|
|
<section id="setting-content" class="flex place-content-center mx-2">
|
|
<section class="w-[800px] pt-5 pb-28">
|
|
<slot />
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</section>
|
|
</main>
|