Move settings to more menu on smaller mobile devices (FreeTubeApp#7506)

Author: ChunkyProgrammer

src/renderer/components/SideNav/SideNav.css

@@ -249,3 +249,17 @@
     inline-size: 100%;
   }
 }
+
+@media only screen and (width <= 400px) {
+  /* Hide settings so that they appear in the more dropdown on smaller screens */
+  .smallMobileOnlyHidden {
+    display: none;
+  }
+}
+
+@media only screen and (width > 400px) {
+  .smallMobileOnlyHidden {
+    display: block;
+  }
+}
+

src/renderer/components/SideNav/SideNav.vue

@@ -152,7 +152,7 @@
       </router-link>
       <hr>
       <router-link
-        class="navOption mobileShow"
+        class="navOption mobileShow smallMobileOnlyHidden"
         role="button"
         to="/settings"
         :title="settingsTitle"

src/renderer/components/SideNavMoreOptions/SideNavMoreOptions.css

@@ -82,3 +82,16 @@
     block-size: 1.3em;
   }
 }
+
+@media only screen and (width <= 400px) {
+  /* Show settings in more dropdown on smaller screens */
+  .smallMobileOnlyShow {
+    display: block;
+  }
+}
+
+@media only screen and (width > 400px) {
+  .smallMobileOnlyShow {
+    display: none;
+  }
+}

src/renderer/components/SideNavMoreOptions/SideNavMoreOptions.vue

@@ -110,6 +110,24 @@
           {{ $t("About.About") }}
         </p>
       </router-link>
+      <router-link
+        class="navOption smallMobileOnlyShow"
+        :title="$t('Settings.Settings')"
+        :aria-label="hideLabelsSideBar ? $t('Settings.Settings') : null"
+        to="/settings"
+      >
+        <FontAwesomeIcon
+          :icon="['fas', 'sliders-h']"
+          class="navIcon"
+          :class="applyNavIconExpand"
+        />
+        <p
+          id="settingsNavLabel"
+          class="navLabel"
+        >
+          {{ $t("Settings.Settings") }}
+        </p>
+      </router-link>
     </div>
     <router-link
       class="navOption mobileShow"