diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 1ba4769..053356f 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -284,7 +284,7 @@ a.admin-list-entry-item{
border-bottom: 1px var(--accent1) solid;
}
-#admin-nav-list button:not(.positive-button, :hover){
+#admin-nav-list button:not(.positive-button, :hover, .danger-button){
background-color: var(--bg1);
color: var(--accent1);
}
diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css
index 48273b3..b0edd61 100644
--- a/www/css/theme/the-network-classic.css
+++ b/www/css/theme/the-network-classic.css
@@ -304,7 +304,7 @@ a.admin-list-entry-item{
border-bottom: 1px var(--accent1) solid;
}
-#admin-nav-list button:not(.positive-button, :hover){
+#admin-nav-list button:not(.positive-button, :hover, .danger-button){
background-image: var(--bg1-gradient);
}
diff --git a/www/js/channelSettings.js b/www/js/channelSettings.js
index a048b76..bf23907 100644
--- a/www/js/channelSettings.js
+++ b/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));
diff --git a/www/popup/nukeChannel.html b/www/popup/nukeChannel.html
index 861cd78..78d0545 100644
--- a/www/popup/nukeChannel.html
+++ b/www/popup/nukeChannel.html
@@ -16,7 +16,7 @@ along with this program. If not, see
. -->
-