more changes

client/homebrew/homebrew.jsx

@@ -12,6 +12,7 @@ import NewPage     from './pages/newPage/newPage.jsx';
 import ErrorPage   from './pages/errorPage/errorPage.jsx';
 import VaultPage   from './pages/vaultPage/vaultPage.jsx';
 import AccountPage from './pages/accountPage/accountPage.jsx';
+import Navbar from './navbar/navbar.jsx';
 
 const WithRoute = ({ el: Element, ...rest })=>{
 	const params = useParams();
@@ -61,6 +62,7 @@ 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>
@@ -73,6 +75,7 @@ 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/homebrew.less

@@ -2,13 +2,13 @@
 .homebrew {
 	height           : 100%;
 	background-color : @steel;
+	display          : flex;
+	flex-direction   : column;
+	overflow-y       : hidden;
 	&.deployment { background-color : darkred; }
 
 	.sitePage {
-		display          : flex;
-		flex-direction   : column;
-		height           : 100%;
-		overflow-y       : hidden;
+		height:100%;
 		.content {
 			position   : relative;
 			flex       : auto;

client/homebrew/navbar/account.navitem.jsx

@@ -61,7 +61,7 @@ const Account = createReactClass({
 	render : function(){
 		//  Logged in
 		if(global.account){
-			return <Nav.dropdown>
+			return <div className='nav-section'>
 				<Nav.item
 					className='account username'
 					color='orange'
@@ -92,7 +92,7 @@ const Account = createReactClass({
 				>
 					logout
 				</Nav.item>
-			</Nav.dropdown>;
+			</div>;
 		}
 
 		//  Logged out

client/homebrew/navbar/navbar.jsx

@@ -7,14 +7,36 @@ import PrintNavitem from './print.navitem.jsx';
 import ShareNavitem from './share.navitem.jsx';
 import HelpNavitem from './help.navitem.jsx';
 import RecentNavItems from './recent.navitem.jsx';
+import Account from './account.navitem.jsx';
 const { both: RecentNavItem } = RecentNavItems;
 import Nav from './nav.jsx';
 
-import useCommonEditPageFunctions from '../../homebrew/utils/commonEditPageFunctions.jsx';
-
-const Navbar = ({ children }) => {
+const Navbar = ({ account, brew, title, props }) => {
 	const version = global.version || '0.0.0';
 
+	const renderTitle = () => {
+		//if vault
+		const cleanTitle = title.replace(/^\/+|\/+$/g, '');
+		if (!brew.shareId) return <Nav.item className='brewTitle'>{cleanTitle || 'Home'}</Nav.item>;
+		return (
+			<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
+				{brew.title}
+			</Nav.item>
+		);
+	};
+
+	const renderEdit = () => {
+		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>
+		);
+	};
+
 	return (
 		<nav>
 			<ul>
@@ -58,9 +80,6 @@ const Navbar = ({ children }) => {
 							Changelog
 						</Nav.item>
 					</div>
-
-					<HelpNavitem />
-
 					<div className='nav-section'>
 						<Nav.item href={`/user/${encodeURIComponent(global.account.username)}`} color='yellow' icon='fas fa-beer'>
 							brews
@@ -73,8 +92,15 @@ const Navbar = ({ children }) => {
 						<RecentNavItem />
 					</Dropdown>
 				</Dropdown>
-				<li>Help</li>
-				<li>User</li>
+				<Dropdown groupName={'Help'} customTrigger={<>Help</>} icon={null} key={'help'}>
+					<HelpNavitem />
+				</Dropdown>
+			</ul>
+			{renderTitle()}
+			<ul>
+				<Dropdown groupName={account.username} customTrigger={<>{account.username}</>} icon={null} key={account.username}>
+					<Account />
+				</Dropdown>
 			</ul>
 		</nav>
 	);

client/homebrew/navbar/navbar.less

@@ -319,10 +319,17 @@
 
 		> .menu-wrapper {
 			height: 100%;
+			text-wrap:nowrap;
 
+			&:not(:only-child) {
+				
 			&:first-child {
 				padding-left: 10px;
 			}
+			&:last-child {
+				padding-right: 10px;
+			}
+			}
 		}
 	}
 

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

@@ -2,32 +2,11 @@ import './uiPage.less';
 import React from 'react';
 import createReactClass from 'create-react-class';
 
-import Nav from '../../../navbar/nav.jsx';
-import Navbar from '../../../navbar/navbar.jsx';
-import NewBrewItem from '../../../navbar/newbrew.navitem.jsx';
-import HelpNavItem from '../../../navbar/help.navitem.jsx';
-import RecentNavItems from '../../../navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-import Account from '../../../navbar/account.navitem.jsx';
-
-
 const UIPage = createReactClass({
 	displayName : 'UIPage',
 
 	render : function(){
 		return <div className='uiPage sitePage'>
-			<Navbar>
-				<Nav.section>
-					<Nav.item className='brewTitle'>{this.props.brew.title}</Nav.item>
-				</Nav.section>
-
-				<Nav.section>
-					<NewBrewItem />
-					<HelpNavItem />
-					<RecentNavItem />
-					<Account />
-				</Nav.section>
-			</Navbar>
 
 			<div className='content'>
 				{this.props.children}

client/homebrew/pages/editPage/editPage.jsx

@@ -10,8 +10,6 @@ import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefau
 
 import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
 
-import Nav            from '@navbar/nav.jsx';
-
 // Page specific imports
 import { md5 }                           from 'hash-wasm';
 import { gzipSync, strToU8 }             from 'fflate';

client/homebrew/pages/sharePage/sharePage.jsx

@@ -3,13 +3,6 @@ import React, { useState, useEffect, useCallback } from 'react';
 import Headtags   from '../../../../vitreum/headtags.js';
 const Meta = Headtags.Meta;
 
-import Nav from '@navbar/nav.jsx';
-import Navbar from '@navbar/navbar.jsx';
-import MetadataNav from '@navbar/metadata.navitem.jsx';
-import PrintNavItem from '@navbar/print.navitem.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-import Account from '@navbar/account.navitem.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
 import request from '../../utils/request-middleware.js';
@@ -71,74 +64,10 @@ const SharePage = (props)=>{
 		};
 	}, []);
 
-	const processShareId = ()=>{
-		return currentBrew.googleId && !currentBrew.stubbed ? currentBrew.googleId + currentBrew.shareId : currentBrew.shareId;
-	};
-
-	const renderEditLink = ()=>{
-		if(!currentBrew.editId) return null;
-
-		const editLink = currentBrew.googleId && ! currentBrew.stubbed ? currentBrew.googleId + currentBrew.editId : currentBrew.editId;
-
-		return (
-			<Nav.item color='orange' icon='fas fa-pencil-alt' href={`/edit/${editLink}`}>
-				edit
-			</Nav.item>
-		);
-	};
-
-	const titleEl = (
-		<Nav.item className='brewTitle' style={disableMeta ? { cursor: 'default' } : {}}>
-			{currentBrew.title}
-		</Nav.item>
-	);
 
 	return (
 		<div className='sharePage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
-			<Navbar>
-				<Nav.section className='titleSection'>
-					{disableMeta ? titleEl : <MetadataNav brew={currentBrew}>{titleEl}</MetadataNav>}
-				</Nav.section>
-
-				<Nav.section>
-					{currentBrew.shareId && (
-						<>
-							<PrintNavItem />
-							<Nav.dropdown>
-								<Nav.item color='red' icon='fas fa-code'>
-									source
-								</Nav.item>
-								<Nav.item color='blue' icon='fas fa-eye' href={`/source/${processShareId()}`}>
-									view
-								</Nav.item>
-								{renderEditLink()}
-								<Nav.item color='blue' icon='fas fa-download' href={`/download/${processShareId()}`}>
-									download
-								</Nav.item>
-								<Nav.item color='blue' icon='fas fa-clone' href={`/new/${processShareId()}`}>
-									clone to new
-								</Nav.item>
-								<Nav.item
-									color='blue'
-									icon='fas fa-link'
-									onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${processShareId()}`);}}>
-									copy url
-								</Nav.item>
-								{currentBrewRendererPageNum > 1 &&
-									<Nav.item
-										color='blue'
-										icon='fas fa-hashtag'
-										onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${processShareId()}#p${currentBrewRendererPageNum}`);}}>
-										copy url (page {currentBrewRendererPageNum})
-									</Nav.item>}
-							</Nav.dropdown>
-						</>
-					)}
-					<RecentNavItem brew={currentBrew} storageKey='view' />
-					<Account />
-				</Nav.section>
-			</Navbar>
 
 			<div className='content'>
 				<BrewRenderer

client/homebrew/pages/userPage/userPage.jsx

@@ -3,15 +3,6 @@ import _ from 'lodash';
 
 import ListPage from '../basePages/listPage/listPage.jsx';
 
-import Nav from '@navbar/nav.jsx';
-import Navbar from '@navbar/navbar.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-import Account from '@navbar/account.navitem.jsx';
-import NewBrew from '@navbar/newbrew.navitem.jsx';
-import HelpNavItem from '@navbar/help.navitem.jsx';
-import ErrorNavItem from '@navbar/error-navitem.jsx';
-
 const UserPage = (props)=>{
 	props = {
 		username : '',
@@ -42,20 +33,8 @@ const UserPage = (props)=>{
 		setError(null);
 	};
 
-	const navItems = (
-		<Navbar>
-			<Nav.section>
-				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>
-	);
-
 	return (
-		<ListPage brewCollection={brewCollection}  navItems={navItems} query={props.query} reportError={(err)=>setError(err)} />
+		<ListPage brewCollection={brewCollection} query={props.query} reportError={(err)=>setError(err)} />
 	);
 };
 

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -3,13 +3,6 @@
 import './vaultPage.less';
 import React, { useState, useEffect, useRef } from 'react';
 
-import Nav          from '@navbar/nav.jsx';
-import Navbar       from '@navbar/navbar.jsx';
-import RecentNavItems from '@navbar/recent.navitem.jsx';
-const { both: RecentNavItem } = RecentNavItems;
-import Account      from '@navbar/account.navitem.jsx';
-import NewBrew      from '@navbar/newbrew.navitem.jsx';
-import HelpNavItem  from '@navbar/help.navitem.jsx';
 import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
 import SplitPane    from '@components/splitPane/splitPane.jsx';
 import ErrorIndex   from '../errorPage/errors/errorIndex.js';
@@ -116,22 +109,6 @@ const VaultPage = (props)=>{
 			loadTotal(title, author, v3, legacy);
 	};
 
-	const renderNavItems = ()=>(
-		<Navbar>
-			<Nav.section>
-				<Nav.item className='brewTitle'>
-					Vault: Search for brews
-				</Nav.item>
-			</Nav.section>
-			<Nav.section>
-				<NewBrew />
-				<HelpNavItem />
-				<RecentNavItem />
-				<Account />
-			</Nav.section>
-		</Navbar>
-	);
-
 	const validateForm = ()=>{
 		//form validity: title or author must be written, and at least one renderer set
 		const isTitleValid      = titleRef.current.validity.valid && titleRef.current.value;
@@ -415,7 +392,6 @@ 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' />
-			{renderNavItems()}
 			<div className='content'>
 				<SplitPane showDividerButtons={false}>
 					<div className='form dataGroup'>{renderForm()}</div>

client/homebrew/utils/commonEditPageFunctions.jsx

@@ -305,7 +305,7 @@ 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' />}
-			{renderNavbar()}
+
 			{currentBrew.lock && <LockNotification shareId={currentBrew.shareId} message={currentBrew.lock.editMessage} reviewRequested={currentBrew.lock.reviewRequested}/>}
 			<div className='content'>
 				<SplitPane onDragFinish={handleSplitMove}>