Add anilist auth button

src/auth/anilist.js

@@ -0,0 +1,6 @@
+const client_id = '8337'
+const redirect_uri = encodeURIComponent('https://anilist.co/api/v2/oauth/pin')
+const response_type = 'token'
+const href = `https://anilist.co/api/v2/oauth/authorize?client_id=${client_id}&response_type=${response_type}`
+
+export default href;

src/components/Content.vue

@@ -36,7 +36,7 @@ export default {
     this.fetchAnime();
   },
   components: {
-    Card
+    Card,
   }
 }
 

src/components/Sidebar.vue

@@ -1,12 +1,13 @@
 <script setup>
 import SidebarIcon from "./SidebarIcon.vue";
+import href from "../auth/anilist"
 </script>
 
 <template>
   <div class="fixed top-0 left-0
   m-0 h-screen bg-slate-900 
   text-white shadow-lg w-16 flex flex-col">
-    <SidebarIcon icon="fire" text="Fire"></SidebarIcon>
+    <SidebarIcon icon="right-to-bracket" text="Login" :href="href" newtab="true" ></SidebarIcon>
     <SidebarIcon icon="plus" text="Plus"></SidebarIcon>
     <SidebarIcon icon="poo" text="Poo"></SidebarIcon>
   </div>

src/components/SidebarIcon.vue

@@ -1,15 +1,23 @@
 <script setup>
 const props = defineProps({
   icon: String,
-  text: String
+  text: String,
+  href: String,
+  newtab: Boolean,
 })
 </script>
 
 <template>
-  <i class="sidebar-icon group">
+  <a v-if="newtab" :href="href" class="sidebar-icon group" target="_blank">
     <font-awesome-icon :icon="['fas', icon]" />
     <span class="sidebar-tooltip group-hover:scale-100">
       {{ text }}
     </span>
-  </i>
+  </a>
+  <a v-else :href="href" class="sidebar-icon group">
+    <font-awesome-icon :icon="['fas', icon]" />
+    <span class="sidebar-tooltip group-hover:scale-100">
+      {{ text }}
+    </span>
+  </a>
 </template>

src/index.css

@@ -19,4 +19,9 @@
     transition-all duration-100 scale-0 origin-left;
   }
 
+  .button {
+    @apply shadow-md p-2 rounded-full bg-blue-500 text-white 
+    hover:shadow-blue-500 shadow-blue-200 transition-shadow;
+  }
+
 }

src/main.js

@@ -8,8 +8,9 @@ import { far } from '@fortawesome/free-regular-svg-icons';
 library.add(far);
 import { dom } from "@fortawesome/fontawesome-svg-core";
 dom.watch();
-import { faFire, faPlus, faPoo } from "@fortawesome/free-solid-svg-icons";
+import { faFire, faPlus, faPoo, faRightToBracket } from "@fortawesome/free-solid-svg-icons";
 
+library.add(faRightToBracket);
 library.add(faFire);
 library.add(faPlus);
 library.add(faPoo);