Index: /main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css
===================================================================
--- /main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css	(revision 36035)
+++ /main/trunk/model-interfaces-dev/wmtb/styles/gs-wmtb-custom.css	(revision 36036)
@@ -7,7 +7,7 @@
 :root {
     --height-header: 120px;
-    --height-header-mobile: 93px;
     --bp-small: 1025px;
     --bp-small-max: 1024px; /* 1 less */
+    --a-link-color: rgb(86, 154, 189);
 }
 
@@ -32,9 +32,9 @@
  Need spaces around (arithmetic) operator in calc() equations
 */
+
 .shifted-frame {
     overflow: auto;
     height: calc(100vh - var(--height-header)); /*calc(100vh - 120px);*/
     width: auto;
-
 } /* Why does height calc(100% -120px) instead of using 100vh not work? */
 
@@ -46,14 +46,8 @@
     /*
       body { overflow: auto; }
-   */
-    
-    div#spacer-for-nav {
-	height: var(--height-header-mobile); /*93px;*/
-    }
-
-    .shifted-frame {
-	height: calc(100vh - var(--height-header-mobile));	
-	/*height: 100vh;*/ /*calc(100vh - 93px);*/
-	/*overflow-y: auto;*//* scroll;*/
+    */
+
+    :root {
+        --height-header: 93px;
     }
 
@@ -96,25 +90,26 @@
 @media screen and (min-width: 1025px) { /* bp-small */
     div.crop-bg {
-	height: 230px; /* You must set a specified height */
-	background-position: center -100px; /* OR: center OR: center 20% */
-	/*display: block;*/ /* div with bg image needs to change from display: table-cell
-			   to display: block when cropping bg image, as table-cell setting
-			   overrides height customisation */
-    }
+        height: 230px; /* You must set a specified height */
+        background-position: center -100px; /* OR: center OR: center 20% */
+        /*display: block;*/ /* div with bg image needs to change from display: table-cell
+                to display: block when cropping bg image, as table-cell setting
+                overrides height customisation */
+    }
+
     /* Restyle .container *descendant* of .crop-bg:
        Padding can not be 100px as it is when .full-bg is in effect,
        and should be no greater than 95px for .crop-bg, else there
        appears a bottom border of sorts under the cropped image. */ 
-    .crop-bg div.container {
-	/* padding: 50px 0; */
-    }
+    /* .crop-bg div.container {
+	    padding: 50px 0;
+    } */
 
     /* Override: padding had made the login/search/browse nav buttons unavailable */
     .banner-wrap .crop-bg .container {
-	padding: 0px;
+	    padding: 0px;
     }
 
     #gs_content {
-	max-width: 70vw;
+	    max-width: 70vw;
     }
 }
@@ -123,5 +118,5 @@
     text-decoration: none;
     font-weight: normal;
-    color: rgb(86, 154, 189); /* a light blue */
+    color: var(--a-link-color); /* a light blue */
 }
 
@@ -132,9 +127,39 @@
 }
 
-div.outer {
-    line-height:1rem;
-    padding-top:2rem; /*5vh;*/
-}
-
+/* Selecting the children ensures that there is space between them */
+div.outer > * {
+    padding: 2rem;
+}
+
+/*
+Acts as a gridded container for the side nav-bar and the main content
+*/
+div.outer.collectionDisplay {
+    display: grid;
+    grid-template-columns: 1fr 3fr 1fr;
+}
+
+.side-navbar {
+    display: flex;
+    flex-direction: column;
+    
+    border-right: 1px solid #eaecef;
+}
+
+.side-navbar ul {
+    padding-left: 1em;
+}
+
+/* The active class is added to nav elements when their content is displayed */
+.side-navbar a.active {
+    font-weight: bold;
+}
+
+/* Intended to be applied to an <hr /> element. */
+.side-navbar-separator {
+    appearance: none;
+    width: 100%;
+    border: 1px solid #eaecef;
+}
 
 div.img-and-desc {
Index: /main/trunk/model-interfaces-dev/wmtb/transform/layouts/main.xsl
===================================================================
--- /main/trunk/model-interfaces-dev/wmtb/transform/layouts/main.xsl	(revision 36035)
+++ /main/trunk/model-interfaces-dev/wmtb/transform/layouts/main.xsl	(revision 36036)
@@ -98,10 +98,4 @@
 		<div class="container wrapper-old col2" id="browse-search-bars">
 		  <div id="topbar">
-		    <div id="topnav">
-		      <ul>
-			<xsl:call-template name="navBar"/>
-		      </ul>
-		    </div>
-		    <!--**********************************************************************-->
 		    <xsl:choose>
 		      <xsl:when test="page/pageRequest/@subaction='home'">
@@ -127,4 +121,9 @@
 	  <!--<hr class="spacer" />-->
 	  <div class="outer">
+			<xsl:if test="page/pageResponse/collection">
+				<xsl:attribute name="class">outer collectionDisplay</xsl:attribute>
+				<xsl:call-template name="sideNavBar"/>
+			</xsl:if>
+		  
 	    <div id="gs_content" class="container">
 	      <xsl:apply-templates select="/page"/>				
@@ -138,97 +137,110 @@
       </div> <!-- end shifted-frame -->
       </div> <!-- end wrapper-->
-    </body>
-</html>
+		</body>
+	</html>
 </xsl:template>
 
-	
-<xsl:template name="navBar">
-<xsl:choose>
-  <xsl:when test="page/pageResponse/collection">
-    <!-- Using select statement to count only non-empty elements, is harder than testing
-         for non-empty elements. Solution of using normalize-space() is from
-         https://stackoverflow.com/questions/31602369/xsl-return-only-the-first-non-empty-element
-    -->
-    <xsl:variable name="count" select="count(/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier/displayItem[@name = 'name'][normalize-space()])"/>
-    <xsl:variable name="currentPage" select="page/pageRequest/@fullURL"/>
-
-<xsl:call-template name="loginLinks"/>
-<li><a href="{$library_name}">DL Six Pou</a></li>
-<li>
-<xsl:if test="page/pageRequest/@subaction='about'"><xsl:attribute name="class">active</xsl:attribute></xsl:if>
-<a href="{$library_name}/collection/{$collNameChecked}/page/about">About</a>
-</li>
-
-<xsl:choose>
-<xsl:when test="$count > 3">
-<!--<li><a href="{$currentPage}">Browse</a>-->
-<li>Browse by:
-<ul class="drop-down-list">
-<xsl:call-template name="Browsing"/>
-</ul>
-</li>
-</xsl:when>
-<xsl:otherwise>
-<li>Browse by:</li>
-<xsl:call-template name="Browsing"/>
-<hr class="spacer"/>
-</xsl:otherwise>
-</xsl:choose>
+<xsl:template name="sideNavBar">
+  <div class="side-navbar">
+		<!--
+			Using select statement to count only non-empty elements, is harder than testing
+			for non-empty elements. Solution of using normalize-space() is from
+			https://stackoverflow.com/questions/31602369/xsl-return-only-the-first-non-empty-element
+		-->
+		<xsl:variable name="classifierCount" select="count(/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier/displayItem[@name = 'name'][normalize-space()])"/>
+
+		<!-- TODO: Hardcoded strings! -->
+
+		<a href="{$library_name}">Our Six Pou</a>
+
+		<a href="{$library_name}/collection/{$collNameChecked}/page/about">
+			<xsl:if test="page/pageRequest/@subaction='about'">
+				<xsl:attribute name="class">active</xsl:attribute>
+			</xsl:if>
+
+			About Collection
+		</a>
+
+		<hr class="side-navbar-separator" />
+
+		<xsl:if test="$classifierCount > 0">
+			<span>Browse by:</span>
+			<ul>
+				<xsl:call-template name="listBrowsingClassifiers"/>
+			</ul>
+		</xsl:if>
+
+		<!--Login link is disabled, as it was determined to be confusing with Whakatohea's existing login elements -->
+		<!-- <hr class="side-navbar-separator" />
+		<xsl:call-template name="loginLinks"/> -->
+	</div>
+</xsl:template>
+
 <!--
-<xsl:if test="/page/pageResponse/collection/serviceList/service/@type='query'">
-<li><a href="{$currentPage}">Search</a>
-<ul>
-<xsl:for-each select="/page/pageResponse/collection/serviceList/service[@type='query']">
-<xsl:variable name="search" select="@name"/>
-<xsl:variable name="search_name" select="displayItem[@name='name']"/>
-<li><a href="{$library_name}/collection/{$collNameChecked}/search/{$search}"><xsl:value-of select="$search_name"/></a></li>
-</xsl:for-each>
-</ul>
-</li>
-</xsl:if>
+	This was in the old navbar. Might come in useful?
+
+	<xsl:variable name="currentPage" select="page/pageRequest/@fullURL"/>
+	<xsl:if test="/page/pageResponse/collection/serviceList/service/@type='query'">
+		<li>
+			<a href="{$currentPage}">Search</a>
+			<ul>
+				<xsl:for-each select="/page/pageResponse/collection/serviceList/service[@type='query']">
+					<xsl:variable name="search" select="@name"/>
+					<xsl:variable name="search_name" select="displayItem[@name='name']"/>
+
+					<li>
+						<a href="{$library_name}/collection/{$collNameChecked}/search/{$search}">
+							<xsl:value-of select="$search_name"/>
+						</a>
+					</li>
+				</xsl:for-each>
+			</ul>
+		</li>
+	</xsl:if>
 -->
-</xsl:when>
-<xsl:otherwise> </xsl:otherwise>
-</xsl:choose>
-</xsl:template>
-
-<xsl:template name="Browsing">
+
+<!-- Builds a list of the named browsing classifiers that are defined in the response. -->
+<xsl:template name="listBrowsingClassifiers">
   <xsl:for-each select="/page/pageResponse/collection/serviceList/service[@name='ClassifierBrowse']/classifierList/classifier">
     <xsl:choose>
-      <!-- Only display browsing classifiers that have a name.
-           Those that don't have a name are empty classifiers
-           denoted by no value/empty value for displayItem name=name elements.
-           Testing for non empty elements is easy: not() test. -->
+      <!--
+				Only display browsing classifiers that have a name.
+				Those that don't have a name are empty classifiers
+				denoted by no value/empty value for displayItem name=name elements.
+				Testing for non empty elements is easy: not() test.
+			-->
       <xsl:when test="not(displayItem[@name='name'] ='')">
-		<li>
-			<xsl:choose>
-			<!-- If this tab is selected then colour it differently -->
-				<xsl:when test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)">
-				<xsl:attribute name='class'>active</xsl:attribute>
-				</xsl:when>
-				<xsl:otherwise> </xsl:otherwise>
-			</xsl:choose>
-			<a>
-				<!-- Add a title element to the <a> tag if a description exists for this classifier -->
-				<xsl:if test="displayItem[@name='description']">
-					<xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute>
-				</xsl:if>
-
-				<!-- Add the href element to the <a> tag -->
-				<xsl:choose>
-					<xsl:when test="@name">
-						<xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/<xsl:value-of select="@name"/></xsl:attribute>
-					</xsl:when>
-					<xsl:otherwise>
-						<xsl:attribute name="href"><xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/1</xsl:attribute>
-					</xsl:otherwise>
-				</xsl:choose>
-
-				<!-- Add the actual text of the <a> tag -->
-				<xsl:value-of select="displayItem[@name='name']"/>
-			</a>
-		</li>
-	      </xsl:when>
-           </xsl:choose>
+				<li>
+					<a>
+						<!-- Indicates that this classifier's content is being displayed -->
+						<xsl:if test="util:contains(/page/pageRequest/paramList/param[@name = 'cl' and /page/pageRequest/@action = 'b']/@value, @name)">
+							<xsl:attribute name="class">active</xsl:attribute>
+						</xsl:if>
+
+						<!-- Add a title element to the <a> tag if a description exists for this classifier -->
+						<xsl:if test="displayItem[@name='description']">
+							<xsl:attribute name='title'><xsl:value-of select="displayItem[@name='description']"/></xsl:attribute>
+						</xsl:if>
+
+						<!-- Add the href element to the <a> tag -->
+						<xsl:choose>
+							<xsl:when test="@name">
+								<xsl:attribute name="href">
+									<xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/<xsl:value-of select="@name"/>
+								</xsl:attribute>
+							</xsl:when>
+							<xsl:otherwise>
+								<xsl:attribute name="href">
+									<xsl:value-of select="$library_name"/>/collection/<xsl:value-of select="/page/pageResponse/collection[@name=$collNameChecked]/@name"/>/browse/1
+								</xsl:attribute>
+							</xsl:otherwise>
+						</xsl:choose>
+
+						<!-- Add the actual text of the <a> tag -->
+						<xsl:value-of select="displayItem[@name='name']"/>
+					</a>
+				</li>
+			</xsl:when>
+		</xsl:choose>
 	</xsl:for-each>
 </xsl:template>
