From 678ac90cd058b228e37ac08c056d06b5d5309f06 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Thu, 29 Jun 2023 23:58:52 +1200
Subject: [PATCH] Shift Recent Items to use Nav.dropdown

---
 client/homebrew/navbar/navbar.less        | 124 ++++++++++------------
 client/homebrew/navbar/recent.navitem.jsx |  22 ++--
 2 files changed, 70 insertions(+), 76 deletions(-)

diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index f23034dd8..036f52cf4 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -81,20 +81,70 @@
 			color              : pink;
 		}
 	}
-	.recent.navItem {
+	.recent.navDropdownContainer {
 		position : relative;
-		.dropdown {
-			position        : absolute;
-			z-index         : 10000;
-			top             : 28px;
-			left            : 0;
+		.navDropdown .navItem {
 			overflow        : hidden auto;
-			width           : 100%;
 			max-height      : ~"calc(100vh - 28px)";
 			scrollbar-color : #666 #333;
 			scrollbar-width : thin;
-			h4 {
-				font-size        : 0.8em;
+			
+
+			#backgroundColorsHover;
+			.animate(background-color);
+			position         : relative;
+			display          : block;
+			overflow         : clip;
+			box-sizing       : border-box;
+			padding          : 8px 5px 13px;
+			text-decoration  : none;
+			color            : white;
+			border-top       : 1px solid #888;
+			background-color : #333;
+			.clear {
+				position         : absolute;
+				top              : 50%;
+				right            : 0;
+				display          : none;
+				width            : 20px;
+				height           : 100%;
+				transform        : translateY(-50%);
+				opacity          : 70%;
+				border-radius    : 3px;
+				background-color : #333;
+				&:hover {
+					opacity : 100%;
+				}
+				i {
+					font-size  : 10px;
+					width      : 100%;
+					height     : 100%;
+					margin     : 0;
+					text-align : center;
+				}
+			}
+			&:hover {
+				background-color : @blue;
+				.clear {
+					display       : grid;
+					place-content : center;
+				}
+			}
+			.title {
+				display       : inline-block;
+				overflow      : hidden;
+				width         : 100%;
+				white-space   : nowrap;
+				text-overflow : ellipsis;
+			}
+			.time {
+				font-size : 0.7em;
+				position  : absolute;
+				right     : 2px;
+				bottom    : 2px;
+				color     : #888;
+			}
+			&.header {
 				display          : block;
 				box-sizing       : border-box;
 				padding          : 5px 0;
@@ -109,62 +159,6 @@
 					background-color : darken(@purple, 30%);
 				}
 			}
-			.item {
-				#backgroundColorsHover;
-				.animate(background-color);
-				position         : relative;
-				display          : block;
-				overflow         : clip;
-				box-sizing       : border-box;
-				padding          : 8px 5px 13px;
-				text-decoration  : none;
-				color            : white;
-				border-top       : 1px solid #888;
-				background-color : #333;
-				.clear {
-					position         : absolute;
-					top              : 50%;
-					right            : 0;
-					display          : none;
-					width            : 20px;
-					height           : 100%;
-					transform        : translateY(-50%);
-					opacity          : 70%;
-					border-radius    : 3px;
-					background-color : #333;
-					&:hover {
-						opacity : 100%;
-					}
-					i {
-						font-size  : 10px;
-						width      : 100%;
-						height     : 100%;
-						margin     : 0;
-						text-align : center;
-					}
-				}
-				&:hover {
-					background-color : @blue;
-					.clear {
-						display       : grid;
-						place-content : center;
-					}
-				}
-				.title {
-					display       : inline-block;
-					overflow      : hidden;
-					width         : 100%;
-					white-space   : nowrap;
-					text-overflow : ellipsis;
-				}
-				.time {
-					font-size : 0.7em;
-					position  : absolute;
-					right     : 2px;
-					bottom    : 2px;
-					color     : #888;
-				}
-			}
 		}
 	}
 	.metadata.navItem {
diff --git a/client/homebrew/navbar/recent.navitem.jsx b/client/homebrew/navbar/recent.navitem.jsx
index 169c46a0e..bafd29110 100644
--- a/client/homebrew/navbar/recent.navitem.jsx
+++ b/client/homebrew/navbar/recent.navitem.jsx
@@ -139,11 +139,11 @@ const RecentItems = createClass({
 	},
 
 	renderDropdown : function(){
-		if(!this.state.showDropdown) return null;
+		// if(!this.state.showDropdown) return null;
 
 		const makeItems = (brews)=>{
 			return _.map(brews, (brew, i)=>{
-				return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
+				return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
 					<span className='title'>{brew.title || '[ no title ]'}</span>
 					<span className='time'>{Moment(brew.ts).fromNow()}</span>
 					<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
@@ -151,25 +151,25 @@ const RecentItems = createClass({
 			});
 		};
 
-		return <div className='dropdown'>
+		return <>
 			{(this.props.showEdit && this.props.showView) ?
-				<h4>edited</h4> : null }
+				<Nav.item className='header'>edited</Nav.item> : null }
 			{this.props.showEdit ?
 				makeItems(this.state.edit) : null }
 			{(this.props.showEdit && this.props.showView) ?
-				<h4>viewed</h4>	: null }
+				<Nav.item className='header'>viewed</Nav.item>	: null }
 			{this.props.showView ?
 				makeItems(this.state.view) : null }
-		</div>;
+		</>;
 	},
 
 	render : function(){
-		return <Nav.item icon='fas fa-history' color='grey' className='recent'
-			onMouseEnter={()=>this.handleDropdown(true)}
-			onMouseLeave={()=>this.handleDropdown(false)}>
-			{this.props.text}
+		return <Nav.dropdown className='recent'>
+			<Nav.item icon='fas fa-history' color='grey' >
+				{this.props.text}
+			</Nav.item>
 			{this.renderDropdown()}
-		</Nav.item>;
+		</Nav.dropdown>;
 	}
 
 });