From c7ed9ea717790a94c1ede3fc17015d1914d83143 Mon Sep 17 00:00:00 2001
From: Gazook89 <58999374+Gazook89@users.noreply.github.com>
Date: Tue, 27 Sep 2022 19:35:29 -0500
Subject: [PATCH] Create autosave toggle dropdown menu

---
 client/homebrew/navbar/navbar.less          |  7 +++++++
 client/homebrew/pages/editPage/editPage.jsx | 16 +++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 39fbfaf5c..a199ecbe4 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -55,6 +55,13 @@
 		text-align     : center;
 		text-transform : initial;
 	}
+	.save-menu .navItem i.fa-power-off {
+		color : red;
+		&.active {
+			color : rgb(0, 182, 52);
+			filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765))
+		}
+	}
 	.patreon.navItem{
 		border-left  : 1px solid #666;
 		border-right : 1px solid #666;
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index b06b21613..0976fbf98 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -143,12 +143,8 @@ const EditPage = createClass({
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
-	toggleAutoSave : function(){
-		this.setState((prevState)=>({ autoSave: !prevState.autoSave }));
-	},
-
 	trySave : function(){
-		if(!this.state.autoSave){ console.log('Auto-save is off.'); return };
+		if(!this.state.autoSave){return;};
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
 			this.debounceSave();
@@ -342,7 +338,7 @@ const EditPage = createClass({
 			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
 		if(!this.state.isPending && !this.state.isSaving){
-			return <Nav.item className='save saved' onClick={this.toggleAutoSave}>{this.state.autoSave ? `saved.` : `auto-save off`}</Nav.item>;
+			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},
 
@@ -384,7 +380,13 @@ const EditPage = createClass({
 
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				{this.renderSaveButton()}
+				<Nav.dropdown className='save-menu'>
+					{this.renderSaveButton()}
+					<Nav.item onClick={()=>{ this.setState((prevState)=>({ autoSave: !prevState.autoSave }));}}>
+						Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+
+					</Nav.item>
+				</Nav.dropdown>
 				<NewBrew />
 				<HelpNavItem/>
 				<Nav.dropdown>