s5l.ru-crm/app/pages/Admin/index.pug

div(class="admin")
  // Мобильное меню - кнопка бургер
  div(class="admin__mobile-toggle" @click="mobileMenuOpen = !mobileMenuOpen")
    div(class="admin__burger" :class="{'admin__burger--active': mobileMenuOpen}")
      span
      span
      span
  
  // Боковое меню для десктопа и мобильных устройств
  div(
    class="admin__sidebar" 
    :class="{'admin__sidebar--mobile-open': mobileMenuOpen, 'admin__sidebar--collapsed': sidebarCollapsed}"
  )
    div(class="admin__sidebar-header")
      div(class="admin__brand" v-if="!sidebarCollapsed")
        img(
          v-if="currentDomainSettings && currentDomainSettings.logo"
          :src="currentDomainSettings.logo" 
          :alt="currentDomainSettings.companyName || 'Браер-Колор'"
          class="admin__logo"
        )
        span(class="admin__company-name") {{ currentDomainSettings?.companyName || 'Браер-Колор' }}
      div(class="admin__sidebar-toggle" @click="sidebarCollapsed = !sidebarCollapsed")
        div(class="admin__toggle-icon" :class="{'admin__toggle-icon--collapsed': sidebarCollapsed}")
          svg(fill="none" stroke="currentColor" viewBox="0 0 24 24")
            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7")
    
    nav(class="admin__nav")
      div(class="admin__nav-section")
        h3(
          v-if="!sidebarCollapsed" 
          class="admin__nav-section-title"
        ) Основные
        ul(class="admin__nav-list")
          li(
            v-for="item in mainMenuItems"
            :key="item.id"
            class="admin__nav-item"
          )
            a(
              :href="item.path"
              @click.prevent="navigateTo(item.path)"
              :class="getMenuItemClass(item)"
              class="admin__nav-link"
            )
              component(:is="item.icon" class="admin__nav-icon")
              span(
                v-if="!sidebarCollapsed" 
                class="admin__nav-text"
              ) {{ item.name }}
              span(
                v-if="!sidebarCollapsed && item.badge"
                class="admin__nav-badge"
              ) {{ item.badge }}
      
      div(class="admin__nav-section")
        h3(
          v-if="!sidebarCollapsed" 
          class="admin__nav-section-title"
        ) Контент
        ul(class="admin__nav-list")
          li(
            v-for="item in contentMenuItems"
            :key="item.id"
            class="admin__nav-item"
          )
            a(
              :href="item.path"
              @click.prevent="navigateTo(item.path)"
              :class="getMenuItemClass(item)"
              class="admin__nav-link"
            )
              component(:is="item.icon" class="admin__nav-icon")
              span(
                v-if="!sidebarCollapsed" 
                class="admin__nav-text"
              ) {{ item.name }}
      
      div(class="admin__nav-section")
        h3(
          v-if="!sidebarCollapsed" 
          class="admin__nav-section-title"
        ) Система
        ul(class="admin__nav-list")
          li(
            v-for="item in systemMenuItems"
            :key="item.id"
            class="admin__nav-item"
          )
            a(
              :href="item.path"
              @click.prevent="navigateTo(item.path)"
              :class="getMenuItemClass(item)"
              class="admin__nav-link"
            )
              component(:is="item.icon" class="admin__nav-icon")
              span(
                v-if="!sidebarCollapsed" 
                class="admin__nav-text"
              ) {{ item.name }}
    
    div(class="admin__sidebar-footer" v-if="!sidebarCollapsed")
      div(class="admin__user-info")
        div(class="admin__user-avatar") {{ userInitials }}
        div(class="admin__user-details")
          span(class="admin__user-name") {{ user?.name || 'Администратор' }}
          span(class="admin__user-role") {{ user?.role || 'Admin' }}
      button(
        @click="logout"
        class="admin__logout-btn"
      )
        svg(fill="none" stroke="currentColor" viewBox="0 0 24 24")
          path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1")
        span Выйти
  
  // Основной контент
  div(
    class="admin__main" 
    :class="{'admin__main--expanded': sidebarCollapsed, 'admin__main--mobile-open': mobileMenuOpen}"
  )
    div(class="admin__topbar")
      div(class="admin__breadcrumbs")
        span(
          v-for="(breadcrumb, index) in breadcrumbs"
          :key="index"
          class="admin__breadcrumb"
        )
          a(
            v-if="breadcrumb.path && index !== breadcrumbs.length - 1"
            :href="breadcrumb.path"
            @click.prevent="navigateTo(breadcrumb.path)"
            class="admin__breadcrumb-link"
          ) {{ breadcrumb.title }}
          span(v-else class="admin__breadcrumb-current") {{ breadcrumb.title }}
          span(
            v-if="index !== breadcrumbs.length - 1"
            class="admin__breadcrumb-separator"
          ) /
      
      div(class="admin__actions")
        button(
          @click="toggleTheme"
          class="admin__action-btn"
          :title="theme === 'light' ? 'Темная тема' : 'Светлая тема'"
        )
          svg(v-if="theme === 'light'" fill="none" stroke="currentColor" viewBox="0 0 24 24")
            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z")
          svg(v-else fill="none" stroke="currentColor" viewBox="0 0 24 24")
            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z")
        
        button(
          @click="refreshData"
          class="admin__action-btn"
          title="Обновить данные"
        )
          svg(fill="none" stroke="currentColor" viewBox="0 0 24 24")
            path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15")
        
        div(class="admin__notifications")
          button(
            @click="notificationsOpen = !notificationsOpen"
            class="admin__action-btn admin__notifications-btn"
            :class="{'admin__notifications-btn--active': notificationsOpen}"
          )
            svg(fill="none" stroke="currentColor" viewBox="0 0 24 24")
              path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5v-5zM4.5 6.5h15M4.5 12h15")
            span(v-if="unreadNotifications > 0" class="admin__notification-badge") {{ unreadNotifications }}
          
          div(
            v-if="notificationsOpen"
            class="admin__notifications-dropdown"
          )
            div(class="admin__notifications-header")
              h4 Уведомления
              span(class="admin__notifications-count") {{ unreadNotifications }} новых
            div(class="admin__notifications-list")
              div(
                v-for="notification in notifications"
                :key="notification.id"
                class="admin__notification-item"
                :class="{'admin__notification-item--unread': !notification.read}"
              )
                div(class="admin__notification-icon")
                  component(:is="notification.icon")
                div(class="admin__notification-content")
                  p(class="admin__notification-title") {{ notification.title }}
                  span(class="admin__notification-time") {{ notification.time }}
                button(
                  @click="markAsRead(notification.id)"
                  class="admin__notification-action"
                ) ×
    
    div(class="admin__content")
      router-view
  
  // Оверлей для мобильного меню
  div(
    v-if="mobileMenuOpen"
    class="admin__overlay"
    @click="mobileMenuOpen = false"
  )