<template>
  <!-- ======= Header ======= -->
  <header id="header" class="header d-flex fixed-top  align-items-center">

    <div class=" align-items-center logo">
      <a href="/" class="  align-items-center">
        <img :src="logo" alt="">
        <span class="d-none d-lg-block"></span>
      </a>
      <i class="bi bi-list toggle-sidebar-btn" @click="toggleSidebar"></i>
    </div><!-- End Logo -->


    <nav class="header-nav ms-auto">
      <ul class="d-flex align-items-center">



        <li class="nav-item dropdown pe-3">

          <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
            <span class="d-none d-md-block dropdown-toggle ps-2">{{ userName }}</span>
          </a><!-- End Profile Iamge Icon -->

          
        </li><!-- End Profile Nav -->

      </ul>
    </nav><!-- End Icons Navigation -->

  </header><!-- End Header -->
</template>

<script>
export default {
  name: "ProfileImage",
  data() {
    return {
      userName: '',
      logo: "/client/resources/img/logo_t.png", // 경로를 Vue 프로젝트 구조에 맞게 설정
    };
  },
  methods: {
    toggleSidebar() {
      // `toggle-sidebar` 클래스가 있으면 제거, 없으면 추가
      document.body.classList.toggle("toggle-sidebar");
    },
  },
  components: {
  },
};
</script>

<style></style>