Started work on porting improvements from admin panel to channel settings

www/js/channelSettings.js

@@ -27,7 +27,83 @@ class channelSettingsPage{
         this.livestreamPreferences = new livestreamPreferences(this.channel);
         this.tokeCommandList = new tokeCommandList(this.channel);
         this.emoteList = new emoteList(this.channel);
-        this.deleteBtn = new deleteBtn(this.channel);
+
+        //Setup nav buttons
+        this.navButtons = new chanAdminNavButtons(this.channel);
+    }
+}
+
+class chanAdminNavButtons{
+    constructor(channel){
+        //Take down channel
+        this.channel = channel;
+        //Grab nav list
+        this.navList = document.querySelector("#admin-nav-list");
+        //Create empty map to do a holdem buttons
+        this.buttons = new Map();
+
+        //Build out options map
+        this.options = new Map([
+            ["Channel Info", document.querySelector("#chan-info-list")],
+            ["Ranked Users", document.querySelector("#chan-user-list")],
+            ["Bans", document.querySelector("#chan-ban-list")],
+            ["Preferences", document.querySelector("#chan-settings-list")],
+            ["Permissions", document.querySelector("#chan-perm-list")],
+            ["Toke Commands", document.querySelector("#chan-toke-list")],
+            ["Emotes", document.querySelector("#chan-emote-list")],
+            ["Delete Channel", null]
+        ]);
+ 
+        //Render out buttons
+        this.renderButtons();
+        //Select the first option in the options map
+        this.displayOption(Array.from(this.options.keys())[0]);
+    }
+
+    renderButtons(){
+        //For erry list in the admin panel
+        for(const option of this.options.keys()){
+            //Create a button for it 
+            const button = document.createElement('button');
+            button.innerText = option;
+
+            //If this aint the Delete Channel button
+            if(option != "Delete Channel"){
+                //Attatch an event listener to handle users clickin' der button
+                button.addEventListener('click',()=>{this.displayOption(option)});
+            }else{
+                //Attatch an event listener to blaire the fuckin' defcon five nukem alarm
+                button.addEventListener('click', () => {new deleteChannelPopup(this.channel)});
+
+                button.classList.add('danger-button');
+            }
+
+            //Drop button in the buttons map
+            this.buttons.set(option, button);
+
+            //Add that shit
+            this.navList.appendChild(button);
+        }
+    }
+
+    displayOption(selectedOption){
+        //For every option
+        for(const option of this.options.keys()){
+            //If this is the Delete Channel button
+            if(option == "Delete Channel"){
+                //ignorem
+                break;
+            }
+
+            //If we're on the selected option
+            if(option == selectedOption){
+                this.options.get(option).style.display = 'flex';
+                this.buttons.get(option).classList.add('positive-button');
+            }else{
+                this.options.get(option).style.display = 'none';
+                this.buttons.get(option).classList.remove('positive-button');
+            }
+        }
     }
 }
 
@@ -659,21 +735,7 @@ class emoteList{
     }
 }
 
-class deleteBtn{
-    constructor(channel){
-        this.channel = channel;
-        this.delete = document.querySelector("#chan-delete");
-    
-        this.setupInput();
-    }
-
-    setupInput(){
-        this.delete.addEventListener('click', () => {new deleteAccountPopup(this.channel)});
-    }
-
-}
-
-class deleteAccountPopup{
+class deleteChannelPopup{
     constructor(channel){
         this.channel = channel;
         this.popup = new canopyUXUtils.popup("nukeChannel", true, this.asyncConstructor.bind(this));