justinzeus/scholarr
1
0
Fork 0
Code Issues 1 Pull requests 18 Projects Releases Packages Wiki Activity Actions

modularize service layer, add mobile nav drawer, and sync docs

Browse source
This commit is contained in:
Justin Visser 2026-02-20 01:28:20 +01:00
parent 7f7a8ce2b0
commit 6b6ed91b92
72 changed files with 8122 additions and 7501 deletions
Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/app/AppShell.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed } from "vue";
import { computed, ref, watch } from "vue";
import { RouterView, useRoute } from "vue-router";
import AppHeader from "@/components/layout/AppHeader.vue";
@ -11,6 +11,28 @@ const auth = useAuthStore();
const route = useRoute();
const showChrome = computed(() => auth.isAuthenticated);
const shouldLockMainScroll = computed(() => route.meta.lockMainScroll === true);
const isMobileNavOpen = ref(false);
function closeMobileNav(): void {
isMobileNavOpen.value = false;
}
function toggleMobileNav(): void {
isMobileNavOpen.value = !isMobileNavOpen.value;
}
watch(
() => route.fullPath,
() => {
closeMobileNav();
},
);
watch(showChrome, (value) => {
if (!value) {
closeMobileNav();
}
});
</script>
<template>
@ -19,14 +41,34 @@ const shouldLockMainScroll = computed(() => route.meta.lockMainScroll === true);
<RequestErrorPanel />
<template v-if="showChrome">
<AppHeader />
<AppHeader
:show-menu-button="true"
:menu-open="isMobileNavOpen"
@toggle-menu="toggleMobileNav"
/>
<div
class="grid h-[calc(100dvh-4.5rem)] min-h-0 grid-cols-1 grid-rows-[auto_minmax(0,1fr)] lg:grid-cols-[17rem_minmax(0,1fr)] lg:grid-rows-1"
class="relative h-[calc(100dvh-4.5rem)] min-h-0 lg:grid lg:grid-cols-[17rem_minmax(0,1fr)] lg:grid-rows-1"
>
<AppNav class="min-h-0 overflow-x-hidden lg:overflow-y-auto" />
<button
v-if="isMobileNavOpen"
type="button"
class="absolute inset-0 z-30 bg-black/35 backdrop-blur-[1px] lg:hidden"
aria-label="Close navigation menu"
@click="closeMobileNav"
/>
<div
id="mobile-primary-nav"
class="absolute inset-y-0 left-0 z-40 w-[17rem] max-w-[85vw] min-h-0 bg-surface-nav shadow-xl transition-transform duration-200 ease-out lg:static lg:z-auto lg:w-auto lg:max-w-none lg:bg-transparent lg:shadow-none lg:transition-none"
:class="isMobileNavOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'"
>
<AppNav
class="h-full min-h-0 overflow-x-hidden overflow-y-auto lg:h-auto lg:overflow-y-auto"
@navigate="closeMobileNav"
/>
</div>
<main
id="app-main"
class="min-h-0 min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 lg:px-8"
class="min-h-0 min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 lg:col-start-2 lg:px-8"
:class="shouldLockMainScroll ? 'overflow-y-auto lg:overflow-y-hidden' : 'overflow-y-auto'"
>
<RouterView />