chamilo-lms/assets/vue/components/layout/Sidebar.vue

<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="items" />
      </div>
      <div class="app-sidebar__bottom">
        <p>{{ t("Created with Chamilo &copy; {year}", { year: 2022 }) }}</p>
      </div>
      <a
        v-if="securityStore.isAuthenticated"
        class="app-sidebar__logout-link"
        href="/logout"
      >
        <span class="pi pi-fw pi-sign-out" />
        <span class="logout-text">{{ t("Sign out") }}</span>
      </a>
    </div>
    <ToggleButton
      v-model="sidebarIsOpen"
      class="app-sidebar__button"
      off-icon="pi pi-fw pi-chevron-right"
      on-icon="pi pi-fw pi-chevron-left"
    />
  </aside>

  <Teleport to=".app-topbar__end">
    <a
      class="app-sidebar__topbar-button"
      tabindex="0"
      @click="sidebarIsOpen = !sidebarIsOpen"
    >
      <i class="pi pi-times" />
    </a>
  </Teleport>
</template>

<script setup>
import { computed, ref, watch } from "vue"
import PanelMenu from "primevue/panelmenu"
import ToggleButton from "primevue/togglebutton"
import { useI18n } from "vue-i18n"
import { useStore } from "vuex"
import { usePlatformConfig } from "../../store/platformConfig"
import { useSecurityStore } from "../../store/securityStore"

const store = useStore()
const { t } = useI18n()
const platformConfigStore = usePlatformConfig()
const securityStore = useSecurityStore()

const isAdmin = computed(() => store.getters["security/isAdmin"])
const isBoss = computed(() => store.getters["security/isBoss"])
const isStudent = computed(() => store.getters["security/isStudent"])

const items = ref([
  {
    label: t("Home"),
    to: { name: "Home" },
    icon: "pi pi-fw pi-home",
  },

  {
    label: t("Courses"),
    icon: "pi pi-fw pi-book",
    visible: securityStore.isAuthenticated,
    items: [
      {
        label: t("My courses"),
        to: { name: "MyCourses" },
      },
      {
        label: t("My sessions"),
        to: { name: "MySessions" },
      },
    ],
  },
  {
    label: t("Events"),
    to: { name: "CCalendarEventList" },
    icon: "pi pi-fw pi-calendar",
    visible: securityStore.isAuthenticated,
  },
  {
    label: t("My progress"),
    url: "/main/auth/my_progress.php",
    icon: "pi pi-fw pi-chart-line",
    visible: securityStore.isAuthenticated,
  },
  {
    label: t("Social network"),
    to: { name: "SocialWall" },
    icon: "pi pi-fw pi-sitemap",
    visible: securityStore.isAuthenticated,
  },

  {
    label: t("Diagnosis"),
    icon: "pi pi-fw pi-search",
    visible: isBoss.value || isStudent.value,
    items: [
      {
        label: t("Management"),
        url: "/main/search/load_search.php",
        visible: isBoss,
      },
      {
        label: t("Search"),
        url: "/main/search/search.php",
        visible: isBoss.value || isStudent.value,
      },
    ],
  },

  {
    label: t("Administration"),
    icon: "pi pi-fw pi-table",
    visible: isAdmin,
    items: [
      {
        label: t("Administration"),
        to: { name: "AdminIndex" },
      },
      {
        label: t("Users"),
        url: "/main/admin/user_list.php",
      },
      {
        label: t("Courses"),
        url: "/main/admin/course_list.php",
      },
      {
        label: t("Sessions"),
        url: "/main/session/session_list.php",
      },
      {
        label: t("Reporting"),
        url: "/main/my_space/index.php",
      },
    ],
  },
])

const sidebarIsOpen = ref(window.localStorage.getItem("sidebarIsOpen") === "true")

if (platformConfigStore.plugins?.bbb?.show_global_conference_link) {
  items.value.push({
    label: t('Videoconference'),
    url: platformConfigStore.plugins.bbb.listingURL,
    icon: 'mdi mdi-video-box'
  })
}

watch(
  sidebarIsOpen,
  (newValue) => {
    const appEl = document.querySelector("#app")

    window.localStorage.setItem("sidebarIsOpen", newValue.toString())

    appEl.classList.toggle("app--sidebar-inactive", !newValue)
  },
  {
    immediate: true,
  },
)
</script>