feat: change header design: add discord link

client/src/components/Form/SearchForm.vue

@@ -2,23 +2,36 @@
   <form @submit.prevent="formSubmit" :class="formClasses" class="flex text-teal-100 text-lg w-full">
     <div v-if="dropdown" @click="dropdown = false" class="fixed z-20 inset-0"></div>
     <div class="relative w-full">
+      <button
+        ref="submit"
+        :class="[btnClasses]"
+        class="absolute z-30 h-full hover:text-teal-200"
+        type="submit"
+      >
+        <svg class="absolute vertical-center horizontal-center w-4 h-4">
+          <use xlink:href="#search" />
+        </svg>
+      </button>
       <input
         ref="input"
         v-model="summoner"
         @focus="selected = true"
         type="text"
         :class="[inputClasses]"
-        class="w-full rounded-lg outline-none pl-6 pr-32 font-bold focus:bg-blue-1000"
+        class="summoner-input w-full outline-none font-bold"
       />
       <transition name="scale-fade">
         <SearchFormDropdown v-if="selected" @click-dropdown="clickDropdown = true" />
       </transition>
 
-      <div class="absolute right-0 z-30 vertical-center flex items-center h-full mr-12">
+      <div
+        :class="{'mr-12': size === 'xl'}"
+        class="absolute right-0 z-30 vertical-center flex items-center h-full"
+      >
         <div
           @click="dropdown = !dropdown"
-          :class="{'border-teal-200': dropdown}"
-          class="border-2 border-transparent cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
+          :class="[selectRegionClasses]"
+          class="border-2 border-transparent cursor-pointer flex items-center rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
           <span class="selected font-bold uppercase select-none">{{ selectedRegion }}</span>
           <svg class="ml-1 -mr-1 w-4 h-4">
@@ -30,7 +43,7 @@
         <div
           v-show="dropdown"
           :class="[dropdownClasses]"
-          class="absolute right-0 z-30 text-white rounded-b shadow cursor-pointer"
+          class="absolute right-0 z-30 text-white shadow cursor-pointer"
         >
           <div
             v-for="(region, index) in regions"
@@ -53,16 +66,6 @@
           </div>
         </div>
       </transition>
-      <button
-        ref="submit"
-        :class="[btnClasses]"
-        class="absolute right-0 z-30 h-full hover:text-teal-200"
-        type="submit"
-      >
-        <svg class="absolute vertical-center horizontal-center w-4 h-4">
-          <use xlink:href="#search" />
-        </svg>
-      </button>
     </div>
   </form>
 </template>
@@ -108,8 +111,8 @@ export default {
   computed: {
     btnClasses() {
       return {
-        'w-8 mr-3': this.size === 'small',
-        'w-12': this.size === 'xl'
+        'left-0 w-8': this.size === 'small',
+        'right-0 w-12': this.size === 'xl'
       }
     },
     formClasses() {
@@ -119,16 +122,24 @@ export default {
     },
     inputClasses() {
       return {
-        'py-2 px-1': this.size === 'small',
-        'py-4 px-2': this.size === 'xl',
-        'input-color': !this.dropdown,
-        'bg-blue-1000': this.dropdown
+        'py-2 pl-12 pr-20 bg-transparent text-base border-b-2 border-blue-300 focus:border-white': this.size === 'small',
+        'py-4 pl-6 pr-32 focus:bg-blue-1000 rounded-lg': this.size === 'xl',
+        'input-color': !this.dropdown && this.size === 'xl',
+        'bg-blue-1000': this.dropdown && this.size === 'xl',
       }
     },
     dropdownClasses() {
       return {
-        'offsetDropDown': this.size === 'small',
-        'offsetDropDownXl': this.size === 'xl'
+        '-mt-1 rounded': this.size === 'small',
+        'offsetDropDownXl rounded-b': this.size === 'xl'
+      }
+    },
+    selectRegionClasses() {
+      return {
+        'px-2 text-base rounded-md': this.size === 'small',
+        'px-2 py-1': this.size === 'xl',
+        'bg-blue-1000': this.dropdown && this.size === 'small',
+        'border-teal-200': this.dropdown && this.size === 'xl',
       }
     },
     ...mapState({
@@ -136,6 +147,12 @@ export default {
     }),
   },
 
+  created() {
+    if (!this.summoner.length) {
+      this.summoner = this.$route.params.name
+    }
+  },
+
   mounted() {
     window.addEventListener('mousedown', this.globalClick)
     window.addEventListener('blur', this.windowBlur)
@@ -149,6 +166,7 @@ export default {
   methods: {
     classRegions(index) {
       return {
+        'rounded-t': index === 0,
         'rounded-b': index === this.regions.length - 1
       }
     },
@@ -174,11 +192,6 @@ export default {
 </script>
 
 <style scoped>
-.offsetDropDown {
-  top: 43px;
-  right: 48px;
-}
-
 .offsetDropDownXl {
   top: 58px;
   right: 50px;

client/src/components/Form/SearchFormDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     @mousedown="clickDropdown"
-    class="mt-1 absolute z-30 w-full px-3 py-2 bg-blue-900 rounded-lg shadow"
+    class="mt-2 absolute z-30 w-full px-3 py-2 bg-blue-900 rounded-lg shadow"
   >
     <div v-if="favorites.length">
       <div class="text-base text-blue-100">favorites:</div>

client/src/layouts/Default.vue

@@ -7,17 +7,44 @@
       transition-name="fade"
     ></LazyBackground>
 
-    <div class="relative page-wrapper mx-auto z-10 flex-grow text-white">
-      <header class="text-teal-100">
-        <div class="flex justify-between items-center">
+    <header
+      :class="bgHeader ? 'header-scrolled' : 'bg-transparent'"
+      class="fixed z-20 left-0 right-0 px-4 text-teal-100 border-b-2 transition-colors ease-in-out duration-100"
+      style="border-color: rgba(144, 205, 244, 0.4);"
+    >
+      <div class="-mb-2px flex justify-between items-center">
+        <div class="flex flex-1">
           <router-link to="/">
-            <img class="h-24" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
+            <img class="block h-10" src="@/assets/img/Logo.svg" alt="LeagueStats logo" />
           </router-link>
+        </div>
 
         <SearchForm @formSubmit="redirect" size="small" />
+
+        <div class="flex-1">
+          <div class="flex items-center justify-end">
+            <a class="discord relative text-sm" href="https://discord.gg/RjBzjfk" target="_blank">
+              <svg
+                class="absolute fill-current"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 448 512"
+              >
+                <path
+                  fill="currentColor"
+                  d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z"
+                />
+              </svg>
+              <span class="ml-8">
+                Join us
+                <span class="font-bold">on Discord</span>
+              </span>
+            </a>
+          </div>
+        </div>
       </div>
     </header>
 
+    <div class="mt-16 relative page-wrapper mx-auto z-10 flex-grow text-white">
       <template v-if="summonerLoading || summonerFound">
         <template v-if="summonerLoading">
           <HeaderLoader />
@@ -149,6 +176,12 @@ export default {
     SummonerRanked,
   },
 
+  data() {
+    return {
+      bgHeader: false
+    }
+  },
+
   computed: {
     tabTransition() {
       return this.summonerFound && this.overviewLoaded ? 'tab' : 'none'
@@ -169,6 +202,11 @@ export default {
 
   created() {
     this.apiCall()
+    window.addEventListener('scroll', this.handleScroll)
+  },
+
+  destroyed() {
+    window.removeEventListener('scroll', this.handleScroll)
   },
 
   methods: {
@@ -176,13 +214,16 @@ export default {
       this.updateSettings({ name: 'region', value: this.$route.params.region.toLowerCase() })
       this.basicRequest({ summoner: this.$route.params.name, region: this.$route.params.region })
     },
+    handleScroll() {
+      this.bgHeader = window.scrollY > 25
+    },
     isRouteActive(currentRoute) {
       return {
         'router-link-active': this.$route.name === currentRoute
       }
     },
     redirect(summoner, region) {
-      this.$router.push(`/summoner/${region}/${summoner}`)
+      this.$router.push(`/summoner/${region}/${summoner}`).catch(() => { })
     },
     ...mapActions('settings', ['updateSettings']),
     ...mapActions('summoner', ['basicRequest']),
@@ -191,6 +232,27 @@ export default {
 </script>
 
 <style scoped>
+.header-scrolled {
+  background-color: rgba(42, 67, 101, 0.95);
+}
+
+.discord svg {
+  width: 22px;
+  height: 22px;
+  transform-origin: bottom left;
+  transition: 0.2s ease-in-out;
+}
+
+.discord:hover svg {
+  width: 24px;
+  height: 24px;
+  transform: rotate(-5deg);
+}
+
+.discord:hover span {
+  color: #ebf8ff;
+}
+
 .router-link-active {
   color: #fff;
   border-color: #fff;

client/src/views/Summoner.vue

@@ -58,7 +58,7 @@ export default {
     return {
       fixedSidebar: false,
       sidebarRectangle: {
-        y: 354,
+        y: 323,
         height: null,
       },
     }