feat: add "Show Github Icon" option to settings page

src/components/Navbar.vue

@@ -24,7 +24,10 @@
       >
     </div>
     <div class="right-part">
-      <a href="https://github.com/qier222/YesPlayMusic" target="blank"
+      <a
+        href="https://github.com/qier222/YesPlayMusic"
+        target="blank"
+        v-if="settings.showGithubIcon"
         ><svg-icon icon-class="github" class="github"
       /></a>
       <div class="search-box">
@@ -47,6 +50,7 @@
 
 <script>
 import ButtonIcon from "@/components/ButtonIcon.vue";
+import { mapState } from "vuex";
 
 export default {
   name: "Navbar",
@@ -60,6 +64,9 @@ export default {
       langs: ["zh-CN", "en"],
     };
   },
+  computed: {
+    ...mapState(["settings"]),
+  },
   methods: {
     go(where) {
       if (where === "back") this.$router.go(-1);

src/store/mutations.js

@@ -106,4 +106,7 @@ export default {
   changeMusicQuality(state, value) {
     state.settings.musicQuality = value;
   },
+  updateSettings(state, { key, value }) {
+    state.settings[key] = value;
+  },
 };

src/views/settings.vue

@@ -57,6 +57,22 @@
           </select>
         </div>
       </div>
+      <div class="item">
+        <div class="left">
+          <div class="title"> Show Github Icon </div>
+        </div>
+        <div class="right">
+          <div class="toggle">
+            <input
+              type="checkbox"
+              name="show-github-icon"
+              id="show-github-icon"
+              v-model="showGithubIcon"
+            />
+            <label for="show-github-icon"></label>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -85,6 +101,18 @@ export default {
         this.$store.commit("changeMusicQuality", value);
       },
     },
+    showGithubIcon: {
+      get() {
+        if (this.settings.showGithubIcon === undefined) return true;
+        return this.settings.showGithubIcon;
+      },
+      set(value) {
+        this.$store.commit("updateSettings", {
+          key: "showGithubIcon",
+          value,
+        });
+      },
+    },
   },
   methods: {
     logout() {
@@ -181,6 +209,7 @@ h2 {
 .item {
   margin: 24px 0;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 
   .title {
@@ -205,4 +234,72 @@ h2 {
     }
   }
 }
+
+.beforeAnimation {
+  -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+}
+.afterAnimation {
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04),
+    0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);
+  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+}
+.toggle {
+  margin: auto;
+  background: white;
+}
+.toggle input {
+  opacity: 0;
+  position: absolute;
+}
+.toggle input + label {
+  position: relative;
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transition: 0.4s ease;
+  transition: 0.4s ease;
+  height: 32px;
+  width: 68px;
+  background: #f5f5f7;
+  border-radius: 8px;
+}
+.toggle input + label:before {
+  content: "";
+  position: absolute;
+  display: block;
+  -webkit-transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  transition: 0.2s cubic-bezier(0.24, 0, 0.5, 1);
+  height: 32px;
+  width: 68px;
+  top: 0;
+  left: 0;
+  border-radius: 8px;
+}
+.toggle input + label:after {
+  content: "";
+  position: absolute;
+  display: block;
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.02), 0 4px 0px 0 hsla(0, 0%, 0%, 0.01),
+    0 4px 9px hsla(0, 0%, 0%, 0.08), 0 3px 3px hsla(0, 0%, 0%, 0.03);
+  -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
+  background: #fff;
+  height: 20px;
+  width: 28px;
+  top: 6px;
+  left: 6px;
+  border-radius: 6px;
+}
+.toggle input:checked + label:before {
+  background: #335eea;
+  -webkit-transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
+  transition: width 0.2s cubic-bezier(0, 0, 0, 0.1);
+}
+.toggle input:checked + label:after {
+  left: 34px;
+}
 </style>