fix(sidebar): hide sidebar instead of removing it

Previously, the sidebar was fully removed from DOM. This could cause unwanted behavior, such as tests which test its content failing. Now, it is just hidden. This does not affect tests any more.
2026-08-05 20:46:35 +02:00
12 changed files with 4 additions and 391 deletions
@@ -40,21 +40,9 @@ const copyrightPeriod =
            </RouterLink>
            <LanguageSwitchButton />
        </div>
-        <div class="footer-segment legal-segment">
-            <div></div>
-            <div class="copyright-notice">
+        <div class="footer-segment">
            &copy; {{ copyrightPeriod }} Seekra
        </div>
-            <div class="legal-links">
-                <RouterLink
-                    :to="{ name: 'legalNotice' }"
-                    class="link"
-                    :title="t('legal.notice.title')"
-                >
-                    {{ t('legal.notice.title') }}
-                </RouterLink>
-            </div>
-        </div>
    </footer>
 </template>

@@ -75,31 +63,4 @@ const copyrightPeriod =
 .global-footer a {
    color: var(--dark);
 }
-
-.legal-segment {
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    text-align: center;
-}
-
-.copyright-notice {
-    justify-self: center;
-}
-
-.legal-links {
-    justify-self: end;
-}
-
-@media (max-width: 48rem) {
-    .legal-segment {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        gap: 0;
-    }
-
-    .legal-links {
-        margin-top: 0.8em;
-    }
-}
 </style>
@@ -1,22 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-export class FetchError extends Error {
-    constructor (message) {
-        super(message);
-        this.name = 'FetchError';
-    };
-};
@@ -1,110 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../../errors';
-import { getLegalNotice } from '../fetchLegalContent';
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
-
-let fetchSpy;
-
-beforeEach(() => {
-    fetchSpy = vi.spyOn(globalThis, 'fetch');
-});
-
-afterEach(() => {
-    fetchSpy.mockRestore();
-});
-
-const exampleHtml = `<h1>Heading</h1>
-<p>
-    <a>...</a>
-</p>`;
-
-const exampleHtmlWithLinkClass = `<h1>Heading</h1>
-<p>
-    <a class="link">...</a>
-</p>`;
-const exampleHtmlDocument = `<html>
-    <head>
-        <title>Legal Notice</title>
-    </head>
-    <body>
-        ${exampleHtml}
-    </body>
-</html>`;
-const exampleHtmlDocumentWithMain = `<html>
-    <head>
-        <title>Legal Notice</title>
-    </head>
-    <body>
-        <main>
-            ${exampleHtml}
-        </main>
-    </body>
-</html>`;
-
-describe('fetchLegalContent', () => {
-    describe('getLegalNotice', () => {
-        describe('success', () => {
-            test('returns HTML body', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(exampleHtmlDocument)
-                );
-
-                expect(
-                    (await getLegalNotice()).trim()
-                ).toBe(exampleHtmlWithLinkClass);
-            });
-
-            test('returns HTML <main>', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(exampleHtmlDocumentWithMain)
-                );
-
-                expect(
-                    (await getLegalNotice()).trim()
-                ).toBe(exampleHtmlWithLinkClass);
-            });
-
-            test('does not fail on success status code', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(null, { status: 206 })
-                );
-
-                await getLegalNotice();
-            });
-        });
-
-        describe('error', () => {
-            test('throws FetchError when fetch fails', async () => {
-                fetchSpy.mockRejectedValue(new TypeError());
-                await expect(getLegalNotice()).rejects.toThrow(FetchError);
-            });
-
-            test('throws FetchError on HTTP error', async () => {
-                fetchSpy.mockResolvedValue(
-                    new Response(null, { status: 404 })
-                )
-                await expect(getLegalNotice()).rejects.toThrow(FetchError);
-            });
-
-            test('does not throw FetchError when fetch throws another error than TypeError', async () => {
-                fetchSpy.mockRejectedValue(new Error());
-                await expect(getLegalNotice()).rejects.toThrow(Error);
-            });
-        });
-    });
-});
@@ -1,44 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../errors';
-import { getAssetsUrl } from '@/config/env';
-
-const fetchHtml = async function fetchHtml (url, options) {
-    let response;
-    try {
-        response = await fetch(url, options);
-    } catch (err) {
-        if (err instanceof TypeError) throw new FetchError(err);
-        else throw err;
-    }
-    if (response.ok) return await response.text();
-    else throw new FetchError();
-};
-
-export const getLegalNotice = async function getLegalNotice () {
-    const legalNoticeUrl = new URL('legal/legal_notice.html', getAssetsUrl()).href;
-    const html = await fetchHtml(legalNoticeUrl);
-
-    const parser = new DOMParser();
-    const doc = parser.parseFromString(html, 'text/html');
-
-    const legalNoticeContainer = doc.querySelector('main') ?? doc.body;
-    legalNoticeContainer.querySelectorAll('a').forEach(
-        (link) => link.classList.add('link')
-    );
-    return legalNoticeContainer.innerHTML;
-};
@@ -1,61 +0,0 @@
-<!--
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-->
-
-<script setup>
-import { getLegalNotice } from '../services/fetchLegalContent';
-import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const loading = ref(true);
-const legalNoticeError = ref(null);
-const legalNoticeHtml = ref(null);
-onMounted(async () => {
-    try {
-        legalNoticeHtml.value = await getLegalNotice();
-    } catch {
-        legalNoticeError.value = 'legal.notice.loadError';
-    } finally {
-        loading.value = false;
-    }
-});
-</script>
-
-<template>
-    <div class="main-content-padding legal-notice-container">
-        <header class="header">
-            <h1>
-                {{ t('legal.notice.title') }}
-            </h1>
-        </header>
-        <main>
-            <div class="legal-notice-loading" v-if="loading">
-                {{ t('loading') }}
-            </div>
-            <div class="error" v-else-if="legalNoticeError">
-                {{ t(legalNoticeError) }}
-            </div>
-            <div class="legal-notice" v-html="legalNoticeHtml" v-else></div>
-        </main>
-    </div>
-</template>
-
-<style scoped>
-.header h1 {
-    margin-top: 0;
-}
-</style>
@@ -1,78 +0,0 @@
-/*
-Copyright 2026 Seekra
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FetchError } from '../../errors.js';
-import LegalNoticeView from '../LegalNoticeView.vue';
-import { mountComponent } from '@/test-utils/mountComponent';
-import { flushPromises } from '@vue/test-utils';
-import { afterEach, describe, expect, test, vi } from 'vitest';
-
-const getLegalNotice = vi.hoisted(() => vi.fn().mockResolvedValue('legal notice'));
-vi.mock('../../services/fetchLegalContent', async (importOriginal) => {
-    const actual = await importOriginal();
-    return {
-        ...actual,
-        getLegalNotice
-    };
-});
-
-afterEach(() => getLegalNotice.mockRestore());
-
-describe('LegalNoticeView', () => {
-    test('shows loading indicator', () => {
-        const wrapper = mountComponent(LegalNoticeView);
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(true);
-        expect(legalNoticeError.exists()).toBe(false);
-        expect(legalNotice.exists()).toBe(false);
-    });
-
-    test('shows error', async () => {
-        getLegalNotice.mockRejectedValue(new FetchError());
-
-        const wrapper = mountComponent(LegalNoticeView);
-
-        await flushPromises();
-        await wrapper.vm.$nextTick();
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(false);
-        expect(legalNoticeError.exists()).toBe(true);
-        expect(legalNotice.exists()).toBe(false);
-    });
-
-    test('shows legal notice', async () => {
-        const wrapper = mountComponent(LegalNoticeView);
-
-        await flushPromises();
-        await wrapper.vm.$nextTick();
-
-        const legalNoticeLoading = wrapper.find('.legal-notice-loading');
-        const legalNoticeError = wrapper.find('.error');
-        const legalNotice = wrapper.find('.legal-notice');
-
-        expect(legalNoticeLoading.exists()).toBe(false);
-        expect(legalNoticeError.exists()).toBe(false);
-        expect(legalNotice.exists()).toBe(true);
-    });
-});
@@ -36,7 +36,7 @@ const toggleSidebar = function toggleSidebar () {
        <div class="sidebar-controls">
            <SidebarExpandButton @click="toggleSidebar" class="sidebar-expand-button" />
        </div>
-        <div class="sidebar-content" v-if="props.expanded">
+        <div class="sidebar-content" v-show="props.expanded">
            <slot />
        </div>
    </nav>
@@ -61,11 +61,5 @@
                "ariaLabel": "Wählt die Option {option} aus"
            }
        }
-    },
-    "legal": {
-        "notice": {
-            "title": "Impressum",
-            "loadError": "Das Impressum konnte nicht geladen werden."
-        }
    }
 }
@@ -61,11 +61,5 @@
                "ariaLabel": "Selects option {option}"
            }
        }
-    },
-    "legal": {
-        "notice": {
-            "title": "Legal Notice",
-            "loadError": "The legal notice could not be loaded."
-        }
    }
 }
@@ -18,7 +18,6 @@ import { createRouter, createWebHistory } from 'vue-router';
 import { i18n } from '@/i18n';

 import SearchView from '../views/SearchView.vue';
-import LegalNoticeView from '@/features/legal/views/LegalNoticeView.vue';
 import SearchResultsView from '@/features/search/views/SearchResultsView.vue';
 import SettingsView from '@/features/settings/views/SettingsView.vue';
 import NotFound from '../views/NotFound.vue';
@@ -40,14 +39,6 @@ const routes = [
            title: (route) => route.query.q
        }
    },
-    {
-        path: '/legal/notice',
-        name: 'legalNotice',
-        component: LegalNoticeView,
-        meta: {
-            title: () => i18n.global.t('legal.notice.title')
-        }
-    },
    {
        path: '/settings/:rest(.*)*',
        name: 'settings',
@@ -24,7 +24,6 @@ body {

 .link {
    text-decoration: none;
-    color: var(--dark);
 }

 .link:hover:not(.button-link), .link:focus-visible:not(.button-link) {
@@ -93,11 +92,3 @@ input {
 * {
    -webkit-tap-highlight-color: transparent;
 }
-
-.error {
-    background-color: var(--color-negative-bg);
-    border: 1px solid var(--color-negative-border);
-    padding: 1em 2em;
-    border-radius: 1.2em;
-    color: var(--white);
-}
@@ -84,9 +84,6 @@ body {
    --light-hover:          var(--light-d-2);

    --invert: invert(0);
-
-    --color-negative-bg:     oklch(59% 0.22706 29.244);
-    --color-negative-border: oklch(51% 0.22706 29.244);
 }

@media (prefers-color-scheme: dark) {