From c4b0dd5aa67cbe614b790907793ff7e2f5bef58d Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 8 Feb 2022 18:05:02 +1300
Subject: [PATCH] Initial pass of Account dropdown + LogOut

---
 client/homebrew/navbar/account.navitem.jsx | 34 ++++++++++++++++++++--
 client/homebrew/navbar/navbar.less         |  3 ++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/navbar/account.navitem.jsx b/client/homebrew/navbar/account.navitem.jsx
index 6b4d054df..3f3e48b72 100644
--- a/client/homebrew/navbar/account.navitem.jsx
+++ b/client/homebrew/navbar/account.navitem.jsx
@@ -18,11 +18,39 @@ const Account = createClass({
 		}
 	},
 
+	handleLogout : function(){
+		if(confirm('Are you sure you want to log out?')) {
+			document.cookie = `nc_session=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/;samesite=lax;${window.domain ? `domain=${window.domain}` : ''}`;
+			window.location = '/';
+		};
+	},
+
 	render : function(){
 		if(global.account){
-			return <Nav.item href={`/user/${global.account.username}`} color='yellow' icon='fas fa-user'>
-				{global.account.username}
-			</Nav.item>;
+			return <Nav.dropdown>
+				<Nav.item
+					className='account'
+					color='orange'
+					icon='fas fa-user'
+				>
+					{global.account.username}
+				</Nav.item>
+				<Nav.item
+					href={`/user/${global.account.username}`}
+					color='yellow'
+					icon='fas fa-user'
+				>
+					brews
+				</Nav.item>
+				<Nav.item
+					className='logout'
+					color='red'
+					icon='fas fa-power-off'
+					onClick={this.handleLogout}
+				>
+					logout
+				</Nav.item>
+			</Nav.dropdown>;
 		}
 
 		return <Nav.item href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`} color='teal' icon='fas fa-sign-in-alt'>
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index a149307e8..95cc04c7a 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -142,4 +142,7 @@
 			text-align       : center;
 		}
 	}
+	.account.navItem{
+		min-width: 100px;
+	}
 }