libreevent/src/webapp/src/views/admin/AdminView.vue

<!--
*				libreevent - AdminView.vue
*
*	Created by Janis Hutz 05/12/2023, Licensed under the GPL V3 License
*			https://janishutz.com, development@janishutz.com
*
*
-->

<template>
    <div class="admin-wrapper">
        <div class="top-bar">
            <h1>Admin panel</h1>
        </div>
        <button class="hideNav">&#9776</button>
        <nav class="side-nav">
            <img src="@/assets/logo.png" alt="libreevent logo" style="width: 80%; margin-left: 10%; margin-bottom: 5%;">
            <router-link to="/admin" class="admin-menu">Home</router-link>
            <router-link to="/admin/pages" class="admin-menu">Pages</router-link>
            <router-link to="/admin/events" class="admin-menu">Events</router-link>
            <router-link to="/admin/locations" class="admin-menu">Locations</router-link>
            <router-link to="/admin/plugins" class="admin-menu">Plugins</router-link>
            <router-link to="/admin/settings" class="admin-menu">Settings</router-link>
            <button to="/admin/login" class="admin-menu" @click="logout()">Logout</button>
        </nav>
        <div class="main-view">
            <router-view v-slot="{ Component, route }">
                <transition :name="route.meta.transition || 'fade'" mode="out-in">
                    <component :is="Component" />
                </transition>
            </router-view>
        </div>
    </div>
</template>

<style scoped>
    .admin-wrapper {
        display: grid;
        grid-template-areas:
        'sidebar top top top'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main'
        'sidebar main main main';
        height: 100%;
    }

    .top-bar {
        grid-area: top;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .main-view {
        grid-area: main;
        height: 100%;
        width: 80vw;
        min-height: 80vh;
        overflow: scroll;
    }

    .side-nav {
        grid-area: sidebar;
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 20vw;
        padding: 0;
        margin: 0;
        background-color: var( --accent-background );
        justify-content: center;
        overflow: scroll;
    }

    .admin-menu {
        padding: 4% 0%;
        width: 100%;
        background-color: rgba( 0, 0, 0, 0 );
        color: var( --secondary-color );
        cursor: pointer;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-decoration: none;
        transition: 1s;
        font-size: 100%;
        border-style: none;
    }

    nav a.router-link-exact-active {
        background-color: var( --accent-background-hover );
    }

    .admin-menu:hover {
        background-color: var( --accent-background-hover );
        transition: 0.4s;
    }

    .hideNav {
        border: none;
        font-size: 300%;
        color: var( --secondary-color );
        width: fit-content;
        background-color: rgba( 0, 0, 0, 0 );
        position: fixed;
    }

    @media only screen and (min-width: 1299px) {
        .hideNav {
            display: none;
        }
    }
</style>

<style>
    nav {
        display: none;
    }
</style>

<script>
    import { useUserStore } from '@/stores/userStore';
    import { mapStores } from 'pinia';

    export default {
        data () {
            return {
                formData: {}
            }
        },
        computed: {
            ...mapStores( useUserStore )
        },
        methods: {
            logout () {
                if ( confirm( 'Do you really want to log out?' ) ) {
                    fetch( '/admin/logout' ).then( _ => {
                        this.userStore.setAdminAuth( false );
                        this.$router.push( '/admin/login' );
                    } );
                }
            }
        }
    };
</script>