Enhanced the settings UI structure.

The left side of the settings UI now has a more comprehensive layout.
Settings tabs now scroll all the way to the frame bar. When the content is scrolled out of view, a drop shadow is displayed. This removes the awkward feel of content scrolling into nothing.

app/assets/js/scripts/settings.js

@@ -142,27 +142,54 @@ function saveSettingsValues(){
 
 let selectedTab = 'settingsTabAccount'
 
+/**
+ * Modify the settings container UI when the scroll threshold reaches
+ * a certain poin.
+ * 
+ * @param {UIEvent} e The scroll event.
+ */
+function settingsTabScrollListener(e){
+    if(e.target.scrollTop > Number.parseFloat(getComputedStyle(e.target.firstElementChild).marginTop)){
+        document.getElementById('settingsContainer').setAttribute('scrolled', '')
+    } else {
+        document.getElementById('settingsContainer').removeAttribute('scrolled')
+    }
+}
+
 /**
  * Bind functionality for the settings navigation items.
  */
 function setupSettingsTabs(){
     Array.from(document.getElementsByClassName('settingsNavItem')).map((val) => {
-        val.onclick = (e) => {
-            if(val.hasAttribute('selected')){
-                return
-            }
-            const navItems = document.getElementsByClassName('settingsNavItem')
-            for(let i=0; i<navItems.length; i++){
-                if(navItems[i].hasAttribute('selected')){
-                    navItems[i].removeAttribute('selected')
+        if(val.hasAttribute('rSc')){
+            val.onclick = (e) => {
+                if(val.hasAttribute('selected')){
+                    return
                 }
+                const navItems = document.getElementsByClassName('settingsNavItem')
+                for(let i=0; i<navItems.length; i++){
+                    if(navItems[i].hasAttribute('selected')){
+                        navItems[i].removeAttribute('selected')
+                    }
+                }
+                val.setAttribute('selected', '')
+                let prevTab = selectedTab
+                selectedTab = val.getAttribute('rSc')
+
+                document.getElementById(prevTab).onscroll = null
+                document.getElementById(selectedTab).onscroll = settingsTabScrollListener
+
+                $(`#${prevTab}`).fadeOut(250, () => {
+                    $(`#${selectedTab}`).fadeIn({
+                        duration: 250,
+                        start: () => {
+                            settingsTabScrollListener({
+                                target: document.getElementById(selectedTab)
+                            })
+                        }
+                    })
+                })
             }
-            val.setAttribute('selected', '')
-            let prevTab = selectedTab
-            selectedTab = val.getAttribute('rSc')
-            $(`#${prevTab}`).fadeOut(250, () => {
-                $(`#${selectedTab}`).fadeIn(250)
-            })
         }
     })
 }