Components refactor (big)

2024-12-05 00:02:31 +01:00
parent 07daa05772
commit 67d6dd5a1a
10 changed files with 73 additions and 54 deletions
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -0,0 +1,81 @@
+<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="sidebar-container">
+        <Logo font-size="2.6rem" img-width="60" style="padding-left: 15px; padding-right: 15px; margin-top: 30px;"/>
+
+        <div v-for="(lane, i) in championLanes">
+
+        <div style="display: flex; align-items: center; margin-top: 30px; padding-right: 10px; overflow: hidden;">
+        <h1 style="font-size: 2.4rem; padding-left: 20px;">{{ championName }}</h1>
+        <img style="margin-left: 10px;" width="40" height="40" :src="LANE_IMAGES[lanePositionToIndex(lane.data)]" />
+        <h2 v-if="championName != null && championName != undefined && championName.length < 8" 
+            style="margin-left: 5px; font-size: 1.8rem; font-weight: 200;">
+            {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
+        </h2>
+        </div>
+
+        <h2 :class="'sidebar-link ' + (state == 'runes' && laneState == i ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('runes', i)" 
+            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Runes</h2>
+        <h2 :class="'sidebar-link ' + (state == 'items' && laneState == i ? 'sidebar-link-selected' : '')" 
+            @click="handleStateChange('items', i)" 
+            style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px;">Items</h2>
+        
+        </div>
+    </div>
+</template>
+
+<style>
+.sidebar-container {
+    background-color: #2B2826;
+    width: 300px;
+    /* height: 100%; */
+    flex-shrink: 0;
+
+    margin: 0px;
+    /* position: absolute;
+    top: 0px;
+    left: 0px; */
+}
+.sidebar-link {
+    user-select: none;
+    margin: 5px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    border-radius: 8px;
+}
+.sidebar-link:hover {
+    cursor: pointer;
+
+    background-color: var(--color-surface-darker);
+}
+.sidebar-link-selected {
+    background-color: var(--color-surface);
+}
+
+@media only screen and (max-width: 1200px) {
+    .sidebar-container {
+        display: none;
+    }
+}
+</style>