Matchups: implemented matchups

frontend/components/nav/BottomBar.vue

@@ -29,17 +29,7 @@ if (route.path.startsWith('/tierlist/')) {
 
 <template>
   <div class="navbar-container">
-    <NuxtLink
-      style="
-        display: flex;
-        width: fit-content;
-        text-decoration: none;
-        align-items: center;
-        margin-left: 10px;
-      "
-      to="/"
-      prefetch
-    >
+    <NuxtLink class="logo-link" to="/" prefetch>
       <NuxtImg
         id="navbar-logo-img"
         format="webp"
@@ -47,60 +37,65 @@ if (route.path.startsWith('/tierlist/')) {
       />
     </NuxtLink>
 
-    <div
-      v-for="(lane, i) in championLanes"
-      :key="i"
-      style="display: flex; align-items: center; margin-left: 20px"
-    >
-      <NuxtImg
-        format="webp"
-        width="40"
-        height="40"
-        :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
-      />
-      <div>
-        <h2
-          :class="
-            'navbar-link ' + (state == 'runes' && laneState == i ? 'navbar-link-selected' : '')
-          "
-          @click="handleStateChange('runes', i)"
-        >
-          Runes
-        </h2>
-        <h2
-          :class="
-            'navbar-link ' + (state == 'items' && laneState == i ? 'navbar-link-selected' : '')
-          "
-          @click="handleStateChange('items', i)"
-        >
-          Items
-        </h2>
+    <div class="nav-scroll-container">
+      <div v-for="(lane, i) in championLanes" :key="i" class="lane-section">
+        <div class="nav-links-with-icon">
+          <NuxtImg
+            class="lane-icon"
+            format="webp"
+            width="24"
+            height="24"
+            :src="LANE_IMAGES[lanePositionToIndex(lane.data)]"
+          />
+          <div class="nav-buttons">
+            <button
+              :class="['nav-button', { active: state == 'runes' && laneState == i }]"
+              @click="handleStateChange('runes', i)"
+            >
+              Runes
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'items' && laneState == i }]"
+              @click="handleStateChange('items', i)"
+            >
+              Items
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'alternatives' && laneState == i }]"
+              @click="handleStateChange('alternatives', i)"
+            >
+              Alt
+            </button>
+            <button
+              :class="['nav-button', { active: state == 'matchups' && laneState == i }]"
+              @click="handleStateChange('matchups', i)"
+            >
+              Matchups
+            </button>
+          </div>
+        </div>
       </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
-          v-for="(pos, i) in POSITIONS"
-          :key="i"
-          style="margin-top: 5px; margin-bottom: 5px"
-          :to="'/tierlist/' + pos"
-        >
-          <div
-            :class="selected == pos ? 'navbar-link-selected' : ''"
-            class="navbar-link"
-            style="display: flex; align-items: center"
+      <div v-if="tierlistList == true" class="tierlist-section">
+        <h3 class="tierlist-title">Tierlist</h3>
+        <div class="tierlist-icons">
+          <NuxtLink
+            v-for="(pos, i) in POSITIONS"
+            :key="i"
+            :to="'/tierlist/' + pos"
+            class="tierlist-icon-link"
           >
             <NuxtImg
+              class="tierlist-icon"
               format="webp"
-              width="30"
-              height="30"
+              width="24"
+              height="24"
               :src="LANE_IMAGES[i]"
               :alt="POSITIONS_STR[i]"
+              :class="{ active: selected == pos }"
             />
-          </div>
-        </NuxtLink>
+          </NuxtLink>
+        </div>
       </div>
     </div>
   </div>
@@ -109,6 +104,7 @@ if (route.path.startsWith('/tierlist/')) {
 <style>
 .navbar-container {
   display: flex;
+  align-items: center;
 
   position: fixed;
   bottom: 0;
@@ -116,27 +112,121 @@ if (route.path.startsWith('/tierlist/')) {
 
   background-color: #2b2826;
   width: 100%;
-  height: 100px;
+  height: 90px;
+  padding: 0 10px;
 
   margin: 0px;
+  box-sizing: border-box;
 }
-.navbar-link {
-  user-select: none;
-  margin: 5px;
-  padding: 5px;
-  border-radius: 8px;
+
+.nav-scroll-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  overflow-x: auto;
+  flex: 1;
+  padding-left: 10px;
+  scrollbar-width: none; /* Firefox */
 }
-.navbar-link:hover {
+
+.nav-scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}
+
+.lane-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 90px;
+  flex-shrink: 0;
+}
+
+.nav-links-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.lane-icon {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.nav-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.nav-button {
+  background: none;
+  border: none;
+  color: var(--color-on-surface);
+  font-size: 11px;
+  padding: 3px 6px;
+  border-radius: 5px;
   cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.2s ease;
+  font-weight: 500;
+}
+
+.nav-button:hover {
   background-color: var(--color-surface-darker);
 }
-.navbar-link-selected {
+
+.nav-button.active {
   background-color: var(--color-surface);
+  color: var(--color-on-surface);
 }
+
+.tierlist-section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  min-width: 120px;
+  flex-shrink: 0;
+}
+
+.tierlist-title {
+  font-size: 1.4rem;
+  margin: 0;
+  padding: 0;
+  color: var(--color-on-surface);
+  font-weight: 500;
+}
+
+.tierlist-icons {
+  display: flex;
+  gap: 6px;
+}
+
+.tierlist-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.tierlist-icon.active {
+  background-color: var(--color-surface);
+  border-radius: 4px;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
 #navbar-logo-img {
-  height: 70px;
-  width: fit-content;
-  max-width: 55px;
+  height: 40px;
+  width: auto;
+  max-width: 32px;
 }
 
 @media only screen and (min-width: 1200px) {

frontend/components/nav/SideBar.vue

@@ -99,6 +99,15 @@ if (route.path.startsWith('/tierlist/')) {
       >
         Alternatives
       </h2>
+      <h2
+        :class="
+          'sidebar-link ' + (state == 'matchups' && laneState == i ? 'sidebar-link-selected' : '')
+        "
+        style="margin-top: 10px; font-size: 1.9rem; padding-left: 35px"
+        @click="handleStateChange('matchups', i)"
+      >
+        Matchups
+      </h2>
     </div>
 
     <div v-if="tierlistList == true" style="margin-top: 30px">