add new frontend template

frontend/src/layout/AppConfig.vue

@@ -0,0 +1,298 @@
+<script setup>
+import RadioButton from 'primevue/radiobutton';
+import Button from 'primevue/button';
+import InputSwitch from 'primevue/inputswitch';
+import Sidebar from 'primevue/sidebar';
+
+import { ref } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+
+defineProps({
+    simple: {
+        type: Boolean,
+        default: false
+    }
+});
+const scales = ref([12, 13, 14, 15, 16]);
+const visible = ref(false);
+
+const { changeThemeSettings, setScale, layoutConfig } = useLayout();
+
+const onConfigButtonClick = () => {
+    visible.value = !visible.value;
+};
+const onChangeTheme = (theme, mode) => {
+    const elementId = 'theme-css';
+    const linkElement = document.getElementById(elementId);
+    const cloneLinkElement = linkElement.cloneNode(true);
+    const newThemeUrl = linkElement.getAttribute('href').replace(layoutConfig.theme.value, theme);
+    cloneLinkElement.setAttribute('id', elementId + '-clone');
+    cloneLinkElement.setAttribute('href', newThemeUrl);
+    cloneLinkElement.addEventListener('load', () => {
+        linkElement.remove();
+        cloneLinkElement.setAttribute('id', elementId);
+        changeThemeSettings(theme, mode === 'dark');
+    });
+    linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+};
+const decrementScale = () => {
+    setScale(layoutConfig.scale.value - 1);
+    applyScale();
+};
+const incrementScale = () => {
+    setScale(layoutConfig.scale.value + 1);
+    applyScale();
+};
+const applyScale = () => {
+    document.documentElement.style.fontSize = layoutConfig.scale.value + 'px';
+};
+</script>
+
+<template>
+    <button class="layout-config-button p-link" type="button" @click="onConfigButtonClick()">
+        <i class="pi pi-cog"></i>
+    </button>
+
+    <Sidebar v-model:visible="visible" position="right" :transitionOptions="'.3s cubic-bezier(0, 0, 0.2, 1)'" class="layout-config-sidebar w-20rem">
+        <h5>Scale</h5>
+        <div class="flex align-items-center">
+            <Button icon="pi pi-minus" type="button" @click="decrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem mr-2" :disabled="layoutConfig.scale.value === scales[0]"></Button>
+            <div class="flex gap-2 align-items-center">
+                <i class="pi pi-circle-fill text-300" v-for="s in scales" :key="s" :class="{ 'text-primary-500': s === layoutConfig.scale.value }"></i>
+            </div>
+            <Button icon="pi pi-plus" type="button" pButton @click="incrementScale()" class="p-button-text p-button-rounded w-2rem h-2rem ml-2" :disabled="layoutConfig.scale.value === scales[scales.length - 1]"></Button>
+        </div>
+
+        <template v-if="!simple">
+            <h5>Menu Type</h5>
+            <div class="flex">
+                <div class="field-radiobutton flex-1">
+                    <RadioButton name="menuMode" value="static" v-model="layoutConfig.menuMode.value" inputId="mode1"></RadioButton>
+                    <label for="mode1">Static</label>
+                </div>
+
+                <div class="field-radiobutton flex-1">
+                    <RadioButton name="menuMode" value="overlay" v-model="layoutConfig.menuMode.value" inputId="mode2"></RadioButton>
+                    <label for="mode2">Overlay</label>
+                </div>
+            </div>
+        </template>
+
+        <template v-if="!simple">
+            <h5>Input Style</h5>
+            <div class="flex">
+                <div class="field-radiobutton flex-1">
+                    <RadioButton name="inputStyle" value="outlined" v-model="layoutConfig.inputStyle.value" inputId="outlined_input"></RadioButton>
+                    <label for="outlined_input">Outlined</label>
+                </div>
+                <div class="field-radiobutton flex-1">
+                    <RadioButton name="inputStyle" value="filled" v-model="layoutConfig.inputStyle.value" inputId="filled_input"></RadioButton>
+                    <label for="filled_input">Filled</label>
+                </div>
+            </div>
+
+            <h5>Ripple Effect</h5>
+            <InputSwitch v-model="layoutConfig.ripple.value"></InputSwitch>
+        </template>
+
+        <h5>Bootstrap</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-blue', 'light')">
+                    <img src="/layout/images/themes/bootstrap4-light-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Light Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-light-purple', 'light')">
+                    <img src="/layout/images/themes/bootstrap4-light-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Light Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-blue', 'dark')">
+                    <img src="/layout/images/themes/bootstrap4-dark-blue.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('bootstrap4-dark-purple', 'dark')">
+                    <img src="/layout/images/themes/bootstrap4-dark-purple.svg" class="w-2rem h-2rem" alt="Bootstrap Dark Purple" />
+                </button>
+            </div>
+        </div>
+
+        <h5>Material Design</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-indigo', 'light')">
+                    <img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-light-deeppurple', 'light')">
+                    <img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light DeepPurple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-indigo', 'dark')">
+                    <img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('md-dark-deeppurple', 'dark')">
+                    <img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark DeepPurple" />
+                </button>
+            </div>
+        </div>
+
+        <h5>Material Design Compact</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-indigo', 'light')">
+                    <img src="/layout/images/themes/md-light-indigo.svg" class="w-2rem h-2rem" alt="Material Light Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-light-deeppurple', 'light')">
+                    <img src="/layout/images/themes/md-light-deeppurple.svg" class="w-2rem h-2rem" alt="Material Light Deep Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-indigo', 'dark')">
+                    <img src="/layout/images/themes/md-dark-indigo.svg" class="w-2rem h-2rem" alt="Material Dark Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('mdc-dark-deeppurple', 'dark')">
+                    <img src="/layout/images/themes/md-dark-deeppurple.svg" class="w-2rem h-2rem" alt="Material Dark Deep Purple" />
+                </button>
+            </div>
+        </div>
+
+        <h5>Tailwind</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('tailwind-light', 'light')">
+                    <img src="/layout/images/themes/tailwind-light.png" class="w-2rem h-2rem" alt="Tailwind Light" />
+                </button>
+            </div>
+        </div>
+
+        <h5>Fluent UI</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('fluent-light', 'light')">
+                    <img src="/layout/images/themes/fluent-light.png" class="w-2rem h-2rem" alt="Fluent Light" />
+                </button>
+            </div>
+        </div>
+
+        <h5>PrimeOne Design - 2022</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-indigo', 'light')">
+                    <img src="/layout/images/themes/lara-light-indigo.png" class="w-2rem h-2rem" alt="Lara Light Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-blue', 'light')">
+                    <img src="/layout/images/themes/lara-light-blue.png" class="w-2rem h-2rem" alt="Lara Light Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-purple', 'light')">
+                    <img src="/layout/images/themes/lara-light-purple.png" class="w-2rem h-2rem" alt="Lara Light Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-light-teal', 'light')">
+                    <img src="/layout/images/themes/lara-light-teal.png" class="w-2rem h-2rem" alt="Lara Light Teal" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-indigo', 'dark')">
+                    <img src="/layout/images/themes/lara-dark-indigo.png" class="w-2rem h-2rem" alt="Lara Dark Indigo" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-blue', 'dark')">
+                    <img src="/layout/images/themes/lara-dark-blue.png" class="w-2rem h-2rem" alt="Lara Dark Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-purple', 'dark')">
+                    <img src="/layout/images/themes/lara-dark-purple.png" class="w-2rem h-2rem" alt="Lara Dark Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('lara-dark-teal', 'dark')">
+                    <img src="/layout/images/themes/lara-dark-teal.png" class="w-2rem h-2rem" alt="Lara Dark Teal" />
+                </button>
+            </div>
+        </div>
+
+        <h5>PrimeOne Design - 2021</h5>
+        <div class="grid">
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-blue', 'light')">
+                    <img src="/layout/images/themes/saga-blue.png" class="w-2rem h-2rem" alt="Saga Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-green', 'light')">
+                    <img src="/layout/images/themes/saga-green.png" class="w-2rem h-2rem" alt="Saga Green" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-orange', 'light')">
+                    <img src="/layout/images/themes/saga-orange.png" class="w-2rem h-2rem" alt="Saga Orange" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('saga-purple', 'light')">
+                    <img src="/layout/images/themes/saga-purple.png" class="w-2rem h-2rem" alt="Saga Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-blue', 'dark')">
+                    <img src="/layout/images/themes/vela-blue.png" class="w-2rem h-2rem" alt="Vela Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-green', 'dark')">
+                    <img src="/layout/images/themes/vela-green.png" class="w-2rem h-2rem" alt="Vela Green" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-orange', 'dark')">
+                    <img src="/layout/images/themes/vela-orange.png" class="w-2rem h-2rem" alt="Vela Orange" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('vela-purple', 'dark')">
+                    <img src="/layout/images/themes/vela-purple.png" class="w-2rem h-2rem" alt="Vela Purple" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-blue', 'dark')">
+                    <img src="/layout/images/themes/arya-blue.png" class="w-2rem h-2rem" alt="Arya Blue" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-green', 'dark')">
+                    <img src="/layout/images/themes/arya-green.png" class="w-2rem h-2rem" alt="Arya Green" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-orange', 'dark')">
+                    <img src="/layout/images/themes/arya-orange.png" class="w-2rem h-2rem" alt="Arya Orange" />
+                </button>
+            </div>
+            <div class="col-3">
+                <button class="p-link w-2rem h-2rem" @click="onChangeTheme('arya-purple', 'dark')">
+                    <img src="/layout/images/themes/arya-purple.png" class="w-2rem h-2rem" alt="Arya Purple" />
+                </button>
+            </div>
+        </div>
+    </Sidebar>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/AppFooter.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useLayout } from '@/layout/composables/layout';
+import { computed } from 'vue';
+
+const { layoutConfig, contextPath } = useLayout();
+
+const logoUrl = computed(() => {
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
+</script>
+
+<template>
+    <div class="layout-footer">
+        <img :src="logoUrl" alt="Logo" height="20" class="mr-2" />
+        by
+        <span class="font-medium ml-2">PrimeVue</span>
+    </div>
+</template>
+<style lang="scss" scoped></style>

frontend/src/layout/AppLayout.vue

@@ -0,0 +1,77 @@
+<script setup>
+import { computed, watch, ref } from 'vue';
+import AppTopbar from './AppTopbar.vue';
+import AppFooter from './AppFooter.vue';
+import AppSidebar from './AppSidebar.vue';
+import AppConfig from './AppConfig.vue';
+import { useLayout } from '@/layout/composables/layout';
+
+const { layoutConfig, layoutState, isSidebarActive } = useLayout();
+
+const outsideClickListener = ref(null);
+
+watch(isSidebarActive, (newVal) => {
+    if (newVal) {
+        bindOutsideClickListener();
+    } else {
+        unbindOutsideClickListener();
+    }
+});
+
+const containerClass = computed(() => {
+    return {
+        'layout-theme-light': layoutConfig.darkTheme.value === 'light',
+        'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
+        'layout-overlay': layoutConfig.menuMode.value === 'overlay',
+        'layout-static': layoutConfig.menuMode.value === 'static',
+        'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
+        'layout-overlay-active': layoutState.overlayMenuActive.value,
+        'layout-mobile-active': layoutState.staticMenuMobileActive.value,
+        'p-input-filled': layoutConfig.inputStyle.value === 'filled',
+        'p-ripple-disabled': !layoutConfig.ripple.value
+    };
+});
+const bindOutsideClickListener = () => {
+    if (!outsideClickListener.value) {
+        outsideClickListener.value = (event) => {
+            if (isOutsideClicked(event)) {
+                layoutState.overlayMenuActive.value = false;
+                layoutState.staticMenuMobileActive.value = false;
+                layoutState.menuHoverActive.value = false;
+            }
+        };
+        document.addEventListener('click', outsideClickListener.value);
+    }
+};
+const unbindOutsideClickListener = () => {
+    if (outsideClickListener.value) {
+        document.removeEventListener('click', outsideClickListener);
+        outsideClickListener.value = null;
+    }
+};
+const isOutsideClicked = (event) => {
+    const sidebarEl = document.querySelector('.layout-sidebar');
+    const topbarEl = document.querySelector('.layout-menu-button');
+
+    return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+};
+</script>
+
+<template>
+    <div class="layout-wrapper" :class="containerClass">
+        <app-topbar></app-topbar>
+        <div class="layout-sidebar">
+            <app-sidebar></app-sidebar>
+        </div>
+        <div class="layout-main-container">
+            <div class="layout-main">
+                <router-view></router-view>
+            </div>
+            <app-footer></app-footer>
+        </div>
+        <app-config></app-config>
+        <div class="layout-mask"></div>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/AppMenu.vue

@@ -0,0 +1,176 @@
+<script setup>
+import { ref } from 'vue';
+
+import AppMenuItem from './AppMenuItem.vue';
+
+const model = ref([
+    {
+        label: 'Home',
+        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
+    },
+    {
+        label: 'UI Components',
+        items: [
+            { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', to: '/uikit/formlayout' },
+            { label: 'Input', icon: 'pi pi-fw pi-check-square', to: '/uikit/input' },
+            { label: 'Float Label', icon: 'pi pi-fw pi-bookmark', to: '/uikit/floatlabel' },
+            { label: 'Invalid State', icon: 'pi pi-fw pi-exclamation-circle', to: '/uikit/invalidstate' },
+            { label: 'Button', icon: 'pi pi-fw pi-mobile', to: '/uikit/button', class: 'rotated-icon' },
+            { label: 'Table', icon: 'pi pi-fw pi-table', to: '/uikit/table' },
+            { label: 'List', icon: 'pi pi-fw pi-list', to: '/uikit/list' },
+            { label: 'Tree', icon: 'pi pi-fw pi-share-alt', to: '/uikit/tree' },
+            { label: 'Panel', icon: 'pi pi-fw pi-tablet', to: '/uikit/panel' },
+            { label: 'Overlay', icon: 'pi pi-fw pi-clone', to: '/uikit/overlay' },
+            { label: 'Media', icon: 'pi pi-fw pi-image', to: '/uikit/media' },
+            { label: 'Menu', icon: 'pi pi-fw pi-bars', to: '/uikit/menu', preventExact: true },
+            { label: 'Message', icon: 'pi pi-fw pi-comment', to: '/uikit/message' },
+            { label: 'File', icon: 'pi pi-fw pi-file', to: '/uikit/file' },
+            { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', to: '/uikit/charts' },
+            { label: 'Misc', icon: 'pi pi-fw pi-circle', to: '/uikit/misc' }
+        ]
+    },
+    {
+        label: 'Prime Blocks',
+        items: [
+            { label: 'Free Blocks', icon: 'pi pi-fw pi-eye', to: '/blocks', badge: 'NEW' },
+            { label: 'All Blocks', icon: 'pi pi-fw pi-globe', url: 'https://www.primefaces.org/primeblocks-vue', target: '_blank' }
+        ]
+    },
+    {
+        label: 'Utilities',
+        items: [
+            { label: 'PrimeIcons', icon: 'pi pi-fw pi-prime', to: '/utilities/icons' },
+            { label: 'PrimeFlex', icon: 'pi pi-fw pi-desktop', url: 'https://www.primefaces.org/primeflex/', target: '_blank' }
+        ]
+    },
+    {
+        label: 'Pages',
+        icon: 'pi pi-fw pi-briefcase',
+        to: '/pages',
+        items: [
+            {
+                label: 'Landing',
+                icon: 'pi pi-fw pi-globe',
+                to: '/landing'
+            },
+            {
+                label: 'Auth',
+                icon: 'pi pi-fw pi-user',
+                items: [
+                    {
+                        label: 'Login',
+                        icon: 'pi pi-fw pi-sign-in',
+                        to: '/auth/login'
+                    },
+                    {
+                        label: 'Error',
+                        icon: 'pi pi-fw pi-times-circle',
+                        to: '/auth/error'
+                    },
+                    {
+                        label: 'Access Denied',
+                        icon: 'pi pi-fw pi-lock',
+                        to: '/auth/access'
+                    }
+                ]
+            },
+            {
+                label: 'Crud',
+                icon: 'pi pi-fw pi-pencil',
+                to: '/pages/crud'
+            },
+            {
+                label: 'Timeline',
+                icon: 'pi pi-fw pi-calendar',
+                to: '/pages/timeline'
+            },
+            {
+                label: 'Not Found',
+                icon: 'pi pi-fw pi-exclamation-circle',
+                to: '/pages/notfound'
+            },
+            {
+                label: 'Empty',
+                icon: 'pi pi-fw pi-circle-off',
+                to: '/pages/empty'
+            }
+        ]
+    },
+    {
+        label: 'Hierarchy',
+        items: [
+            {
+                label: 'Submenu 1',
+                icon: 'pi pi-fw pi-bookmark',
+                items: [
+                    {
+                        label: 'Submenu 1.1',
+                        icon: 'pi pi-fw pi-bookmark',
+                        items: [
+                            { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' },
+                            { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' },
+                            { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }
+                        ]
+                    },
+                    {
+                        label: 'Submenu 1.2',
+                        icon: 'pi pi-fw pi-bookmark',
+                        items: [{ label: 'Submenu 1.2.1', icon: 'pi pi-fw pi-bookmark' }]
+                    }
+                ]
+            },
+            {
+                label: 'Submenu 2',
+                icon: 'pi pi-fw pi-bookmark',
+                items: [
+                    {
+                        label: 'Submenu 2.1',
+                        icon: 'pi pi-fw pi-bookmark',
+                        items: [
+                            { label: 'Submenu 2.1.1', icon: 'pi pi-fw pi-bookmark' },
+                            { label: 'Submenu 2.1.2', icon: 'pi pi-fw pi-bookmark' }
+                        ]
+                    },
+                    {
+                        label: 'Submenu 2.2',
+                        icon: 'pi pi-fw pi-bookmark',
+                        items: [{ label: 'Submenu 2.2.1', icon: 'pi pi-fw pi-bookmark' }]
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Get Started',
+        items: [
+            {
+                label: 'Documentation',
+                icon: 'pi pi-fw pi-question',
+                to: '/documentation'
+            },
+            {
+                label: 'View Source',
+                icon: 'pi pi-fw pi-search',
+                url: 'https://github.com/primefaces/sakai-vue',
+                target: '_blank'
+            }
+        ]
+    }
+]);
+</script>
+
+<template>
+    <ul class="layout-menu">
+        <template v-for="(item, i) in model" :key="item">
+            <app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
+            <li v-if="item.separator" class="menu-separator"></li>
+        </template>
+        <li>
+            <a href="https://www.primefaces.org/primeblocks-vue/#/" target="_blank">
+                <img src="/layout/images/banner-primeblocks.png" alt="Prime Blocks" class="w-full mt-3" />
+            </a>
+        </li>
+    </ul>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/AppMenuItem.vue

@@ -0,0 +1,93 @@
+<script setup>
+import { ref, onBeforeMount, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useLayout } from '@/layout/composables/layout';
+
+const route = useRoute();
+
+const { layoutConfig, layoutState, setActiveMenuItem, onMenuToggle } = useLayout();
+
+const props = defineProps({
+    item: {
+        type: Object,
+        default: () => ({})
+    },
+    index: {
+        type: Number,
+        default: 0
+    },
+    root: {
+        type: Boolean,
+        default: true
+    },
+    parentItemKey: {
+        type: String,
+        default: null
+    }
+});
+
+const isActiveMenu = ref(false);
+const itemKey = ref(null);
+
+onBeforeMount(() => {
+    itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
+
+    const activeItem = layoutState.activeMenuItem;
+
+    isActiveMenu.value = activeItem === itemKey.value || activeItem ? activeItem.startsWith(itemKey.value + '-') : false;
+});
+
+watch(
+    () => layoutConfig.activeMenuItem.value,
+    (newVal) => {
+        isActiveMenu.value = newVal === itemKey.value || newVal.startsWith(itemKey.value + '-');
+    }
+);
+const itemClick = (event, item) => {
+    if (item.disabled) {
+        event.preventDefault();
+        return;
+    }
+
+    const { overlayMenuActive, staticMenuMobileActive } = layoutState;
+
+    if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
+        onMenuToggle();
+    }
+
+    if (item.command) {
+        item.command({ originalEvent: event, item: item });
+    }
+
+    const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
+
+    setActiveMenuItem(foundItemKey);
+};
+
+const checkActiveRoute = (item) => {
+    return route.path === item.to;
+};
+</script>
+
+<template>
+    <li :class="{ 'layout-root-menuitem': root, 'active-menuitem': isActiveMenu }">
+        <div v-if="root && item.visible !== false" class="layout-menuitem-root-text">{{ item.label }}</div>
+        <a v-if="(!item.to || item.items) && item.visible !== false" :href="item.url" @click="itemClick($event, item, index)" :class="item.class" :target="item.target" tabindex="0">
+            <i :class="item.icon" class="layout-menuitem-icon"></i>
+            <span class="layout-menuitem-text">{{ item.label }}</span>
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
+        </a>
+        <router-link v-if="item.to && !item.items && item.visible !== false" @click="itemClick($event, item, index)" :class="[item.class, { 'active-route': checkActiveRoute(item) }]" tabindex="0" :to="item.to">
+            <i :class="item.icon" class="layout-menuitem-icon"></i>
+            <span class="layout-menuitem-text">{{ item.label }}</span>
+            <i class="pi pi-fw pi-angle-down layout-submenu-toggler" v-if="item.items"></i>
+        </router-link>
+        <Transition v-if="item.items && item.visible !== false" name="layout-submenu">
+            <ul v-show="root ? true : isActiveMenu" class="layout-submenu">
+                <app-menu-item v-for="(child, i) in item.items" :key="child" :index="i" :item="child" :parentItemKey="itemKey" :root="false"></app-menu-item>
+            </ul>
+        </Transition>
+    </li>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/AppSidebar.vue

@@ -0,0 +1,9 @@
+<script setup>
+import AppMenu from './AppMenu.vue';
+</script>
+
+<template>
+    <app-menu></app-menu>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/AppTopbar.vue

@@ -0,0 +1,95 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
+import { useRouter } from 'vue-router';
+
+const { layoutConfig, onMenuToggle, contextPath } = useLayout();
+
+const outsideClickListener = ref(null);
+const topbarMenuActive = ref(false);
+const router = useRouter();
+
+onMounted(() => {
+    bindOutsideClickListener();
+});
+
+onBeforeUnmount(() => {
+    unbindOutsideClickListener();
+});
+
+const logoUrl = computed(() => {
+    return `${contextPath}layout/images/${layoutConfig.darkTheme.value ? 'logo-white' : 'logo-dark'}.svg`;
+});
+
+const onTopBarMenuButton = () => {
+    topbarMenuActive.value = !topbarMenuActive.value;
+};
+const onSettingsClick = () => {
+    topbarMenuActive.value = false;
+    router.push('/documentation');
+};
+const topbarMenuClasses = computed(() => {
+    return {
+        'layout-topbar-menu-mobile-active': topbarMenuActive.value
+    };
+});
+
+const bindOutsideClickListener = () => {
+    if (!outsideClickListener.value) {
+        outsideClickListener.value = (event) => {
+            if (isOutsideClicked(event)) {
+                topbarMenuActive.value = false;
+            }
+        };
+        document.addEventListener('click', outsideClickListener.value);
+    }
+};
+const unbindOutsideClickListener = () => {
+    if (outsideClickListener.value) {
+        document.removeEventListener('click', outsideClickListener);
+        outsideClickListener.value = null;
+    }
+};
+const isOutsideClicked = (event) => {
+    if (!topbarMenuActive.value) return;
+
+    const sidebarEl = document.querySelector('.layout-topbar-menu');
+    const topbarEl = document.querySelector('.layout-topbar-menu-button');
+
+    return !(sidebarEl.isSameNode(event.target) || sidebarEl.contains(event.target) || topbarEl.isSameNode(event.target) || topbarEl.contains(event.target));
+};
+</script>
+
+<template>
+    <div class="layout-topbar">
+        <router-link to="/" class="layout-topbar-logo">
+            <img :src="logoUrl" alt="logo" />
+            <span>SAKAI</span>
+        </router-link>
+
+        <button class="p-link layout-menu-button layout-topbar-button" @click="onMenuToggle()">
+            <i class="pi pi-bars"></i>
+        </button>
+
+        <button class="p-link layout-topbar-menu-button layout-topbar-button" @click="onTopBarMenuButton()">
+            <i class="pi pi-ellipsis-v"></i>
+        </button>
+
+        <div class="layout-topbar-menu" :class="topbarMenuClasses">
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
+                <i class="pi pi-calendar"></i>
+                <span>Calendar</span>
+            </button>
+            <button @click="onTopBarMenuButton()" class="p-link layout-topbar-button">
+                <i class="pi pi-user"></i>
+                <span>Profile</span>
+            </button>
+            <button @click="onSettingsClick()" class="p-link layout-topbar-button">
+                <i class="pi pi-cog"></i>
+                <span>Settings</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/layout/composables/layout.js

@@ -0,0 +1,55 @@
+import { toRefs, reactive, computed } from 'vue';
+
+const contextPath = import.meta.env.BASE_URL;
+
+const layoutConfig = reactive({
+    ripple: false,
+    darkTheme: false,
+    inputStyle: 'outlined',
+    menuMode: 'static',
+    theme: 'lara-light-indigo',
+    scale: 14,
+    activeMenuItem: null
+});
+
+const layoutState = reactive({
+    staticMenuDesktopInactive: false,
+    overlayMenuActive: false,
+    profileSidebarVisible: false,
+    configSidebarVisible: false,
+    staticMenuMobileActive: false,
+    menuHoverActive: false
+});
+
+export function useLayout() {
+    const changeThemeSettings = (theme, darkTheme) => {
+        layoutConfig.darkTheme = darkTheme;
+        layoutConfig.theme = theme;
+    };
+
+    const setScale = (scale) => {
+        layoutConfig.scale = scale;
+    };
+
+    const setActiveMenuItem = (item) => {
+        layoutConfig.activeMenuItem = item.value || item;
+    };
+
+    const onMenuToggle = () => {
+        if (layoutConfig.menuMode === 'overlay') {
+            layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
+        }
+
+        if (window.innerWidth > 991) {
+            layoutState.staticMenuDesktopInactive = !layoutState.staticMenuDesktopInactive;
+        } else {
+            layoutState.staticMenuMobileActive = !layoutState.staticMenuMobileActive;
+        }
+    };
+
+    const isSidebarActive = computed(() => layoutState.overlayMenuActive || layoutState.staticMenuMobileActive);
+
+    const isDarkTheme = computed(() => layoutConfig.darkTheme);
+
+    return { contextPath, layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), changeThemeSettings, setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem };
+}