From 45fa841f80d1421f0bec665cef773cdea56dbf90 Mon Sep 17 00:00:00 2001
From: Valentin Haudiquet <valentin.haudiquet@canonical.com>
Date: Sat, 28 Feb 2026 13:44:27 +0100
Subject: [PATCH] frontend: make sidebar smaller

---
 frontend/components/nav/SideBar.vue | 44 ++++++++++++++---------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/frontend/components/nav/SideBar.vue b/frontend/components/nav/SideBar.vue
index df7cc96..a34f765 100644
--- a/frontend/components/nav/SideBar.vue
+++ b/frontend/components/nav/SideBar.vue
@@ -39,9 +39,9 @@ if (route.path.startsWith('/tierlist/')) {
 
   <div class="sidebar-container">
     <Logo
-      font-size="2.6rem"
-      img-width="60"
-      style="padding-left: 15px; padding-right: 15px; margin-top: 30px"
+      font-size="2rem"
+      img-width="45"
+      style="padding-left: 10px; padding-right: 10px; margin-top: 20px"
     />
 
     <div v-for="(lane, i) in championLanes" :key="i">
@@ -49,22 +49,22 @@ if (route.path.startsWith('/tierlist/')) {
         style="
           display: flex;
           align-items: center;
-          margin-top: 30px;
+          margin-top: 20px;
           padding-right: 10px;
           overflow: hidden;
         "
       >
-        <h1 style="font-size: 2.4rem; padding-left: 20px">{{ championName }}</h1>
+        <h1 style="font-size: 1.8rem; padding-left: 15px">{{ championName }}</h1>
         <NuxtImg
           format="webp"
-          style="margin-left: 10px"
-          width="40"
-          height="40"
+          style="margin-left: 8px"
+          width="30"
+          height="30"
           :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"
+          style="margin-left: 5px; font-size: 1.4rem; font-weight: 200"
         >
           {{ POSITIONS_STR[lanePositionToIndex(lane.data.toLowerCase())] }}
         </h2>
@@ -74,7 +74,7 @@ if (route.path.startsWith('/tierlist/')) {
         :class="
           'sidebar-link ' + (state == 'build' && laneState == i ? 'sidebar-link-selected' : '')
         "
-        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
         @click="handleStateChange('build', i)"
       >
         Build
@@ -85,7 +85,7 @@ if (route.path.startsWith('/tierlist/')) {
           'sidebar-link ' +
           (state == 'alternatives' && laneState == i ? 'sidebar-link-selected' : '')
         "
-        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
         @click="handleStateChange('alternatives', i)"
       >
         Alternatives
@@ -94,15 +94,15 @@ if (route.path.startsWith('/tierlist/')) {
         :class="
           'sidebar-link ' + (state == 'matchups' && laneState == i ? 'sidebar-link-selected' : '')
         "
-        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        style="margin-top: 8px; font-size: 1.5rem; padding-left: 25px"
         @click="handleStateChange('matchups', i)"
       >
         Matchups
       </h2>
     </div>
 
-    <div v-if="tierlistList == true" style="margin-top: 30px">
-      <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px">Tierlist</h2>
+    <div v-if="tierlistList == true" style="margin-top: 20px">
+      <h2 style="padding-left: 15px; font-size: 1.8rem; margin-bottom: 8px">Tierlist</h2>
       <NuxtLink
         v-for="(pos, i) in POSITIONS"
         :key="i"
@@ -112,16 +112,16 @@ if (route.path.startsWith('/tierlist/')) {
         <div
           :class="selected == pos ? 'sidebar-link-selected' : ''"
           class="sidebar-link"
-          style="padding-left: 35px; display: flex; align-items: center"
+          style="padding-left: 25px; display: flex; align-items: center"
         >
           <NuxtImg
             format="webp"
-            width="40"
-            height="40"
+            width="30"
+            height="30"
             :src="LANE_IMAGES[i]"
             :alt="POSITIONS_STR[i]"
           />
-          <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px">
+          <h3 style="font-size: 1.6rem; font-weight: 200; margin-left: 8px">
             {{ POSITIONS_STR[i] }}
           </h3>
         </div>
@@ -130,14 +130,14 @@ if (route.path.startsWith('/tierlist/')) {
 
     <div style="position: absolute; bottom: 0; margin-bottom: 10px; padding-left: 10px">
       <template v-if="stats">
-        <h3 style="font-size: 23px; font-weight: 200">Patch {{ stats.patch }}</h3>
-        <h3 style="font-size: 23px; font-weight: 200">{{ stats.count }} games</h3>
+        <h3 style="font-size: 18px; font-weight: 200">Patch {{ stats.patch }}</h3>
+        <h3 style="font-size: 18px; font-weight: 200">{{ stats.count }} games</h3>
       </template>
       <template v-else>
-        <h3 style="font-size: 23px; font-weight: 200; opacity: 0.5">Loading stats...</h3>
+        <h3 style="font-size: 18px; font-weight: 200; opacity: 0.5">Loading stats...</h3>
       </template>
       <NuxtLink to="/about"><h3>About</h3></NuxtLink>
-      <h2 style="font-size: 12px; font-weight: 200; margin-top: 5px">
+      <h2 style="font-size: 10px; font-weight: 200; margin-top: 3px">
         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,