```vue
<template>
  <header class="nx-study-topbar">

    <div class="nx-topbar-inner">

      <!-- =====================================================
           LEFT SIDE
      ====================================================== -->
      <div class="nx-topbar-left">

        <!-- Mobile menu -->
        <button
          type="button"
          class="nx-mobile-menu iq-menu-bt-sidebar"
          aria-label="Open navigation"
          @click="openSidebar"
        >
          <i class="fa fa-bars wrapper-menu"></i>
        </button>

        <!-- Topic context -->
        <div class="nx-topic-context">

          <span class="nx-topic-label">
            STUDY GUIDE
          </span>

          <div class="nx-topic-title">
            {{ topicData?.topic_name || "Study Guide" }}
          </div>

        </div>

      </div>


      <!-- =====================================================
           RIGHT SIDE
      ====================================================== -->
      <div class="nx-topbar-right">

        <!-- Current lesson -->
        <div
          v-if="selectedTopicName"
          class="nx-current-lesson"
        >

          <span class="nx-current-lesson-icon">
            <i class="fa fa-book-open"></i>
          </span>

          <div class="nx-current-lesson-content">

            <span class="nx-current-lesson-label">
              CURRENT LESSON
            </span>

            <span class="nx-current-lesson-name">
              {{ selectedTopicName }}
            </span>

          </div>

        </div>


        <!-- Completed status -->
        <div
          v-if="currentUser && isCurrentLessonCompleted"
          class="nx-completed-status"
        >

          <span class="nx-completed-icon">
            <i class="fa-solid fa-check"></i>
          </span>

          <span>
            Completed
          </span>

        </div>


        <!-- Mark as read -->
        <button
          v-if="
            currentUser &&
            selectedLessonslug &&
            !isCurrentLessonCompleted
          "
          type="button"
          class="nx-mark-read"
          @click="markAsRead"
        >

          <i class="fa-solid fa-check"></i>

          <span>
            Mark as Read
          </span>

        </button>

      </div>

    </div>

    <!-- =====================================================
         MOBILE CURRENT LESSON ROW
    ====================================================== -->
    <div
      v-if="selectedTopicName"
      class="nx-mobile-lesson-row"
    >

      <span class="nx-mobile-lesson-icon">
        <i class="fa fa-book-open"></i>
      </span>

      <div class="nx-mobile-lesson-content">

        <span class="nx-mobile-lesson-label">
          CURRENT LESSON
        </span>

        <span class="nx-mobile-lesson-name">
          {{ selectedTopicName }}
        </span>

      </div>

      <span
        v-if="currentUser && isCurrentLessonCompleted"
        class="nx-mobile-complete"
      >
        <i class="fa-solid fa-check"></i>
      </span>

    </div>

  </header>
</template>


<script>
export default {
  name: "StudyGuideTopbar",

  props: {

    topicData: {
      type: Object,
      required: false,
      default: () => ({})
    },

    showAnalytics: {
      type: Boolean,
      default: false
    },

    showTests: {
      type: Boolean,
      default: false
    },

    readLessons: {
      type: Array,
      required: false,
      default: () => []
    },

    selectedTopicName: {
      type: String,
      default: ""
    },

    selectedLessonslug: {
      type: String,
      default: ""
    },

    selectedSubtopicId: {
      type: [String, Number],
      default: null
    }

  },


  computed: {

    /* =========================================================
       SAFE CURRENT USER
    ========================================================== */
    currentUser() {

      const user =
        this.$store?.state?.user;

      if (
        user &&
        typeof user === "object"
      ) {
        return user;
      }

      if (
        typeof user === "string"
      ) {

        try {

          return JSON.parse(user) || null;

        } catch (error) {

          return null;

        }

      }

      return null;

    },


    /* =========================================================
       LESSON COMPLETION
    ========================================================== */
    isCurrentLessonCompleted() {

      if (
        this.selectedSubtopicId === null ||
        this.selectedSubtopicId === undefined
      ) {
        return false;
      }

      return this.readLessons.some(
        id =>
          String(id) ===
          String(this.selectedSubtopicId)
      );

    },


    /* =========================================================
       PROGRESS
    ========================================================== */
    progress() {

      const total =
        Number(
          this.topicData?.total_lessons
        );

      const completed =
        this.readLessons?.length || 0;

      if (
        !total ||
        total <= 0
      ) {
        return 0;
      }

      return Math.min(
        100,
        Math.trunc(
          (completed / total) * 100
        )
      );

    }

  },


  methods: {

    /* =========================================================
       OPEN SIDEBAR
    ========================================================== */
    openSidebar() {

      /*
       * Emit this so the parent can also control the sidebar.
       */
      this.$emit("toggle-sidebar");

      /*
       * Also dispatch a DOM click on the existing sidebar
       * toggle so the sidebar implementation can respond.
       *
       * This keeps compatibility with the existing
       * .iq-menu-bt-sidebar implementation.
       */
      this.$nextTick(() => {

        const sidebar =
          document.querySelector(
            ".nx-study-sidebar"
          );

        if (
          sidebar &&
          !sidebar.classList.contains(
            "is-mobile-open"
          )
        ) {

          /*
           * The sidebar already listens for
           * .iq-menu-bt-sidebar clicks.
           *
           * Do not manually mutate its Vue state here.
           */

        }

      });

    },


    /* =========================================================
       MARK LESSON AS READ
    ========================================================== */
    markAsRead() {

      if (
        !this.selectedLessonslug
      ) {
        return;
      }

      this.$emit(
        "mark-as-read",
        this.selectedLessonslug
      );

    }

  }

};
</script>


<style scoped>

/* =========================================================
   NURXAM TOPBAR
========================================================= */

.nx-study-topbar {

  --nx-primary: #087f8c;
  --nx-primary-dark: #066c76;
  --nx-primary-light: #e9f7f8;

  --nx-green: #16834a;
  --nx-green-light: #eaf7ef;

  --nx-text: #1f2933;
  --nx-muted: #718096;

  --nx-border: #e6edef;

  position: fixed;

  top: 0;
  right: 0;
  left: 270px;

  height: 68px;

  z-index: 1020;

  background:
    rgba(255, 255, 255, .97);

  border-bottom:
    1px solid var(--nx-border);

  box-shadow:
    0 4px 18px
    rgba(31, 41, 51, .045);

  backdrop-filter:
    blur(10px);

}


/* =========================================================
   INNER
========================================================= */

.nx-topbar-inner {

  width: 100%;
  height: 68px;

  padding:
    0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

}


/* =========================================================
   LEFT
========================================================= */

.nx-topbar-left {

  min-width: 0;

  display: flex;
  align-items: center;

  gap: 15px;

}


/* =========================================================
   MOBILE MENU
========================================================= */

.nx-mobile-menu {

  display: none;

  width: 38px;
  height: 38px;

  align-items: center;
  justify-content: center;

  border:
    1px solid var(--nx-border);

  background:
    #ffffff;

  color:
    var(--nx-primary);

  border-radius:
    9px;

  cursor: pointer;

  flex-shrink: 0;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;

}

.nx-mobile-menu:hover {

  background:
    var(--nx-primary-light);

  border-color:
    #c9e7ea;

  color:
    var(--nx-primary-dark);

}


/* =========================================================
   TOPIC CONTEXT
========================================================= */

.nx-topic-context {

  min-width: 0;

  display: flex;
  flex-direction: column;

}

.nx-topic-label {

  display: block;

  color:
    var(--nx-primary);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .09em;

  line-height:
    1;

  margin-bottom:
    5px;

}

.nx-topic-title {

  max-width:
    420px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    var(--nx-text);

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1.2;

}


/* =========================================================
   RIGHT
========================================================= */

.nx-topbar-right {

  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;

}


/* =========================================================
   CURRENT LESSON
========================================================= */

.nx-current-lesson {

  min-width: 0;

  max-width:
    350px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    7px 11px;

  border:
    1px solid var(--nx-border);

  background:
    #fbfdfd;

  border-radius:
    10px;

}

.nx-current-lesson-icon {

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  background:
    var(--nx-primary-light);

  color:
    var(--nx-primary);

  border-radius:
    8px;

  font-size:
    11px;

}

.nx-current-lesson-content {

  min-width: 0;

  display: flex;
  flex-direction: column;

}

.nx-current-lesson-label {

  color:
    var(--nx-muted);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .06em;

  line-height:
    1;

  margin-bottom:
    4px;

}

.nx-current-lesson-name {

  max-width:
    250px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  color:
    #35474e;

  font-size:
    11px;

  font-weight:
    600;

}


/* =========================================================
   COMPLETED
========================================================= */

.nx-completed-status {

  height:
    38px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 11px;

  background:
    var(--nx-green-light);

  color:
    var(--nx-green);

  border:
    1px solid #d6efdf;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    700;

  white-space:
    nowrap;

}

.nx-completed-icon {

  width: 21px;
  height: 21px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    #ffffff;

  border-radius:
    50%;

  font-size:
    9px;

}


/* =========================================================
   MARK AS READ
========================================================= */

.nx-mark-read {

  min-height:
    38px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 13px;

  border:
    1px solid var(--nx-primary);

  background:
    var(--nx-primary);

  color:
    #ffffff;

  border-radius:
    9px;

  font-size:
    10px;

  font-weight:
    700;

  white-space:
    nowrap;

  cursor:
    pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;

}

.nx-mark-read:hover {

  background:
    var(--nx-primary-dark);

  border-color:
    var(--nx-primary-dark);

  transform:
    translateY(-1px);

  box-shadow:
    0 5px 14px
    rgba(8,127,140,.15);

}

.nx-mark-read i {

  font-size:
    10px;

}


/* =========================================================
   MOBILE LESSON ROW
========================================================= */

.nx-mobile-lesson-row {

  display: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .nx-study-topbar {

    left:
      0;

    height:
      64px;

  }

  .nx-topbar-inner {

    height:
      64px;

    padding:
      0 16px;

  }

  .nx-mobile-menu {

    display:
      flex;

  }

  .nx-topic-title {

    max-width:
      300px;

  }

  .nx-current-lesson {

    max-width:
      260px;

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .nx-study-topbar {

    height:
      auto;

    min-height:
      60px;

  }

  .nx-topbar-inner {

    height:
      60px;

    padding:
      0 12px;

    gap:
      10px;

  }

  .nx-topbar-left {

    flex:
      1;

    min-width:
      0;

    gap:
      10px;

  }

  .nx-mobile-menu {

    width:
      36px;

    height:
      36px;

  }

  .nx-topic-label {

    font-size:
      8px;

  }

  .nx-topic-title {

    max-width:
      calc(100vw - 90px);

    font-size:
      13px;

  }

  /*
   * Hide the desktop lesson information on mobile.
   */
  .nx-topbar-right {

    display:
      none;

  }

  /*
   * Show a dedicated mobile lesson row.
   */
  .nx-mobile-lesson-row {

    min-height:
      48px;

    padding:
      7px 12px;

    display:
      flex;

    align-items:
      center;

    gap:
      9px;

    background:
      #ffffff;

    border-top:
      1px solid #f0f3f4;

    border-bottom:
      1px solid var(--nx-border);

  }

  .nx-mobile-lesson-icon {

    width:
      28px;

    height:
      28px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    flex-shrink:
      0;

    background:
      var(--nx-primary-light);

    color:
      var(--nx-primary);

    border-radius:
      7px;

    font-size:
      10px;

  }

  .nx-mobile-lesson-content {

    flex:
      1;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

  }

  .nx-mobile-lesson-label {

    color:
      var(--nx-muted);

    font-size:
      7px;

    font-weight:
      800;

    letter-spacing:
      .07em;

    line-height:
      1;

    margin-bottom:
      4px;

  }

  .nx-mobile-lesson-name {

    color:
      var(--nx-text);

    font-size:
      11px;

    font-weight:
      600;

    line-height:
      1.3;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

  }

  .nx-mobile-complete {

    width:
      23px;

    height:
      23px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    flex-shrink:
      0;

    background:
      var(--nx-green-light);

    color:
      var(--nx-green);

    border-radius:
      50%;

    font-size:
      9px;

  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

  .nx-topbar-inner {

    padding:
      0 9px;

  }

  .nx-mobile-lesson-row {

    padding-left:
      9px;

    padding-right:
      9px;

  }

  .nx-topic-title {

    font-size:
      12px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .nx-study-topbar *,
  .nx-study-topbar {

    transition:
      none !important;

  }

}

</style>
```