Sidebar Sidebar.vue

0% Statements 0/25

100% Branches 1/1

100% Functions 1/1

0% Lines 0/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  <template>
  <aside :class="['sidebar', { open: gameStore.sidebarVisible }]" role="region">
    <Button className="sidebar-close" variant="round" :handleClick="() => gameStore.toggleSidebar(!gameStore.sidebarVisible)" aria-label="Zamknij panel">
      <VIcon name="fa-chevron-down" :class="{ rotated: gameStore.sidebarVisible }" class="arrow-icon" />
    </Button>
 
    <div class="sidebar-container">
      <SidebarLanguageFlags />
 
      <h2 class="sidebar-title">{{ $t('sidebar.title') }}</h2>
 
      <SidebarInfoPanel />
 
      <div class="sidebar-buttons-controls">
        <Button :handleClick="() => $emit('restart')" :name="'sidebar.buttonReplay'" />
        <Button :name="'sidebar.buttonNew'" :handleClick="() => $emit('newGame')" />
      </div>
 
      <SidebarVolumeControl />
 
      <SidebarStatsPanel />
 
      <SidebarMatches />
 
      <SidebarLegentPanel />
 
      <SidebarGameHistory />
 
      <div class="d-block">
        <Button name="sidebar.buttonDevTools" :handleClick="gameStore.toggleDevPanel" variant="secondary" />
      </div>
    </div>
  </aside>
</template>
 
<script setup lang="ts">
import { useGameStore } from '@/stores/useGameStore';
import './Sidebar.scss';
 
const gameStore = useGameStore();
 
defineEmits(['restart', 'newGame']);
</script>