refactor the nav into the pages

client/homebrew/homebrew.jsx

@@ -62,7 +62,6 @@ const Homebrew = (props)=>{
 		return (
 			<Router>
 				<div className={`homebrew${(config?.deployment || config?.developmentStyle) ? ' deployment' : ''}`} style={backgroundObject()}>
-					<Navbar account={account} brew={brew}></Navbar>
 					<Routes>
 						<Route path={brew.originalUrl} element={<WithRoute el={ErrorPage} brew={brew} />} />
 					</Routes>
@@ -74,7 +73,6 @@ const Homebrew = (props)=>{
 	return (
 		<Router>
 			<div className={`homebrew${(config?.deployment || config?.developmentStyle) ? ' deployment' : ''}`} style={backgroundObject()}>
-				<Navbar account={account} title={url} brew={brew}></Navbar>
 				<Routes>
 					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />

client/homebrew/navbar/error-navitem.less

@@ -1,5 +1,13 @@
 @import '@sharedStyles/core.less';
 
+@keyframes glideDown {
+	0% {
+		opacity   : 0;transform : translate(-50% + 3px, 0px);}
+	100% {
+		opacity   : 1;transform : translate(-50% + 3px, 10px);}
+}
+
+
 .navItem.error {
 	position         : relative;
 	background-color : @red;

client/homebrew/navbar/navbar.jsx

@@ -11,14 +11,25 @@ import Account from './account.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 import Nav from './nav.jsx';
 
-const Navbar = ({ account, brew, title = '', props }) => {
+const Navbar = ({ children, brew, title = '', props }) => {
 	const version = global.version || '0.0.0';
 	const isMac = navigator.platform.toUpperCase().includes('MAC');
 	const mod = isMac ? '⌘' : 'Ctrl';
+	const isBrew = !!brew && brew.shareId;
+	const account = global.account;
+
+	const slots = React.Children.toArray(children).reduce((acc, child) => {
+		if (React.isValidElement(child)) {
+			if (child.type === Navbar.File) acc.file = child;
+			if (child.type === Navbar.Edit) acc.edit = child;
+			if (child.type === Navbar.Go) acc.go = child;
+		}
+		return acc;
+	}, {});
 
 	const renderTitle = () => {
 		const cleanTitle = title.replace(/^\/+|\/+$/g, '');
-		if (!brew.shareId) return <Nav.item className='brewTitle'>{cleanTitle || 'Home'}</Nav.item>;
+		if (!isBrew) return <Nav.item className='brewTitle'>{cleanTitle || 'Home'}</Nav.item>;
 		return (
 			<Nav.item className='brewTitle' style={title.includes('edit') ? { cursor: 'default' } : {}}>
 				{brew.title}
@@ -26,43 +37,44 @@ const Navbar = ({ account, brew, title = '', props }) => {
 		);
 	};
 
-	const renderEditLink = () => {
-		if (!brew.editId) return null;
-
-		const editLink = brew.googleId && !brew.stubbed ? brew.googleId + brew.editId : brew.editId;
-
-		return (
-			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
-				edit
-			</Nav.item>
-		);
-	};
-
-	const renderDownloadLink = () =>{
-		if(!brew.shareId) return <Nav.item disabled={!brew.shareId}>Get txt</Nav.item>
+	const renderDownloadLink = () => {
+		if (!isBrew) return <Nav.item disabled={!isBrew}>Get txt</Nav.item>;
 		let shareLink = brew.shareId;
-		if(brew.googleId && !brew.stubbed) {
+		if (brew.googleId && !brew.stubbed) {
 			shareLink = brew.googleId + shareLink;
 		}
 
-		return <Nav.item href={`/download/${shareLink}`} disabled={!brew.shareId}>Get txt</Nav.item>
-	}
+		return (
+			<Nav.item href={`/download/${shareLink}`} disabled={!isBrew}>
+				Get txt
+			</Nav.item>
+		);
+	};
 
 	const renderFile = () => {
 		return (
 			<Dropdown groupName={'File'} customTrigger={<>File</>} icon={null} key={'file'}>
 				<NewBrew />
-				<Nav.item className='beta' disabled={!brew.shareId}>Save document</Nav.item>
+				<Nav.item className='beta' disabled={!isBrew}>
+					Save document
+				</Nav.item>
 				<div className='nav-section'>
-					<PrintNavitem disabled={!brew.shareId}/>
+					<PrintNavitem disabled={!isBrew} />
 					{renderDownloadLink()}
 				</div>
-				<ShareNavitem brew={brew} disabled={!brew.shareId} currentPage={''/*how the hell do i get it here?*/}/>
+				<ShareNavitem brew={brew} disabled={!isBrew} currentPage={'' /*how the hell do i get it here?*/} />
 				<div className='nav-section'>
-					<Nav.item className='beta' disabled={!brew.shareId}>Delete File</Nav.item>
-					<Nav.item className='beta' disabled={!brew.shareId}>Publish File</Nav.item>
-					<Nav.item className='beta' disabled={!brew.shareId}>Transfer File</Nav.item>
+					<Nav.item className='beta' disabled={!isBrew}>
+						Delete File
+					</Nav.item>
+					<Nav.item className='beta' disabled={!isBrew}>
+						Publish File
+					</Nav.item>
+					<Nav.item className='beta' disabled={!isBrew}>
+						Transfer File
+					</Nav.item>
 				</div>
+				{slots.file?.props.children}
 			</Dropdown>
 		);
 	};
@@ -71,14 +83,25 @@ const Navbar = ({ account, brew, title = '', props }) => {
 		return (
 			<Dropdown groupName={'Edit'} customTrigger={<>Edit</>} icon={null} key={'edit'}>
 				<div className='nav-section'>
-					<Nav.item className='beta' kbd={mod + ' + z'} disabled={!brew.shareId}>
+					{slots.edit}
+					<Nav.item className='beta' kbd={mod + ' + z'} disabled={!isBrew}>
 						Undo
 					</Nav.item>
-					<Nav.item className='beta' kbd={mod + ' + Shift + z'} disabled={!brew.shareId}>Redo</Nav.item>
-					<Nav.item className='beta' kbd={mod + ' + x'} disabled={!brew.shareId}>cut</Nav.item>
-					<Nav.item className='beta' kbd={mod + ' + c'} disabled={!brew.shareId}>copy</Nav.item>
-					<Nav.item className='beta' kbd={mod + ' + v'} disabled={!brew.shareId}>paste</Nav.item>
-					<Nav.item className='beta' kbd={mod + ' + f'} disabled={!brew.shareId}>Find / Replace</Nav.item>
+					<Nav.item className='beta' kbd={mod + ' + Shift + z'} disabled={!isBrew}>
+						Redo
+					</Nav.item>
+					<Nav.item className='beta' kbd={mod + ' + x'} disabled={!isBrew}>
+						cut
+					</Nav.item>
+					<Nav.item className='beta' kbd={mod + ' + c'} disabled={!isBrew}>
+						copy
+					</Nav.item>
+					<Nav.item className='beta' kbd={mod + ' + v'} disabled={!isBrew}>
+						paste
+					</Nav.item>
+					<Nav.item className='beta' kbd={mod + ' + f'} disabled={!isBrew}>
+						Find / Replace
+					</Nav.item>
 				</div>
 			</Dropdown>
 		);
@@ -128,4 +151,9 @@ const Navbar = ({ account, brew, title = '', props }) => {
 	);
 };
 
+
+Navbar.File = () => null;
+Navbar.Edit = () => null;
+Navbar.Go = () => null;
+
 export default Navbar;

client/homebrew/navbar/navbar.less

@@ -197,7 +197,9 @@
 	background: #333;
 	min-height: 29px;
 	font-size: 14px;
-	font-family: Alata, open sans;
+	font-family:
+		Alata,
+		open sans;
 	button,
 	a {
 		&:disabled {
@@ -217,7 +219,7 @@
 	.menu-wrapper {
 		--activeTriggerColor: #666;
 		&:has(ul):not(:has(ul button:not(:disabled))) {
-			color:grey; //faux disabled if all buttons are disabled
+			color: grey; //faux disabled if all buttons are disabled
 		}
 		&:hover {
 			background: #484848;
@@ -288,13 +290,43 @@
 	}
 
 	.navItem {
-
 		&.header {
 			justify-content: center;
 		}
 
 		&.beta {
-			color:@red;
+			color: @red;
+		}
+
+		&.neverSaved {
+			background-color: @orange;
+			color: white;
+			transition: all 0.2s;
+			&:hover {
+				background-color: @green;
+			}
+		}
+
+		&.save {
+			position: relative;
+			width: 106px;
+			text-align: center;
+		}
+
+		&.saved {
+			color: #666666;
+			cursor: initial;
+		}
+
+		&.googleDriveStorage {
+			position : relative;
+
+			img {
+				height: 18px;
+				padding: 0px;
+				margin: -5px;
+				&.inactive { filter : grayscale(1); }
+			}
 		}
 	}
 
@@ -322,12 +354,12 @@
 			padding-bottom: 5px;
 
 			.navItem {
-				min-height:2.2em;
+				min-height: 2.2em;
 			}
 
 			.nav-section:not(:last-child, :has(+ .header)) {
 				border-bottom: 1px solid;
-				padding-bottom:5px;
+				padding-bottom: 5px;
 				margin-bottom: 5px;
 			}
 

client/homebrew/navbar/share.navitem.jsx

@@ -2,11 +2,12 @@ import React from 'react';
 import dedent from 'dedent';
 import Nav from './nav.jsx';
 
-const getShareId = (brew)=>(
-	brew.googleId && !brew.stubbed
+const getShareId = (brew)=>{
+	if (!brew) return null;
+	return brew.googleId && !brew.stubbed
 		? brew.googleId + brew.shareId
 		: brew.shareId
-);
+};
 
 const getRedditLink = (brew)=>{
 	const text = dedent`

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -5,6 +5,7 @@ import moment from 'moment';
 import _ from 'lodash';
 
 import BrewItem from './brewItem/brewItem.jsx';
+import Navbar from '../../../navbar/navbar.jsx';
 
 const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
@@ -328,7 +329,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	return (
 		<div className='listPage sitePage'>
-			{navItems}
+			<Navbar>{navItems}</Navbar>
 
 			{renderNav()}
 

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,13 +1,14 @@
 import './uiPage.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
+import Navbar from '../../../navbar/navbar.jsx';
 
 const UIPage = createReactClass({
 	displayName : 'UIPage',
 
 	render : function(){
 		return <div className='uiPage sitePage'>
-
+			<Navbar/>
 			<div className='content'>
 				{this.props.children}
 			</div>

client/homebrew/pages/editPage/editPage.less

@@ -1,25 +1,4 @@
-@keyframes glideDown {
-	0% {
-		opacity   : 0;transform : translate(-50% + 3px, 0px);}
-	100% {
-		opacity   : 1;transform : translate(-50% + 3px, 10px);}
-}
-.editPage {
-	.navItem.save {
-		position   : relative;
-		width      : 106px;
-		text-align : center;
-		&.saved {
-			color  : #666666;
-			cursor : initial;
-		}
-	}
-	.googleDriveStorage { position : relative; }
-	.googleDriveStorage img {
-		height  : 18px;
-		padding : 0px;
-		margin  : -5px;
 
-		&.inactive { filter : grayscale(1); }
-	}
+.editPage {
+
 }

client/homebrew/pages/homePage/homePage.less

@@ -34,17 +34,4 @@
 		&:hover { background-color : darken(@blue, 20%); }
 		&.show { right : 350px; }
 	}
-
-	.navItem.save {
-		background-color : @orange;
-		transition       : all 0.2s;
-		&:hover { background-color : @green; }
-		
-		&.neverSaved {
-			cursor           : auto;
-			background-color : #333333;
-			opacity          : 0;
-			translate        : -100%;
-		}
-	}
 }

client/homebrew/pages/newPage/newPage.less

@@ -1,17 +1,6 @@
 @import '@sharedStyles/colors.less';
 
 .newPage {
-	.navItem.save {
-		background-color : @orange;
-		transition       : all 0.2s;
-		&:hover { background-color : @green; }
-		
-		&.neverSaved {
-			cursor           : auto;
-			background-color : #333333;
-			opacity          : 0;
-			translate        : -100%;
-		}
-	}
+
 }
 

client/homebrew/pages/sharePage/sharePage.jsx

@@ -4,7 +4,8 @@ import Headtags   from '../../../../vitreum/headtags.js';
 const Meta = Headtags.Meta;
 
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-
+import Navbar from '../../navbar/navbar.jsx';
+import Nav from '../../navbar/nav.jsx';
 import request from '../../utils/request-middleware.js';
 
 import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
@@ -63,12 +64,25 @@ const SharePage = (props)=>{
 			document.removeEventListener('keydown', handleControlKeys);
 		};
 	}, []);
+	
+	const renderEditLink = () => {
+		if (!currentBrew.editId) return null;
 
+		const editLink = currentBrew.googleId && !currentBrew.stubbed ? currentBrew.googleId + currentBrew.editId : currentBrew.editId;
+
+		return (
+			<Navbar.File>
+				<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
+					edit
+				</Nav.item>
+			</Navbar.File>
+		);
+	};
 
 	return (
 		<div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
-
+			<Navbar>{renderEditLink()}</Navbar>
 			<div className='content'>
 				<BrewRenderer
 					text={currentBrew.text}

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -8,6 +8,7 @@ import SplitPane    from '@components/splitPane/splitPane.jsx';
 import ErrorIndex   from '../errorPage/errors/errorIndex.js';
 
 import request from '../../utils/request-middleware.js';
+import Navbar from '../../navbar/navbar.jsx';
 
 const VaultPage = (props)=>{
 	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
@@ -392,6 +393,7 @@ const VaultPage = (props)=>{
 		<div className='sitePage vaultPage'>
 			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
 			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
+			<Navbar/>
 			<div className='content'>
 				<SplitPane showDividerButtons={false}>
 					<div className='form dataGroup'>{renderForm()}</div>

client/homebrew/utils/commonEditPageFunctions.jsx

@@ -24,6 +24,7 @@ import ShareNavItem   from '@navbar/share.navitem.jsx';
 import RecentNavItems from '@navbar/recent.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 import googleDriveIcon from '../googleDrive.svg';
+import {Dropdown} from '../../components/dropdown/dropdown.jsx';
 
 const AUTOSAVE_KEY   = 'HB_editor_autoSaveOn';
 const BREWKEY        = 'HB_newPage_content';
@@ -401,6 +402,15 @@ export default function useCommonEditPageFunctions(dependencies) {
 		<div className= {`${pageName} sitePage`}>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
 			{(pageName == 'editPage') && <Meta name='robots' content='noindex, nofollow' />}
+			<Navbar brew={currentBrew} account={global.account}>
+				<Navbar.File>
+					{error
+					? (<ErrorNavItem error={error} clearError={clearError} />) : (<Dropdown className='save-menu' customTrigger={<>Save</>}>
+						{renderSaveButton()}
+						{(pageName == 'editPage') && renderAutoSaveButton()}
+					</Dropdown>)}
+				</Navbar.File>
+			</Navbar>
 
 			{currentBrew.lock && <LockNotification shareId={currentBrew.shareId} message={currentBrew.lock.editMessage} reviewRequested={currentBrew.lock.reviewRequested}/>}
 			<div className='content'>