feat(footer): align footer segment items vertically centered

Merge pull request 'Fix(sidebar): hide sidebar border on small screens' (#173 ) from fix/sidebar-border-on-small-screens into main
Reviewed-on: #173 Reviewed-by: Jakob Gregory
2026-08-05 20:46:43 +02:00 · 2026-08-05 20:44:38 +02:00 · 2026-08-05 19:33:34 +02:00 · 2026-08-04 19:41:49 +02:00 · 2026-08-04 19:41:08 +02:00 · 2026-08-04 19:41:08 +02:00
5 changed files with 21 additions and 6 deletions
@@ -54,6 +54,7 @@ const copyrightPeriod =
 .footer-segment {
    display: flex;
    justify-content: center;
+    align-items: center;
    gap: 32px;
    padding: var(--padding-y);
    background-color: var(--light-bg);
@@ -61,6 +61,10 @@ onMounted(async () => {
    });
    settingsLoaded.value = true;
 });
+
+const toggleSidebarIfSmallScreen = function toggleSidebarIfSmallScreen (toggleSidebarFunction) {
+    if (matchMedia('(max-width: 48rem)').matches) toggleSidebarFunction();
+};
 </script>

 <template>
@@ -71,13 +75,14 @@ onMounted(async () => {
            </h1>
        </header>
        <LeftSidebarLayout class="layout">
-            <template #sidebar>
+            <template #sidebar="{ toggleSidebar }">
                <ul class="sidebar-sections-list">
                    <li v-for="section in settings">
                        <RouterLink
                            :to="`/settings/${section.name}`"
                            class="button button-link link sidebar-section"
                            :class="{ active: activeSection === section.name }"
+                            @click="toggleSidebarIfSmallScreen(toggleSidebar)"
                        >
                            {{ t(section.i18n) }}
                        </RouterLink>
@@ -61,6 +61,10 @@ const toggleSidebar = function toggleSidebar () {
 }

@media (max-width: 48rem) {
+    .sidebar {
+        border: none;
+    }
+
    .sidebar:not(.expanded) .sidebar-expand-button {
        display: none;
    }
@@ -29,7 +29,7 @@ const props = defineProps({

 const expanded = ref(props.expanded);

-const toggleExpanded = function toggleExpanded () {
+const toggleSidebar = function toggleSidebar () {
    expanded.value = !expanded.value;
 };
 </script>
@@ -37,13 +37,13 @@ const toggleExpanded = function toggleExpanded () {
 <template>
    <div class="layout-container" :class="{ expanded }">
        <div class="sidebar-expand-button-container">
-            <SidebarExpandButton class="sidebar-expand-button" @click="toggleExpanded" />
+            <SidebarExpandButton class="sidebar-expand-button" @click="toggleSidebar" />
        </div>
-        <Sidebar @toggle-expanded="toggleExpanded" :expanded="expanded" class="sidebar">
-            <slot name="sidebar" />
+        <Sidebar @toggle-expanded="toggleSidebar" :expanded="expanded" class="sidebar">
+            <slot name="sidebar" :toggleSidebar="toggleSidebar" />
        </Sidebar>
        <main class="main-content">
-            <slot />
+            <slot :toggleSidebar="toggleSidebar" />
        </main>
    </div>
 </template>
@@ -87,3 +87,8 @@ input {
 .button:hover {
    background-color: var(--light-hover);
 }
+
+/* Temporary until a custom tap highlight is implemented. */
+* {
+    -webkit-tap-highlight-color: transparent;
+}
Author	SHA1	Message	Date
jakob.scheidandGitea	0adb1d3ea8	feat(footer): align footer segment items vertically centered	2026-08-05 20:46:43 +02:00
jakob.scheidandGitea	d1e95582a8	Merge pull request 'Fix(sidebar): hide sidebar border on small screens' (#173 ) from fix/sidebar-border-on-small-screens into main Deploy on dev / Deploy on dev (push) Successful in 40s Details Reviewed-on: #173 Reviewed-by: Jakob Gregory	2026-08-05 20:44:38 +02:00
jakob.scheid	e5f27041d2	fix(sidebar): hide border on small screens	2026-08-05 19:33:34 +02:00
jakob.scheidandGitea	baa924a2b2	Merge pull request 'Feat(fonts): Add font' (#162 ) from feature/fonts into main Deploy on dev / Deploy on dev (push) Successful in 34s Details Reviewed-on: #162 Reviewed-by: Jakob Gregory	2026-08-04 19:41:49 +02:00
jakob.scheidandGitea	26535cad45	feat(fonts): use Inter	2026-08-04 19:41:08 +02:00
jakob.scheidandGitea	5fdf0490b6	feat(fonts): load all fonts specified in font configuration	2026-08-04 19:41:08 +02:00
jakob.scheidandGitea	61817bf4fc	feat(assets): add assets environment variables Added the environment variables VITE_ASSETS_BUILD_ID for the ID of the used build and VITE_ASSETS_BASE_URL for the base URL of the assets. A script for reading this configuration was also added.	2026-08-04 19:41:08 +02:00
jakob.scheidandGitea	0f71f1240e	Merge pull request 'Temporarily disable the default tap highlight' (#160 ) from fix/temporarily-disable-default-tap-highlight into main Deploy on dev / Deploy on dev (push) Successful in 37s Details Reviewed-on: #160 Reviewed-by: Jakob Scheid	2026-08-04 12:59:25 +02:00
jakob.gregoryandGitea	d67c8aa80e	Temporarily disable the default tap highlight This is a temporary change until a custom tap highlight effect is implemented.	2026-08-04 12:00:00 +02:00
jakob.scheidandGitea	44c457ba20	Merge pull request 'Feat(sidebar): allow left sidebar layout content to toggle the sidebar' (#159 ) from feature/left-sidebar-layout-content-sidebar-toggling into main Deploy on dev / Deploy on dev (push) Successful in 41s Details Reviewed-on: #159 Reviewed-by: Johannes Vos	2026-08-03 17:29:23 +02:00
jakob.scheid	4b010d03ac	feat(settings): toggle sidebar on small screens when section is selected The settings view now hides the sidebar on small screens when a settings section is selected.	2026-08-02 13:58:37 +02:00
jakob.scheid	813cc7c7fc	feat(sidebar): allow left sidebar layout content to toggle sidebar	2026-08-02 13:57:11 +02:00
jakob.scheid	a77bbec3fa	refactor(sidebar): rename sidebar toggling function Renamed the sidebar toggling function in the left sidebar layout to toggleSidebar.	2026-08-02 13:56:25 +02:00