Components refactor (big)

frontend/components/nav/BottomBar.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon';
+
+defineProps<{
+    championName: string
+    championLanes?: Array<LaneData>
+}>()
+const emit = defineEmits<{
+    stateChange: [state: string, lane: number]
+}>()
+
+const state = ref("runes")
+const laneState = ref(0)
+
+function handleStateChange(newState : string, newLane: number) {
+    state.value = newState;
+    laneState.value = newLane;
+    emit('stateChange', newState, newLane)
+}
+</script>
+
+<template>
+    <div class="navbar-container">
+        
+        <NuxtLink style="display: flex; width: fit-content; text-decoration: none; align-items: center; margin-left: 10px;" to="/">
+        <img id="navbar-logo-img" src="/buildpath-high-resolution-logo-transparent.png" />
+        </NuxtLink>
+
+        <div v-for="(lane, i) in championLanes" style="display: flex; align-items: center; margin-left: 20px;">
+            <img width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+            <div>
+            <h2 :class="'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')"
+                @click="handleStateChange('runes', i)" >
+                Runes
+            </h2>
+            <h2 :class="'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')"
+                @click="handleStateChange('items', i)" >
+                Items
+            </h2>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+.navbar-container {
+    display: flex;
+
+    position: fixed;
+    bottom: 0;
+    z-index: 10;
+
+    background-color: #2B2826;
+    width: 100%;
+    height: 100px;
+
+    margin: 0px;
+}
+.navbar-link {
+    user-select: none;
+    margin: 5px;
+    padding: 5px;
+    border-radius: 8px;
+}
+.navbar-link:hover {
+    cursor: pointer;
+    background-color: var(--color-surface-darker);
+}
+.navbar-link-selected {
+    background-color: var(--color-surface);
+}
+#navbar-logo-img {
+    height: 70px;
+    width: fit-content;
+    max-width: 55px;
+}
+
+@media only screen and (min-width: 1200px) {
+    .navbar-container {
+        display: none;
+    }
+}
+</style>