BottomBar for mobile navigation to tierlists

frontend/components/nav/Bar.vue

@@ -17,5 +17,6 @@ const emit = defineEmits<{
         @state-change="(s, l) => emit('stateChange', s, l)"/>
     <LazyNavBottomBar :champion-name="championName" 
         :champion-lanes="championLanes" 
+        :tierlist-list="tierlistList"
         @state-change="(s, l) => emit('stateChange', s, l)"/>
 </template>

frontend/components/nav/BottomBar.vue

@@ -4,6 +4,7 @@ import { LANE_IMAGES, lanePositionToIndex, POSITIONS_STR } from '~/utils/cdragon
 defineProps<{
     championName?: string
     championLanes?: Array<LaneData>
+    tierlistList?: boolean
 }>()
 const emit = defineEmits<{
     stateChange: [state: string, lane: number]
@@ -17,6 +18,13 @@ function handleStateChange(newState : string, newLane: number) {
     laneState.value = newLane;
     emit('stateChange', newState, newLane)
 }
+
+const route = useRoute()
+const selected = ref("");
+if(route.path.startsWith("/tierlist/")) {
+    const lane = route.params.lane as string
+    selected.value = lane
+}
 </script>
 
 <template>
@@ -41,6 +49,20 @@ function handleStateChange(newState : string, newLane: number) {
             </h2>
             </div>
         </div>
+
+        <div v-if="tierlistList == true" style="padding-left: 20px;">
+            <h2 style="padding-left: 0px; font-size: 1.4rem; margin-top: 15px;">Tierlist</h2>
+            <div style="display: flex;">
+            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
+                <div :class="selected == pos ? 'navbar-link-selected' : ''" 
+                    class="navbar-link" style="display: flex; align-items: center;">
+                    <NuxtImg format="webp" 
+                        width="30" height="30" 
+                        :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
+                </div>
+            </NuxtLink>
+            </div>
+        </div>
     </div>
 </template>
 

frontend/components/nav/SideBar.vue

@@ -21,6 +21,13 @@ function handleStateChange(newState : string, newLane: number) {
 
 const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
 
+const route = useRoute()
+
+const selected = ref("");
+if(route.path.startsWith("/tierlist/")) {
+    const lane = route.params.lane as string
+    selected.value = lane
+}
 </script>
 
 <template>
@@ -56,8 +63,19 @@ const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetc
         
         </div>
 
-        <NavTierlistList v-if="tierlistList == true" style="margin-top: 30px;" />
+        <div v-if="tierlistList == true" style="margin-top: 30px;">
-
+            <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
+            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
+                <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
+                    class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
+                    <NuxtImg format="webp" 
+                        width="40" height="40" 
+                        :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
+                    <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
+                </div>
+            </NuxtLink>
+        </div>        
+    
         <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px;">
             <h3 style="font-size: 23px; font-weight: 200;">
                 Patch {{ stats.patch }}

frontend/components/nav/TierlistList.vue

@@ -1,24 +0,0 @@
-<script lang="ts" setup>
-const route = useRoute()
-
-const selected = ref("");
-if(route.path.startsWith("/tierlist/")) {
-    const lane = route.params.lane as string
-    selected.value = lane
-}
-</script>
-
-<template>
-<div>
-    <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
-    <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
-        <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
-            class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
-            <NuxtImg format="webp" 
-                width="40" height="40" 
-                :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
-            <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
-        </div>
-    </NuxtLink>
-</div>
-</template>

frontend/pages/index.vue

@@ -9,7 +9,7 @@ import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon';
     </Head>
 
     <div class="index-main-content">
-    <NavSideBar :tierlist-list="true" />
+    <NavBar :tierlist-list="true" />
     
     <ChampionSelector class="index-champion-selector"/>
 

frontend/pages/tierlist/[lane].vue

@@ -62,7 +62,7 @@ tiers.push({title: "F", data: tierFromScaledPickrate(0, 0.1)})
     </Head>
 
     <div style="display: flex; min-height: 100vh; align-items: stretch;  width: 100%;">
-        <NavSideBar :tierlist-list="true" />
+        <NavBar :tierlist-list="true" />
 
         <div style="margin-left: 10px; width: 100%; overflow-y: scroll;">