Refactor NavBar

frontend/components/nav/Bar.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+defineProps<{
+    championName?: string
+    championLanes?: Array<LaneData>
+}>()
+const emit = defineEmits<{
+    stateChange: [state: string, lane: number]
+}>()
+
+</script>
+
+<template>
+    <NavSideBar :champion-name="championName" 
+        :champion-lanes="championLanes" 
+        @state-change="(s, l) => emit('stateChange', s, l)"/>
+    <NavBottomBar :champion-name="championName" 
+        :champion-lanes="championLanes" 
+        @state-change="(s, l) => emit('stateChange', s, l)"/>
+</template>

frontend/components/nav/BottomBar.vue

@@ -2,7 +2,7 @@
 import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
 
 defineProps<{
-    championName: string
+    championName?: string
     championLanes?: Array<LaneData>
 }>()
 const emit = defineEmits<{

frontend/components/nav/SideBar.vue

@@ -20,6 +20,9 @@ function handleStateChange(newState : string, newLane: number) {
 </script>
 
 <template>
+    <!-- To make content have a 300px margin -->
+    <div class="sidebar-margin" />
+
     <div class="sidebar-container">
         <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
 
@@ -49,13 +52,16 @@ function handleStateChange(newState : string, newLane: number) {
 .sidebar-container {
     background-color: #2B2826;
     width: 300px;
-    /* height: 100%; */
-    flex-shrink: 0;
 
-    margin: 0px;
+    position: fixed;
-    /* position: absolute;
+    top: 0;
-    top: 0px;
+    left: 0;
-    left: 0px; */
+    height: 100%;
+    z-index: 10;
+}
+.sidebar-margin {
+    width: 300px; 
+    flex-shrink: 0;
 }
 .sidebar-link {
     user-select: none;
@@ -77,5 +83,8 @@ function handleStateChange(newState : string, newLane: number) {
     .sidebar-container {
         display: none;
     }
+    .sidebar-margin {
+        display: none;
+    }
 }
 </style>

frontend/pages/champion/[alias].vue

@@ -28,13 +28,9 @@ function updateState(newState : string, newLane : number) {
         <Title>{{ championData.name }}</Title>
     </Head>
 
-    <NavBottomBar :champion-name="championData.name" 
-        :champion-lanes="championData.lanes" 
-        @state-change="updateState"/>
-
     <div id="alias-content-wrapper">
 
-    <NavSideBar :champion-name="championData.name" 
+    <NavBar :champion-name="championData.name" 
         :champion-lanes="championData.lanes" 
         @state-change="updateState"/>