Sidebar and tierlist changes

frontend/components/SideBar.vue

@@ -3,7 +3,7 @@ import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon
 
 defineProps<{
     championName: String
-    championLanes: any
+    championLanes?: Array<LaneData>
 }>()
 const emit = defineEmits<{
     stateChange: [state: String, lane: number]
@@ -44,11 +44,13 @@ function handleStateChange(newState : string, newLane: number) {
 .sidebar-container {
     background-color: #2B2826;
     width: 300px;
-    height: 100%;
-    
-    position: absolute;
+    /* height: 100%; */
+    flex-shrink: 0;
+
+    margin: 0px;
+    /* position: absolute;
     top: 0px;
-    left: 0px;
+    left: 0px; */
 }
 .sidebar-link {
     user-select: none;

frontend/components/TierlistTier.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+defineProps<{
+    title: string
+    tier: Array<Champion>
+}>()
+</script>
+
+<template>
+<div style="display: flex; align-items: center;">
+    <h2 class="tierlist-tier-title">{{ title }}</h2>
+    <div class="tierlist-tier-container">
+        <NuxtLink v-for="champion in tier" :to="'/champion/' + champion.alias.toLowerCase()">
+        <div class="champion-img-container">
+        <NuxtImg class="champion-img" :src="CDRAGON_BASE + mapPath(champion.squarePortraitPath)" :alt="champion.name"/>
+        </div>
+        </NuxtLink>
+    </div>
+</div>
+</template>
+
+<style>
+.tierlist-tier-container {
+    width: 90%;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 128px);
+    grid-gap: 10px;
+
+    align-items: center;
+
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.tierlist-tier-title {
+    font-size: 54px;
+    margin-left: 20px;
+    margin-right: 20px;
+    
+    font-weight: 300;
+}
+
+.champion-img-container {
+    overflow: hidden; width: 120px; height: 120px;
+    border: 1px solid var(--color-surface);
+}
+.champion-img-container:hover {
+    border: 1px solid var(--color-on-surface);
+}
+.champion-img {
+    width: 116px;
+    height: 116px;
+    transform: translate(4px, 4px) scale(1.2, 1.2);
+
+    user-select: none;
+}
+</style>