You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.9 KiB
74 lines
1.9 KiB
<template>
|
|
<aside class="app-sidebar">
|
|
<div class="app-sidebar__container">
|
|
<h3 class="app-sidebar__top">
|
|
{{ t("Menu") }}
|
|
</h3>
|
|
<div class="app-sidebar__panel">
|
|
<PanelMenu :model="menuItems" />
|
|
</div>
|
|
<div class="app-sidebar__bottom">
|
|
<PageList category-title="footer_private" />
|
|
|
|
<p v-html="t('Created with Chamilo copyright year', [ currentYear ])" />
|
|
</div>
|
|
<a
|
|
v-if="securityStore.isAuthenticated"
|
|
class="app-sidebar__logout-link"
|
|
href="/logout"
|
|
>
|
|
<span class="mdi mdi-logout-variant" />
|
|
<span class="logout-text">{{ t("Sign out") }}</span>
|
|
</a>
|
|
</div>
|
|
<ToggleButton
|
|
v-model="sidebarIsOpen"
|
|
class="app-sidebar__button"
|
|
off-icon="mdi mdi-chevron-right"
|
|
on-icon="mdi mdi-chevron-left"
|
|
/>
|
|
</aside>
|
|
|
|
<Teleport to=".app-topbar__end">
|
|
<a
|
|
class="app-sidebar__topbar-button item-button"
|
|
tabindex="0"
|
|
@click="sidebarIsOpen = !sidebarIsOpen"
|
|
>
|
|
<i class="mdi mdi-close" />
|
|
</a>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from "vue"
|
|
import PanelMenu from "primevue/panelmenu"
|
|
import ToggleButton from "primevue/togglebutton"
|
|
import { useI18n } from "vue-i18n"
|
|
import { useSecurityStore } from "../../store/securityStore"
|
|
import { useSidebarMenu } from "../../composables/sidebarMenu"
|
|
import PageList from "../page/PageList.vue"
|
|
|
|
const { t } = useI18n()
|
|
const securityStore = useSecurityStore()
|
|
|
|
const { menuItems } = useSidebarMenu()
|
|
|
|
const sidebarIsOpen = ref(window.localStorage.getItem("sidebarIsOpen") === "true")
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
watch(
|
|
sidebarIsOpen,
|
|
(newValue) => {
|
|
const appEl = document.querySelector("#app")
|
|
|
|
window.localStorage.setItem("sidebarIsOpen", newValue.toString())
|
|
|
|
appEl.classList.toggle("app--sidebar-inactive", !newValue)
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
)
|
|
</script>
|
|
|