tethys.backend/resources/js/Components/AsideMenuLayer.vue
Arno Kaimbacher a3031169ca
All checks were successful
CI / container-job (push) Successful in 36s
feat: Add alternate mimetype support, enhance validation for alternate mimetypes, and improve script loading performance
- mime_type.ts: Added a new column `public alternate_mimetype: string;`
- MimetypeController.ts: Extended validation and storage logic to accommodate the new `alternate_mimetype` attribute
- adonisrc.ts: Integrated new validation rule to validate user-provided mimetypes
- vite.ts: Set `defer: true` for script attributes to improve loading performance
- update_1_to_mime_types.ts: Added migration for the new `alternate_mimetype` column in the database
- UI improvements: Updated components such as AsideMenuLayer.vue, FormCheckRadioGroup.vue, MimeTypeInput.vue, NavBar.vue (lime-green background), NavBarMenu.vue, SectionBannerStarOnGitea.vue, Admin/mimetype/Create.vue, Admin/mimetype/Delete.vue, Admin/mimetype/Index.vue
- allowed_extensions_mimetype.ts: Enhanced rule to also check for alternate mimetypes
- referenceValidation.ts: Improved validation to allow only ISBNs with a '-' delimiter
- package-lock.json: Updated npm dependencie
2025-02-13 15:49:09 +01:00

78 lines
2.5 KiB
Vue

<script lang="ts" setup>
import { router } from '@inertiajs/vue3';
// import { Inertia } from '@inertiajs/inertia';
import { stardust } from '@eidellev/adonis-stardust/client';
import { mdiLogout, mdiClose } from '@mdi/js';
import { computed } from 'vue';
import { LayoutService } from '@/Stores/layout';
import { StyleService } from '@/Stores/style.service';
import AsideMenuList from '@/Components/AsideMenuList.vue';
import AsideMenuItem from '@/Components/AsideMenuItem.vue';
import BaseIcon from '@/Components/BaseIcon.vue';
defineProps({
menu: {
type: Array<Object>,
default: () => [],
},
});
const emit = defineEmits(['menu-click']);
const layoutStore = LayoutService();
const styleStore = StyleService();
const logoutItem = computed(() => ({
name: 'Logout',
label: 'Logout',
icon: mdiLogout,
color: 'info',
link: '#',
}));
const logoutItemClick = async () => {
// router.post(route('logout'));
await router.post(stardust.route('logout'));
};
interface MenuItem {
name: string;
label: string;
icon: string;
color: string;
link: string;
}
const menuClick = (event: Event, item: MenuItem) => {
emit('menu-click', event, item);
};
</script>
<template>
<aside
id="aside"
class="lg:pb-2 lg:pl-2 w-60 fixed flex z-40 top-0 lg:top-16 h-screen lg:h-[calc(100vh-64px)] transition-position overflow-hidden"
>
<div :class="styleStore.asideStyle" class="lg:rounded-xl flex-1 flex flex-col overflow-hidden dark:bg-slate-900">
<div :class="styleStore.asideBrandStyle" class="flex flex-row h-14 items-center justify-between dark:bg-slate-900">
<div class="text-center flex-1 lg:text-left lg:pl-6 xl:text-center xl:pl-0">
<b class="font-black">Menu</b>
</div>
<button class="hidden lg:inline-block xl:hidden p-3" @click.prevent="layoutStore.isAsideLgActive = false">
<BaseIcon :path="mdiClose" />
</button>
</div>
<div
:class="styleStore.darkMode ? 'aside-scrollbars-[slate]' : styleStore.asideScrollbarsStyle"
class="flex-1 overflow-y-auto overflow-x-hidden"
>
<AsideMenuList :menu-items="menu" @menu-click="menuClick" />
</div>
<!-- <p class="menu-label">About</p>> -->
<ul class="menu-list">
<AsideMenuItem :item="logoutItem" @menu-click="logoutItemClick" />
</ul>
</div>
</aside>
</template>