Add a classname to recto configuration

Adding class name so that it can be toggled between 'recto' and 'verso'.  Verso being the normal left/right configuration, no styling is needed.  With recto, the first page is shifted to the second slot, or right side.

client/homebrew/brewRenderer/brewRenderer.less

@@ -14,7 +14,7 @@
 			grid-template-rows: repeat(3, auto); 
 			gap: 10px 10px; 
 			justify-content: center;
-			& .page:first-child {
+			&.recto .page:first-child {
 				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
 				// todo: add a checkbox to toggle this setting
 				grid-column-start: 2; 

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -12,6 +12,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	const [zoomLevel, setZoomLevel] = useState(100);
 	const [pageNum, setPageNum] = useState(currentPage);
 	const [arrangement, setArrangement] = useState('single');
+	const [startOnRight, setStartOnRight] = useState(true);
 	const [toolsVisible, setToolsVisible] = useState(true);
 	const modes = ['single', 'facing', 'flow'];
 
@@ -31,8 +32,11 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		if(pagesContainer) {
 			modes.forEach((mode)=>pagesContainer.classList.remove(mode));
 			pagesContainer.classList.add(arrangement);
+			['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf));
+			pagesContainer.classList.add(startOnRight ? 'recto' : 'verso');
 		}
 	}, [arrangement]);
+	}, [arrangement, startOnRight]);
 
 
 	const handleZoomButton = (zoom)=>{