jobs/src/components/SideNav.vue

<script setup>
import { ref, inject } from 'vue';

// Navigation state
const isCollapsed = ref(false);

// Get theme state from parent
const isDarkMode = inject('isDarkMode');
const parentToggleTheme = inject('toggleTheme');

// Get current active section from parent
const activeSection = inject('activeSection');

const toggleNav = () => {
  isCollapsed.value = !isCollapsed.value;
};

const toggleTheme = () => {
  // Call the parent's toggle function with the new value
  parentToggleTheme(!isDarkMode.value);
};

defineEmits(['navigate']);
</script>

<template>
  <aside class="side-nav" :class="{ 'collapsed': isCollapsed }">
    <div class="nav-header">
      <h2 class="nav-title">Jobs</h2>
      <button class="toggle-btn" @click="toggleNav">
        {{ isCollapsed ? '→' : '←' }}
      </button>
    </div>
    
    <div class="theme-toggle" :class="{ 'collapsed-mode': isCollapsed }">
      <button @click="toggleTheme" class="theme-btn">
        <span class="icon">{{ isDarkMode ? '☀️' : '🌙' }}</span>
        <span class="text" v-if="!isCollapsed">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</span>
      </button>
    </div>
    
    <nav class="nav-menu">
      <ul>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'dashboard')" :class="{ 'active': activeSection === 'dashboard' }">
            <span class="icon">📊</span>
            <span class="text" v-if="!isCollapsed">Dashboard</span>
          </a>
        </li>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'jobs')" :class="{ 'active': activeSection === 'jobs' }">
            <span class="icon">💼</span>
            <span class="text" v-if="!isCollapsed">Jobs</span>
          </a>
        </li>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'applications')" :class="{ 'active': activeSection === 'applications' }">
            <span class="icon">📝</span>
            <span class="text" v-if="!isCollapsed">Applications</span>
          </a>
        </li>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'saved')" :class="{ 'active': activeSection === 'saved' }">
            <span class="icon">⭐</span>
            <span class="text" v-if="!isCollapsed">Saved</span>
          </a>
        </li>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'profile')" :class="{ 'active': activeSection === 'profile' }">
            <span class="icon">👤</span>
            <span class="text" v-if="!isCollapsed">Profile</span>
          </a>
        </li>
        <li>
          <a href="#" @click.prevent="$emit('navigate', 'settings')" :class="{ 'active': activeSection === 'settings' }">
            <span class="icon">⚙️</span>
            <span class="text" v-if="!isCollapsed">Settings</span>
          </a>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<style lang="scss" scoped>
.side-nav {
  width: 240px;
  height: 100vh;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  transition: width 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  
  &.collapsed {
    width: 60px;
    
    .nav-title {
      display: none;
    }
  }
  
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    
    .nav-title {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 600;
    }
    
    .toggle-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 1.2rem;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      color: var(--text-color);
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
  }
  
  .theme-toggle {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sidebar-border);
    
    &.collapsed-mode {
      .text {
        display: none;
      }
    }
    
    .theme-btn {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0.5rem;
      background: none;
      border: 1px solid var(--sidebar-border);
      border-radius: 4px;
      color: var(--text-color);
      cursor: pointer;
      transition: background-color 0.2s;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }
      
      .icon {
        margin-right: 0.75rem;
        font-size: 1.2rem;
        width: 1.5rem;
        text-align: center;
      }
    }
  }
  
  .nav-menu {
    padding: 1rem 0;
    flex: 1;
    overflow-y: auto;
    
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    li {
      margin-bottom: 0.25rem;
    }
    
    a {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      color: var(--text-color);
      text-decoration: none;
      transition: background-color 0.2s;
      border-radius: 0 4px 4px 0;
      
      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
        color: var(--primary-color);
      }
      
      &.active {
        background-color: rgba(52, 152, 219, 0.1);
        color: var(--primary-color);
        border-left: 3px solid var(--primary-color);
      }
      
      .icon {
        margin-right: 0.75rem;
        font-size: 1.2rem;
        width: 1.5rem;
        text-align: center;
      }
    }
  }
}


</style>