TK-FB-Project/web-ui/components/sidebar-nav.html

<!-- components/sidebar-nav.html -->
<!-- 카테고리별 사이드 네비게이션 메뉴 -->
<aside class="sidebar-nav" id="sidebarNav">
  <div class="sidebar-toggle" id="sidebarToggle">
    <span class="toggle-icon">&#9776;</span>
  </div>

  <nav class="sidebar-menu">
    <!-- 대시보드 -->
    <a href="/pages/dashboard.html" class="nav-item" data-page-key="dashboard">
      <span class="nav-icon">&#127968;</span>
      <span class="nav-text">대시보드</span>
    </a>

    <!-- 작업 관리 -->
    <div class="nav-category" data-category="work">
      <button class="nav-category-header">
        <span class="nav-icon">&#128221;</span>
        <span class="nav-text">작업 관리</span>
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
        <a href="/pages/work/tbm.html" class="nav-item" data-page-key="work.tbm">
          <span class="nav-text">TBM 관리</span>
        </a>
        <a href="/pages/work/report-create.html" class="nav-item" data-page-key="work.report_create">
          <span class="nav-text">작업보고서 작성</span>
        </a>
        <a href="/pages/work/analysis.html" class="nav-item admin-only" data-page-key="work.analysis">
          <span class="nav-text">작업 분석</span>
        </a>
        <a href="/pages/work/nonconformity.html" class="nav-item" data-page-key="work.nonconformity">
          <span class="nav-text">부적합 현황</span>
        </a>
      </div>
    </div>

    <!-- 공장 관리 -->
    <div class="nav-category" data-category="factory">
      <button class="nav-category-header">
        <span class="nav-icon">&#127981;</span>
        <span class="nav-text">공장 관리</span>
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
        <a href="/pages/admin/repair-management.html" class="nav-item" data-page-key="factory.repair_management">
          <span class="nav-text">시설설비 관리</span>
        </a>
        <a href="/pages/inspection/daily-patrol.html" class="nav-item" data-page-key="inspection.daily_patrol">
          <span class="nav-text">일일순회점검</span>
        </a>
        <a href="/pages/attendance/checkin.html" class="nav-item" data-page-key="inspection.checkin">
          <span class="nav-text">출근 체크</span>
        </a>
        <a href="/pages/attendance/work-status.html" class="nav-item" data-page-key="inspection.work_status">
          <span class="nav-text">근무 현황</span>
        </a>
      </div>
    </div>

    <!-- 안전 관리 -->
    <div class="nav-category" data-category="safety">
      <button class="nav-category-header">
        <span class="nav-icon">&#128737;</span>
        <span class="nav-text">안전 관리</span>
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
        <a href="/pages/safety/report-status.html" class="nav-item" data-page-key="safety.report_status">
          <span class="nav-text">안전신고 현황</span>
        </a>
        <a href="/pages/safety/visit-request.html" class="nav-item" data-page-key="safety.visit_request">
          <span class="nav-text">출입 신청</span>
        </a>
        <a href="/pages/safety/management.html" class="nav-item admin-only" data-page-key="safety.management">
          <span class="nav-text">안전 관리</span>
        </a>
        <a href="/pages/safety/checklist-manage.html" class="nav-item admin-only" data-page-key="safety.checklist_manage">
          <span class="nav-text">체크리스트 관리</span>
        </a>
      </div>
    </div>

    <!-- 근태 관리 -->
    <div class="nav-category" data-category="attendance">
      <button class="nav-category-header">
        <span class="nav-icon">&#128197;</span>
        <span class="nav-text">근태 관리</span>
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
        <a href="/pages/attendance/my-vacation-info.html" class="nav-item" data-page-key="attendance.my_vacation_info">
          <span class="nav-text">내 연차 정보</span>
        </a>
        <a href="/pages/attendance/monthly.html" class="nav-item" data-page-key="attendance.monthly">
          <span class="nav-text">월간 근태</span>
        </a>
        <a href="/pages/attendance/vacation-request.html" class="nav-item" data-page-key="attendance.vacation_request">
          <span class="nav-text">휴가 신청</span>
        </a>
        <a href="/pages/attendance/vacation-management.html" class="nav-item admin-only" data-page-key="attendance.vacation_management">
          <span class="nav-text">휴가 관리</span>
        </a>
        <a href="/pages/attendance/vacation-allocation.html" class="nav-item admin-only" data-page-key="attendance.vacation_allocation">
          <span class="nav-text">휴가 발생 입력</span>
        </a>
        <a href="/pages/attendance/annual-overview.html" class="nav-item admin-only" data-page-key="attendance.annual_overview">
          <span class="nav-text">연간 휴가 현황</span>
        </a>
      </div>
    </div>

    <!-- 시스템 관리 (관리자 전용) -->
    <div class="nav-category admin-only" data-category="admin">
      <button class="nav-category-header">
        <span class="nav-icon">&#9881;</span>
        <span class="nav-text">시스템 관리</span>
        <span class="nav-arrow">&#9662;</span>
      </button>
      <div class="nav-category-items">
        <a href="/pages/admin/accounts.html" class="nav-item" data-page-key="admin.accounts">
          <span class="nav-text">계정 관리</span>
        </a>
        <a href="/pages/admin/workers.html" class="nav-item" data-page-key="admin.workers">
          <span class="nav-text">작업자 관리</span>
        </a>
        <a href="/pages/admin/projects.html" class="nav-item" data-page-key="admin.projects">
          <span class="nav-text">프로젝트 관리</span>
        </a>
        <a href="/pages/admin/tasks.html" class="nav-item" data-page-key="admin.tasks">
          <span class="nav-text">작업 관리</span>
        </a>
        <a href="/pages/admin/workplaces.html" class="nav-item" data-page-key="admin.workplaces">
          <span class="nav-text">작업장 관리</span>
        </a>
        <a href="/pages/admin/equipments.html" class="nav-item" data-page-key="admin.equipments">
          <span class="nav-text">설비 관리</span>
        </a>
        <a href="/pages/admin/issue-categories.html" class="nav-item" data-page-key="admin.issue_categories">
          <span class="nav-text">신고 카테고리 관리</span>
        </a>
        <a href="/pages/admin/attendance-report.html" class="nav-item" data-page-key="admin.attendance_report">
          <span class="nav-text">출퇴근-보고서 대조</span>
        </a>
      </div>
    </div>
  </nav>
</aside>

<style>
/* 사이드바 기본 스타일 */
.sidebar-nav {
  position: fixed;
  left: 0;
  top: 80px; /* 헤더 높이만큼 아래로 */
  height: calc(100vh - 80px);
  width: 260px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #e2e8f0;
  z-index: 99; /* 헤더보다 낮게 */
  transition: transform 0.3s ease, width 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

.sidebar-nav.collapsed {
  width: 60px;
}

.sidebar-nav.collapsed .nav-text,
.sidebar-nav.collapsed .nav-arrow {
  display: none;
}

.sidebar-nav.collapsed .nav-category-items {
  display: none !important;
}

/* 토글 버튼 */
.sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.toggle-icon {
  font-size: 1.5rem;
  color: #94a3b8;
}

/* 메뉴 스타일 */
.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

/* 네비게이션 아이템 */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: #cbd5e1;
  text-decoration: none;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-item.active {
  background: rgba(14, 165, 233, 0.15);
  color: #38bdf8;
  border-left-color: #38bdf8;
}

.nav-icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}

.nav-text {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 카테고리 헤더 */
.nav-category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-category-header:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.05);
}

.nav-arrow {
  margin-left: auto;
  font-size: 0.75rem;
  transition: transform 0.2s;
}

.nav-category.expanded .nav-arrow {
  transform: rotate(180deg);
}

/* 카테고리 아이템 */
.nav-category-items {
  display: none;
  padding-left: 0.5rem;
}

.nav-category.expanded .nav-category-items {
  display: block;
}

.nav-category-items .nav-item {
  padding-left: 2.5rem;
  font-size: 0.875rem;
}

/* 관리자 전용 숨김 */
.admin-only {
  display: none;
}

.admin-only.visible {
  display: flex;
}

.nav-category.admin-only.visible {
  display: block;
}

/* 스크롤바 스타일 */
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 메인 콘텐츠 여백 */
body.has-sidebar .dashboard-container,
body.has-sidebar .work-report-container,
body.has-sidebar .analysis-container,
body.has-sidebar > .dashboard-main {
  margin-left: 260px;
  transition: margin-left 0.3s ease;
}

/* page-container 사용 시: page-container에만 margin 적용 (main-content 중복 방지) */
body.has-sidebar .page-container {
  margin-left: 260px;
  transition: margin-left 0.3s ease;
}

/* page-container 없이 main-content만 있는 경우 */
body.has-sidebar > .main-content {
  margin-left: 260px;
  transition: margin-left 0.3s ease;
}

body.has-sidebar.sidebar-collapsed .dashboard-container,
body.has-sidebar.sidebar-collapsed .work-report-container,
body.has-sidebar.sidebar-collapsed .analysis-container,
body.has-sidebar.sidebar-collapsed > .dashboard-main {
  margin-left: 60px;
}

body.has-sidebar.sidebar-collapsed .page-container {
  margin-left: 60px;
}

body.has-sidebar.sidebar-collapsed > .main-content {
  margin-left: 60px;
}

/* 반응형 - 모바일 */
@media (max-width: 1024px) {
  .sidebar-nav {
    transform: translateX(-100%);
    width: 280px;
    top: 0;
    height: 100vh;
    z-index: 1001;
  }

  .sidebar-nav.mobile-open {
    transform: translateX(0);
  }

  /* 모바일 헤더 */
  .sidebar-toggle {
    justify-content: space-between;
    padding: 0 1rem;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
  }

  .sidebar-toggle::after {
    content: '메뉴';
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
  }

  .sidebar-nav .toggle-icon {
    font-size: 1.5rem;
  }

  .sidebar-nav.mobile-open .toggle-icon {
    font-size: 1.5rem;
  }

  .sidebar-nav.mobile-open .toggle-icon::before {
    content: '✕';
  }

  .sidebar-nav.mobile-open .toggle-icon span {
    display: none;
  }

  /* 오버레이 배경 */
  .sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(2px);
  }

  .sidebar-overlay.show {
    display: block;
  }

  body.has-sidebar .dashboard-container,
  body.has-sidebar .page-container,
  body.has-sidebar > .main-content,
  body.has-sidebar .work-report-container,
  body.has-sidebar .analysis-container,
  body.has-sidebar > .dashboard-main {
    margin-left: 0;
  }

  /* 메뉴 아이템 모바일 최적화 */
  .nav-item {
    padding: 1rem 1.25rem;
    font-size: 1rem;
  }

  .nav-category-items .nav-item {
    padding-left: 3rem;
  }

  .nav-category-header {
    padding: 1rem 1.25rem;
    font-size: 0.9rem;
  }

  .nav-icon {
    font-size: 1.5rem;
  }
}

/* 모바일 메뉴 버튼 (헤더용) */
.mobile-menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  cursor: pointer;
  color: white;
  font-size: 1.5rem;
  transition: all 0.2s;
}

.mobile-menu-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 1024px) {
  .mobile-menu-btn {
    display: flex;
  }
}
</style>

<!-- 모바일 오버레이 -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>