# Sidebars

The Monetarie NPC Backoffice features two sidebar components that provide navigation and contextual information. This guide covers the Left Sidebar for navigation and the Right Panel for feeds and notifications.

## Overview

```
┌─────────────────────────────────────────────────────────────┐
│                         TopBar                               │
├────────────┬────────────────────────────────┬───────────────┤
│            │                                │               │
│   LEFT     │        Main Content            │    RIGHT      │
│  SIDEBAR   │                                │    PANEL      │
│            │                                │               │
│ Navigation │                                │ Information   │
│  - Accounts│                                │  - RSS Feed   │
│  - Settings│                                │  - Notifica-  │
│            │                                │    tions      │
│            │                                │               │
│ [Collapse] │                                │  [Collapse]   │
└────────────┴────────────────────────────────┴───────────────┘
```

## Left Sidebar

The Left Sidebar (`src/shared/components/LeftSidebar.vue`) provides the main navigation.

### Features

- **Collapsible** - Can be collapsed to a rail mode (icons only)
- **Grouped Navigation** - Items organized by category
- **Active State** - Highlights current route
- **Tooltips** - Shows labels when collapsed
- **Persistent State** - Collapse state saved to localStorage

### Structure

```vue
<template>
  <v-navigation-drawer
    v-model="drawer"
    :rail="sidebarStore.leftCollapsed"
    :rail-width="72"
    permanent
    class="left-sidebar"
  >
    <!-- Navigation Groups -->
    <div class="nav-section">
      <div class="nav-group">
        <div class="nav-label">{{ t('sidebar.accounts') }}</div>
        <v-list density="compact" nav>
          <v-list-item
            v-for="item in accountsMenu"
            :key="item.route"
            :to="item.route"
          >
            <!-- ... -->
          </v-list-item>
        </v-list>
      </div>
    </div>

    <!-- Collapse Button -->
    <template #append>
      <v-btn @click="sidebarStore.toggleLeft">
        <v-icon>{{ sidebarStore.leftCollapsed ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
      </v-btn>
    </template>
  </v-navigation-drawer>
</template>
```

### Navigation Menu Configuration

```typescript
const accountsMenu = computed(() => [
  {
    title: t('sidebar.accountsCreate'),
    icon: 'mdi-plus-circle-outline',
    route: '/accounts/create',
    color: 'green'
  },
  {
    title: t('sidebar.accountsEdit'),
    icon: 'mdi-pencil-outline',
    route: '/accounts/edit',
    color: 'blue'
  },
  {
    title: t('sidebar.accountsClose'),
    icon: 'mdi-close-circle-outline',
    route: '/accounts/close',
    color: 'red'
  }
])

const settingsMenu = computed(() => [
  { title: 'SPB', icon: 'mdi-bank-outline', route: '/settings/spb', color: 'indigo' },
  { title: 'SPI', icon: 'mdi-flash-outline', route: '/settings/spi', color: 'amber' },
  { title: 'STA', icon: 'mdi-file-sync-outline', route: '/settings/sta', color: 'teal' },
  { title: 'Nuclea', icon: 'mdi-atom', route: '/settings/nuclea', color: 'purple' },
  { title: 'SISBAJUD', icon: 'mdi-gavel', route: '/settings/sisbajud', color: 'deep-orange' },
  { title: t('sidebar.users'), icon: 'mdi-account-group-outline', route: '/settings/users', color: 'cyan' }
])
```

### Icon Styling

Each navigation item has a color-coded icon wrapper:

```css
.nav-icon-wrapper {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  transition: all 0.2s ease;
}

.nav-icon-wrapper.green { background: #e8f5e9; color: #4caf50; }
.nav-icon-wrapper.blue { background: #e3f2fd; color: #2196f3; }
.nav-icon-wrapper.red { background: #ffebee; color: #f44336; }
/* ... more colors */
```

### Active State

Active routes get a gradient background:

```css
.nav-icon-wrapper.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
```

## Right Panel

The Right Panel (`src/shared/components/RightPanel.vue`) displays contextual information.

### Features

- **RSS Feed** - Latest news from financial sources
- **Notifications** - Pending items requiring attention
- **Priority Indicators** - Visual priority levels
- **Collapsible** - Can be hidden to maximize content area
- **Mobile Responsive** - Temporary drawer on mobile

### Structure

```vue
<template>
  <v-navigation-drawer
    location="right"
    :width="300"
    :permanent="!mobile"
    :temporary="mobile"
    :model-value="!sidebarStore.rightCollapsed"
    class="right-panel"
  >
    <!-- RSS Feed Section -->
    <div class="panel-section">
      <div class="section-header">
        <div class="section-icon rss">
          <v-icon>mdi-rss</v-icon>
        </div>
        <span>{{ t('rightPanel.rssFeed') }}</span>
      </div>
      <div class="feed-list">
        <div v-for="item in dashboardStore.rssFeed" :key="item.id" class="feed-item">
          <!-- Feed item content -->
        </div>
      </div>
    </div>

    <!-- Notifications Section -->
    <div class="panel-section">
      <div class="section-header">
        <div class="section-icon notifications">
          <v-icon>mdi-bell-outline</v-icon>
        </div>
        <span>{{ t('rightPanel.pendingNotifications') }}</span>
        <v-chip v-if="notificationsStore.unreadCount > 0" color="error">
          {{ notificationsStore.unreadCount }}
        </v-chip>
      </div>
      <div class="notifications-list">
        <!-- Notification items -->
      </div>
    </div>
  </v-navigation-drawer>
</template>
```

### RSS Feed Items

```vue
<div class="feed-item" @click="openLink(item.url)">
  <div class="feed-content">
    <div class="feed-title">{{ item.title }}</div>
    <div class="feed-meta">
      <span class="feed-source">{{ item.source }}</span>
      <span class="feed-dot">.</span>
      <span class="feed-date">{{ formatDate(item.date) }}</span>
    </div>
  </div>
  <v-icon>mdi-chevron-right</v-icon>
</div>
```

### Notification Priority Styling

```css
.notification-item.high {
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border-left: 3px solid #f44336;
}

.notification-item.medium {
  background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
  border-left: 3px solid #ff9800;
}

.notification-item.low {
  border-left: 3px solid #9e9e9e;
}
```

### Priority Animation

High priority notifications have a pulsing animation:

```css
.notification-indicator.high {
  background: #f44336;
  box-shadow: 0 0 8px rgba(244, 67, 54, 0.5);
  animation: pulse-high 2s infinite;
}

@keyframes pulse-high {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
  }
}
```

## Sidebar Store

The `useSidebarStore` manages sidebar state:

```typescript
// src/stores/sidebar.ts
export const useSidebarStore = defineStore('sidebar', () => {
  const leftCollapsed = ref(localStorage.getItem('leftSidebarCollapsed') === 'true')
  const rightCollapsed = ref(localStorage.getItem('rightSidebarCollapsed') === 'true')

  function toggleLeft() {
    leftCollapsed.value = !leftCollapsed.value
    localStorage.setItem('leftSidebarCollapsed', String(leftCollapsed.value))
  }

  function toggleRight() {
    rightCollapsed.value = !rightCollapsed.value
    localStorage.setItem('rightSidebarCollapsed', String(rightCollapsed.value))
  }

  function setLeft(collapsed: boolean) {
    leftCollapsed.value = collapsed
    localStorage.setItem('leftSidebarCollapsed', String(collapsed))
  }

  function setRight(collapsed: boolean) {
    rightCollapsed.value = collapsed
    localStorage.setItem('rightSidebarCollapsed', String(collapsed))
  }

  return {
    leftCollapsed,
    rightCollapsed,
    toggleLeft,
    toggleRight,
    setLeft,
    setRight
  }
})
```

## Using Sidebars in Your Layout

```vue
<!-- src/layouts/AppLayout.vue -->
<template>
  <v-app>
    <TopBar />
    <LeftSidebar />

    <v-main>
      <v-container fluid>
        <router-view />
      </v-container>
    </v-main>

    <RightPanel />
    <SerenaChat />
  </v-app>
</template>

<script setup lang="ts">
import TopBar from '@/shared/components/TopBar.vue'
import LeftSidebar from '@/shared/components/LeftSidebar.vue'
import RightPanel from '@/shared/components/RightPanel.vue'
import SerenaChat from '@/features/serena/components/SerenaChat.vue'
</script>
```

## Customization

### Adding New Navigation Items

1. Add the route in `router/index.ts`:

```typescript
{
  path: '/new-feature',
  name: 'new-feature',
  component: () => import('@/features/new/views/NewView.vue'),
  meta: { requiresAuth: true }
}
```

2. Add the menu item in `LeftSidebar.vue`:

```typescript
const customMenu = computed(() => [
  {
    title: 'New Feature',
    icon: 'mdi-star',
    route: '/new-feature',
    color: 'orange'
  }
])
```

### Adding New Right Panel Sections

```vue
<div class="panel-section">
  <div class="section-header">
    <div class="section-icon custom">
      <v-icon>mdi-chart-line</v-icon>
    </div>
    <span>Custom Section</span>
  </div>
  <div class="custom-content">
    <!-- Your content -->
  </div>
</div>
```

## Related Documentation

- [Dashboard](/guide/dashboard) - Main content area
- [Pinia Stores](/api/stores) - State management for sidebars
- [Authentication](/guide/authentication) - Protected routes