SideBar on index page :)

frontend/components/nav/SideBar.vue

@@ -18,6 +18,9 @@ function handleStateChange(newState : string, newLane: number) {
     laneState.value = newLane;
     emit('stateChange', newState, newLane)
 }
+
+const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
+
 </script>
 
 <template>
@@ -48,6 +51,20 @@ function handleStateChange(newState : string, newLane: number) {
         </div>
 
         <NavTierlistList v-if="tierlistList == true" style="margin-top: 30px;" />
+
+        <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px;">
+            <h3 style="font-size: 23px; font-weight: 200;">
+                Patch {{ stats.patch }}
+            </h3>
+            <h3 style="font-size: 23px; font-weight: 200;">
+                {{ stats.count }} games
+            </h3>
+            <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px;">
+                BuildPath isn't endorsed by Riot Games and doesn't reflect the views or opinions of 
+                Riot Games or anyone officially involved in producing or managing Riot Games properties.
+                Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.
+            </h2>
+        </div>
     </div>
 </template>
 

frontend/pages/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon';
 
-const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
 </script>
 
 <template>
@@ -9,27 +8,8 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
         <Title>Home</Title>
     </Head>
 
-    <Logo id="index-logo"/>
-
     <div class="index-main-content">
-
+    <NavSideBar :tierlist-list="true" />
-    <div class="index-tierlist-info-container">
-        <div id="index-tierlists">
-        <h2 style="font-size: 3.4rem; margin-bottom: 10px;">Tierlist</h2>
-            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
-            <div style="display: flex; align-items: center;">
-                <img width="40" height="40" :src="LANE_IMAGES[i]" />
-                <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
-            </div>
-            </NuxtLink>
-        </div>
-        <div style="margin: auto; margin-left: 50px; margin-top: 50px; width: fit-content; max-width: 300px;">
-            <h3 id="index-statp" style="font-size: 30px; font-weight: 200;">
-                BuildPath analyzed {{ stats.count }} games from challenger players on patch {{ stats.patch }}
-            </h3>
-            
-        </div>
-    </div>
     
     <ChampionSelector class="index-champion-selector"/>
 
@@ -37,14 +17,9 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
 </template>
 
 <style>
-#index-logo {
-    margin: auto; 
-    margin-top: 64px; 
-    margin-bottom: 64px;
-}
 .index-main-content {
     display: flex; 
-    margin-top: 104px;
+    margin-top: 50px;
 }
 .index-champion-selector {
     width: 80%;
@@ -74,10 +49,6 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
 }
 
 @media only screen and (max-width: 500px) {
-    #index-logo {
-        margin-top: 10px;
-        margin-bottom: 10px;
-    }
     #index-statp {
         display: none;
     }