```vue
<template>

  <aside class="sidebar" :class="{ show: open }">
    <!-- =====================================================
         BRAND
    ====================================================== -->
    <div @click="this.$router.push('/')" style="cursor: pointer;" class="brand">
      <div class="brand-mark">N</div>
      <div>
        <div class="brand-name">NaxlexNursing</div>
        <div class="brand-sub">STUDY BETTER</div>
      </div>
      <button class="sidebar-close" aria-label="Close menu" @click="close">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
    <!-- =====================================================
         STUDY
    ====================================================== -->

    <div class="side-label">
      Study
    </div>

    <!-- Dashboard -->
    <RouterLink v-if="store.state.user" :to="{ name: 'Dashboard' }" class="side-link" @click.prevent="navigateProtected({ name: 'Dashboard' })">
      <i class="bi bi-grid-1x2-fill"></i>
      <span>Dashboard</span>
      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>

    <!-- Create an Exam -->
    <RouterLink :to="{ name: 'create-exam'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'create-exam',
        query: { open: 1 }
      })
      ">
      <i class="bi bi-stars"></i>

      <span>Create an exam</span>

      <span class="side-badge">
        NEW
      </span>
    </RouterLink>
    <!-- Topic Question Banks -->
    <RouterLink class="side-link" :to="{ name: 'question-banks' }" @click="closeOnMobile">
      <i class="bi bi-collection-fill"></i>
      <span>Topic question banks</span>
    </RouterLink>

    <!-- Custom AI Test -->
    <RouterLink class="side-link" :to="{ name: 'CustomExamsPerformance' }" @click="closeOnMobile">
      <i class="bi bi-robot"></i>
      <span>Custom AI Exams</span>
    </RouterLink>

    <!-- My Exams -->
    <RouterLink v-if="store.state.user"  :to="{name: 'my-exams'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'my-exams'
      })
      ">
      <i class="bi bi-journal-check"></i>

      <span>My exams</span>
    </RouterLink>



    <!-- =====================================================
         LEARN
    ====================================================== -->
    <div class="side-label">
      Learn
    </div>


    <!-- Study Guides -->
    <div class="side-link side-link-toggle" :class="{ open: guidesOpen }" role="button" :aria-expanded="guidesOpen"
      @click="
        guidesOpen = !guidesOpen;
      moreGuidesOpen = false;
      ">
      <i class="bi bi-book-half"></i>

      <span>Study guides</span>

      <i class="bi bi-chevron-down ms-auto submenu-chevron"></i>
    </div>


    <!-- Study Guides Submenu -->
    <div class="side-submenu" :class="{ open: guidesOpen }">
      <RouterLink v-for="item in studyGuides" :key="item.topic.slug" class="side-sublink"
        :to="'/study-guide-chapters/' + item.topic.slug" :title="`Study Guides - ${item.topic.name}`"
        @click="closeOnMobile">
        <span class="submenu-dot"></span>

        <span>
          {{ item.topic.name }}
        </span>

        <span class="side-badge">
          NEW
        </span>
      </RouterLink>
    </div>


    <!-- More Content -->
    <div class="side-link side-link-toggle" :class="{ open: moreGuidesOpen }" role="button"
      :aria-expanded="moreGuidesOpen" @click="
        moreGuidesOpen = !moreGuidesOpen;
      guidesOpen = false;
      ">
      <i class="bi bi-book-half"></i>

      <span>More Content</span>

      <i class="bi bi-chevron-down ms-auto submenu-chevron"></i>
    </div>


    <!-- More Content Submenu -->
    <div class="side-submenu" :class="{ open: moreGuidesOpen }">
      <RouterLink v-for="item in moreContent" :key="item.topic.slug" class="side-sublink"
        :to="'/study-guide/' + item.topic.slug" :title="`Study Guides - ${item.topic.name}`" @click="closeOnMobile">
        <span class="submenu-dot"></span>

        <span>
          {{ item.topic.name }}
        </span>
      </RouterLink>
    </div>


    <!-- Video Library -->
    <!-- <a
      class="side-link"
      href="#"
      @click.prevent="closeOnMobile"
    >
      <i class="bi bi-play-btn-fill"></i>

      <span>Video library</span>
    </a> -->


    <!-- Performance -->
    <!-- <RouterLink v-if="store.state.user"  :to="{name: 'performance'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'performance'
      })
      ">
      <i class="bi bi-bar-chart-fill"></i>

      <span>Performance</span>
    </RouterLink> -->



    <!-- =====================================================
         STUDY ROOMS
    ====================================================== -->
    <div  class="side-label">
      Study Rooms
    </div>


    <!-- General Rooms -->
    <RouterLink  :to="{name: 'ChatRooms'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'ChatRooms'
      })
      ">
      <i class="bi bi-people-fill"></i>

      <span>General Rooms</span>
    </RouterLink>


    <!-- My Room -->
    <RouterLink v-if="store.state.user"   :to="{name: 'MyChatRooms'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'MyChatRooms'
      })
      ">
      <i class="bi bi-door-open-fill"></i>

      <span>My Room</span>

    </RouterLink>


    <!-- Invitations -->
    <RouterLink  :to="{name: 'RoomInvitations'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'RoomInvitations'
      })
      ">
      <i class="bi bi-envelope-paper-fill"></i>

      <span>
        Invitations

        <span v-if="
          store.state.user &&
          store.state.roomInvitations?.length > 0
        " class="badge bg-success">
          {{ store.state.roomInvitations.length }}
        </span>
      </span>

    </RouterLink>



    <!-- =====================================================
         ACCOUNT
    ====================================================== -->
    <div class="side-label" v-if="store.state.user" >
      Account
    </div>


    <!-- Settings -->
    <RouterLink v-if="store.state.user"  :to="{name: 'Profile'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'Profile'
      })
      ">
      <i class="bi bi-gear-fill"></i>

      <span>Settings</span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- Support - Public -->
    <RouterLink v-if="store.state.user"  class="side-link" :to="{ name: 'support' }" @click="closeOnMobile">
      <i class="bi bi-headset"></i>

      <span>Support</span>
    </RouterLink>


    <!-- Referrals -->
    <RouterLink v-if="store.state.user"  :to="{name: 'Referrals'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'Referrals'
      })
      ">
      <i class="bi bi-people-fill"></i>

      <span>Referrals</span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- Previous Tests -->
    <RouterLink v-if="store.state.user"  :to="{name: 'MyTests'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'MyTests'
      })
      ">
      <i class="bi bi-clock-history"></i>

      <span>Previous tests</span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- Notifications -->
    <RouterLink v-if="store.state.user"  :to="{name: 'Notifications'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'Notifications'
      })
      ">
      <i class="bi bi-bell-fill"></i>

      <span>
        Notifications

        <span v-if="
          store.state.user &&
          store.state.notifications?.length > 0
        " class="badge bg-success">
          {{ store.state.notifications.length }}
        </span>
      </span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- My Question Notes -->
    <RouterLink v-if="store.state.user"  :to="{name: 'QuestionNotes'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'QuestionNotes'
      })
      ">
      <i class="bi bi-journal-bookmark-fill"></i>

      <span>My Question Notes</span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- My Notebook -->
    <RouterLink v-if="store.state.user"  :to="{name: 'Notebook'}" class="side-link" @click.prevent="
      navigateProtected({
        name: 'Notebook'
      })
      ">
      <i class="bi bi-journal-text"></i>

      <span>My Notebook</span>

      <i v-if="!store.state.user" class="bi bi-lock-fill ms-auto side-lock" title="Sign in required"></i>
    </RouterLink>


    <!-- =====================================================
         WEEKLY GOAL
    ====================================================== -->
    <div v-if="store.state.user" class="sidebar-card">
      <div class="d-flex justify-content-between align-items-center">
        <strong class="small text-white">
          Weekly goal
        </strong>

        <span class="small">
          {{ goalPercent }}%
        </span>
      </div>

      <div class="progress mt-2">
        <div class="progress-bar" :style="{
          width: goalPercent + '%'
        }"></div>
      </div>

      <div class="small mt-2">
        {{ goal.completed }}
        /
        {{ goal.target }}
        questions completed
      </div>
    </div>

  </aside>
</template>


<script setup>
import { computed, ref } from 'vue';
import { RouterLink, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { useSidebar } from '@/composables/useSidebar';


/* =========================================================
   STORE
========================================================= */

const store = useStore();

const router = useRouter();


/* =========================================================
   SIDEBAR
========================================================= */

const {
  open,
  close,
  closeOnMobile
} = useSidebar();


/* =========================================================
   PROTECTED NAVIGATION
========================================================= */

/*
 * Protected menu items remain visible to guests.
 *
 * If the user is not logged in:
 *      -> redirect to /signin
 *
 * If the user is logged in:
 *      -> continue to the requested route.
 */

const navigateProtected = (route) => {

  if (!store.state.user) {

    closeOnMobile();

    router.push('/signin');

    return;
  }

  closeOnMobile();

  router.push(route);
};


/* =========================================================
   NURSING TOPICS
========================================================= */

const topics = computed(() => {
  return store.state.nursingTopics ?? [];
});


/* =========================================================
   STUDY GUIDES
   visibility = 0
========================================================= */

const studyGuides = computed(() => {
  return topics.value.filter(
    (item) => item?.topic?.visibility == 0
  );
});


/* =========================================================
   MORE CONTENT
   visibility = 1
========================================================= */

const moreContent = computed(() => {
  return topics.value.filter(
    (item) => item?.topic?.visibility == 1
  );
});


/* =========================================================
   SUBMENU STATE
========================================================= */

const guidesOpen = ref(false);

const moreGuidesOpen = ref(false);


/* =========================================================
   WEEKLY GOAL
========================================================= */

const goal = ref({
  completed: 340,
  target: 500
});


const goalPercent = computed(() => {

  if (!goal.value.target) {
    return 0;
  }

  return Math.round(
    (goal.value.completed / goal.value.target) * 100
  );
});
</script>
```