<template>
  <!-- ======= Sidebar ======= -->
  <aside id="sidebar" class="sidebar hide-in-mobile">
    <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 -->
    <ul class="d-flex profile">

      <li>
        <a class="dropdown-item d-flex align-items-center" href="users-profile.html">
          <i class="bi bi-person"></i>
          <span>마이페이지</span>
        </a>
      </li>

      <li>
        <a class="dropdown-item d-flex align-items-center" href="#">
          <i class="bi bi-box-arrow-right"></i>
          <router-link to="/Login" class="nav-link " active-class="active"><i class="bi bi-grid"></i>
            <span>로그인</span></router-link>
        </a>
      </li>

    </ul><!-- End Profile Dropdown Items -->
    <ul class="sidebar-nav" id="sidebar-nav">

      <li class="nav-item">
        <router-link to="/" class="nav-link " active-class="active"><i class="bi bi-grid"></i>
          <span>Home</span></router-link>
      </li><!-- End Dashboard Nav -->



      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#Chuljang-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i>
          <span>출장관리</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="Chuljang-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <router-link to="/ChuljangInsert" class="nav-link " active-class="active"><i
                class="bi bi-circle"></i><span>출장신청</span></router-link>
          </li>
          <li>
            <router-link to="/ChuljangList" class="nav-link " active-class="active"><i
                class="bi bi-circle"></i><span>출장내역</span></router-link>
          </li>

        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#hyuga-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i>
          <span>휴가관리</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="hyuga-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <router-link to="/HyugaInsert" class="nav-link " active-class="active"><i
                class="bi bi-circle"></i><span>휴가신청</span></router-link>
          </li>
          <li>
            <router-link to="/HyugaList" class="nav-link " active-class="active"><i
                class="bi bi-circle"></i><span>휴가내역</span></router-link>
          </li>

        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link collapsed" data-bs-target="#project-nav" data-bs-toggle="collapse" href="#">
          <i class="bi bi-journal-text"></i>
          <span>프로젝트관리</span><i class="bi bi-chevron-down ms-auto"></i>
        </a>
        <ul id="project-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
          <li>
            <router-link to="/ProjectInsert" class="nav-link " active-class="active"><i
                class="bi bi-circle"></i><span>프로젝트 등록</span></router-link>
          </li>

          <li>
            <router-link to="/ProjectList" class="nav-link " active-class="active"><i class="bi bi-journal-text"></i>
              <span>프로젝트 내역</span></router-link>
          </li>

        </ul>
      </li>

      <li class="nav-item">
        <router-link to="/NoticeList" class="nav-link " active-class="active"><i class="bi bi-journal-text"></i>
          <span>공지사항</span></router-link>
      </li><!-- End Register Page Nav -->

      <li class="nav-item">
        <router-link to="/EmployeeList" class="nav-link " active-class="active"><i class="bi bi-person"></i>
          <span>직원관리</span></router-link>
      </li><!-- End Login Page Nav -->

      <li class="nav-item">
        <router-link to="/DeptList" class="nav-link " active-class="active"><i class="bi bi-person"></i>
          <span>부서관리</span></router-link>
      </li><!-- End Error 404 Page Nav -->


    </ul>

  </aside><!-- End Sidebar-->
</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>