Huge changes: Sidebar, new UI

frontend/pages/champion/[alias].vue

@@ -4,6 +4,8 @@ const championAlias = route.params.alias
 
 const { data : championData } = await useFetch("/api/champion/" + championAlias.toLowerCase())
 const championId = championData.value.id
+
+const state = ref("runes")
 </script>
 
 <template>
@@ -11,14 +13,17 @@ const championId = championData.value.id
         <Title>{{ championData.name }} - BuildPath</Title>
     </Head>
 
-    <div style="display: flex; width: fit-content; margin: auto;">
-    <div style="margin-top: 64px;">
+    <SideBar :champion-name="championData.name" @state-change="(newState) => state = newState"/>
+
+    <!-- <div style="display: flex; width: fit-content; margin: auto; margin-left: 330px;"> -->
+    <div style="margin-top: 64px; margin-left: 339px;">
         <ChampionTitle :champion-id="championId" :winrate="championData.winrate" :pickrate="championData.pickrate" :game-count="championData.gameCount" />
-        <RuneSelector v-if="championData.gameCount > 0" style="margin-top: 20px;" :runes="championData.runes" />
-        <h2 style="margin: auto; margin-top: 20px; width: fit-content;" v-if="championData.gameCount == 0">Sorry, there is no data for this champion :(</h2>
-    </div>
-    <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" />
+        <RuneSelector v-if="state == 'runes' && championData.gameCount > 0" style="margin: auto; margin-top: 40px;" :runes="championData.runes" />
+        <ItemViewer v-if="state == 'items' && championData.gameCount > 0" style="margin:auto; margin-top: 40px;" :builds="championData.builds" />
+        <h2 v-if="championData.gameCount == 0" style="margin: auto; margin-top: 20px; width: fit-content;">Sorry, there is no data for this champion :(</h2>
     </div>
+    <!-- <ItemViewer v-if="championData.gameCount > 0" style="margin-top: 64px; margin-left: 64px;" :builds="championData.builds" /> -->
+    <!-- </div> -->
 </template>
 
 <style>