unicef · jwflory · Jul 11, 2022 · Jun 21, 2022 · Jul 1, 2022 · Jul 1, 2022
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -356,6 +356,10 @@ pre {
     top: 50px;
 }
 
+nav #site-brand{
+    display: inline-block;
+}
+
 nav #site-brand a {
     color: var(--text-title-color) !important;
 }
@@ -369,6 +373,11 @@ nav #site-brand a:hover {
     padding: 0;
 }
 
+.navbar .navbar-toggler{
+    position:absolute;
+    right: 10px;
+}
+
 .navbar-dark .navbar-toggler-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }
@@ -414,7 +423,7 @@ nav #site-brand a:hover {
     }
     .unicef-glob {
         position: absolute;
-        bottom: 0;
+        bottom: 30px;
         right: 2%;
     }
 }
@@ -509,6 +518,16 @@ nav #site-brand a:hover {
     background: transparent;
 }
 
+.breadcrumbBar{
+    position: relative;
+}
+
+.breadcrumbBar a{
+    all:unset;
+    cursor: pointer;
+    margin: 0 !important;
+}
+
 .lang-list {
     background: var(--primary-color);
     color: var(--white-color);
@@ -733,7 +752,7 @@ blockquote {
 }
 
 blockquote p {
-    color: var(--text-color-dark) !imporant;
+    color: var(--text-color-dark) !important;
 }
 
 /* citation Parent div */
@@ -1003,21 +1022,24 @@ tbody {
     padding-left: 0.5rem;
 }
 
+.sidebarContainer{
+    background-color:var(--white-color);
+    width:280px !important;
+    min-height: auto !important;
+}
 .sidebar {
-    background-color: var(--white-color);
-    position: sticky;
-    top: 110px;
-    margin-bottom: 30px;
-    padding: 40px 10px 20px 10px;
+    background-color:transparent;
+    position:fixed;
+    left:0;
+    padding:20px;
+    width:272px !important;
 }
 
 .sidelist {
     display: block;
 }
 
 li.sidelist>a {
-    margin-left: 35px;
-    margin-bottom: 10px;
     display: block;
     font-size: 20px;
 }
@@ -1055,6 +1077,17 @@ li.sidelist li a {
     line-height: 1.4;
 }
 
+.contentContainer{
+    width: calc(100vw - 250px) !important;
+    display:flex;
+    align-items: center;
+    justify-content:center;
+}
+
+.contentBox{
+    border-radius:10px;
+}
+
 p:empty,
 p a:empty {
     display: none !important;
@@ -1071,23 +1104,8 @@ code {
     font-size: 100%;
 }
 
-.back-btn {
-    position: relative;
-}
-
-.back-btn::before {
-    position: absolute;
-    font-family: 'themify';
-    content: "\e6bc";
-    font-size: 25px;
-    height: 30px;
-    width: 40px;
-    background-color: var(--white-color);
-    color: inherit;
-    text-align: right;
-    z-index: 1;
-    left: -5px;
-    top: -5px;
+.back-btn:hover {
+   text-decoration: none !important;
 }
 
 .ui-autocomplete-input {
@@ -1266,5 +1284,55 @@ footer a:hover{
 }
 
 .breadcrumbLink{
-    text-transform: capitalize;
-}
+    text-transform: capitalize !important;
+}
+
+/* sidebar media queries*/
+@media (max-width:1100px ){
+    .sidebarContainer{
+        display:none !important;
+    }
+    .contentContainer{
+        width:100vw !important;
+        padding:10px 0 !important;
+    }
+    .contentBox{
+        margin:10px !important;
+    }
+    /* .sidebarMobile{
+        display:block;
+    } */
+    .sidebarMobile a{
+        all:unset;
+        color:white !important;
+        font-family: var(--font-family);
+    }
+    .sidebarMobile .row{
+        all:unset;
+    }
+    .sidebarMobile .col-10{
+        all:unset;
+    }
+    .sidebarIcon{
+        display:inline;
+        position:absolute;
+        right:22px;
+        top:7px; 
+        font-size: 20px; 
+    }
+    .navbarMenu{
+        right:10px !important;
+        color:var(--white-color);
+        top:10px !important;
+        font-size:16px !important;
+    }
+}
+
+@media (min-width: 1100px) {
+    .sidebarMobile{
+        display:none !important;
+    }
+    .sidebarIcon{
+        display: none !important;
+    }
+}
diff --git a/exampleSite/content/contributing/_index.en.md b/exampleSite/content/contributing/_index.en.md
@@ -1,7 +1,7 @@
----
-title: Contributing
-icon: "ti-comments"
-description: Information for contributors to the UNICEF Inventory theme or UNICEF Toolkits using this theme.
-type: docs
-
----
+---
+title: Contributing
+icon: "ti-comments"
+description: Information for contributors to the UNICEF Inventory theme or UNICEF Toolkits using this theme.
+type: docs
+
+---
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-us{{ end }}">
   {{ partial "head.html" . }}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
   <body>
     {{ if .IsHome }}

diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html
@@ -9,4 +9,4 @@
       {{ $.Scratch.Add "path" "/" }}
       {{ end }}
   {{ end }}
-</div>
+</div>
diff --git a/layouts/partials/default.html b/layouts/partials/default.html
@@ -1,10 +1,8 @@
 {{ "<!-- details page -->" | safeHTML }}
-<section class="single section-sm main-section" id="section">
-  <div class="container">
-    <div class="row">
-      <div class="col-lg-3">
+<section class="single section-sm" id="section">
+    <div class="d-flex w-100">
+      <div class="sidebarContainer">
         <div class="sidebar">
-        <a class="back-btn" href="{{ .Site.BaseURL | relLangURL }}" aria-label="back"></a>
           <ul>
             {{ $currentNode := . }}
             {{range .Site.Home.Sections.ByWeight}}
@@ -16,16 +14,10 @@
           </ul>
         </div>
       </div>
-      <div class="col-lg-9">
-        <!-- begin breadcrumb feature -->
-        <div class="bg-white p-3" style="margin:auto">
-          {{ partial "breadcrumb.html" . }}
-        </div>
-        <!-- end breadcrumb feature -->
-
-        <div class="p-lg-5 p-4 bg-white position-relative" id="content">
+      <div class="contentContainer py-5 px-5">
+        <div class="p-lg-5 p-4 bg-white position-relative mx-5 my-3 w-100 contentBox" id="content">
           <!-- begin "Edit This Page" button -->
-          <div class="d-flex flex-row-reverse">
+          <div class="d-flex flex-row-reverse p-absolute">
             {{ $path := "" }}
             {{ with .File }}
                 {{ $path = .Path }}
@@ -135,12 +127,11 @@ <h5 class="card-title">{{ .Title }}</h5>
               {{ end }}
             {{ end }}
           <!-- End of related articles section -->
-
+          
           </div>
         </div>
       </div>
     </div>
-  </div>
 </section>
 {{ "<!-- /details page -->" | safeHTML }}
 
@@ -154,7 +145,7 @@ <h5 class="card-title">{{ .Title }}</h5>
 {{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
 {{ $currentNodeFileUniqueID := "" }}
 {{ with $currentNode.File }}{{ $currentNodeFileUniqueID = .UniqueID }}{{ end }}
-<li data-nav-id="{{.Permalink}}" title="{{.Title}}" class="sidelist
+<li data-nav-id="{{.Permalink}}" title="{{.Title}}" class="
   {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}">
   <a href="{{.Permalink}}">
     {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML .Params.Post}}

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
@@ -1,32 +1,36 @@
-<nav class="navbar navbar-expand-md navbar-dark" style=" {{ if .IsHome }}background-color: transparent{{ else }}background-color: {{ site.Params.primary_color }}{{ end }}">
-  <div class="container px-2 px-md-0 navigation-bar">
-      <div id="site-brand">
-        {{ $logo:= site.Params.logo }}
-        {{ $logoWhite:= site.Params.logo_white }}
-        {{ $orgName:= site.Params.brand.parent_org_name }}
-        {{ $orgUrl:= site.Params.brand.parent_org_url }}
-        <a class="navbar-brand px-2" href="{{ if (or $logo $logoWhite) }}{{ $orgUrl }}{{else}}{{ site.BaseURL | relLangURL }}{{ end }}">
-          {{ if (or $logo $logoWhite) }}
-            {{ if .IsHome }}
-            <div class="text-center">
-              <img class="img-fluid d-inline" src="{{if $logoWhite }}{{ $logoWhite | absURL }} {{ else }} {{ $logo | absURL }}{{ end }}"
-                alt="{{ site.Title }}"> <a class="text-white d-block" href="{{ site.BaseURL | relLangURL }}">{{ site.Title }}</a>
-            </div>
-            {{ else }}
-            <div class="text-center nav-heading">
-              <img class="img-fluid nav-img" src="{{ $logo | absURL }}" alt="{{ site.Title }}">
-              <a class="d-block nav-title" href="{{ site.BaseURL | relLangURL }}">{{ site.Title }}</a>
-            </div>
-            {{ end }}
-          {{ else }}
-          {{ site.Title }}
-          {{ end }}
-        </a>
-      </div>
-    <button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
+<nav class="navbar navbar-expand-md navbar-dark d-flex flex-column p-0" style=" {{ if .IsHome }}background-color: transparent{{ else }}background-color: {{ site.Params.primary_color }}{{ end }}">
+  <div class="w-100 container mx-0 navigation-bar">
+    <div id="site-brand">
+      {{ $logo:= site.Params.logo }}
+      {{ $logoWhite:= site.Params.logo_white }}
+      {{ $orgName:= site.Params.brand.parent_org_name }}
+      {{ $orgUrl:= site.Params.brand.parent_org_url }}
+      <a class="navbar-brand px-2"
+        href="{{ if (or $logo $logoWhite) }}{{ $orgUrl }}{{else}}{{ site.BaseURL | relLangURL }}{{ end }}">
+        {{ if (or $logo $logoWhite) }}
+        {{ if .IsHome }}
+        <div class="text-center">
+          <img class="img-fluid d-inline"
+            src="{{if $logoWhite }}{{ $logoWhite | absURL }} {{ else }} {{ $logo | absURL }}{{ end }}"
+            alt="{{ site.Title }}"> <a class="text-white d-block" href="{{ site.BaseURL | relLangURL }}">{{ site.Title
+            }}</a>
+        </div>
+        {{ else }}
+        <div class="text-center nav-heading">
+          <img class="img-fluid nav-img" src="{{ $logo | absURL }}" alt="{{ site.Title }}">
+          <a class="d-block nav-title" href="{{ site.BaseURL | relLangURL }}">{{ site.Title }}</a>
+        </div>
+        {{ end }}
+        {{ else }}
+        {{ site.Title }}
+        {{ end }}
+      </a>
+    </div>
+    <a class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#navigation"
       aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
+      <span class="sidebarIcon navbarMenu">Menu<i class="fa-solid fa-caret-down d-inline p-1"></i>
+      </span>
+  </a>
 
     <div class="collapse navbar-collapse text-center" id="navigation">
       <ul class="navbar-nav ml-auto">
@@ -72,7 +76,30 @@
         {{ end }}
       </select>
       {{ end }}
+      <p class="text-white unicef-glob ml-4 mt-3">Visit <a href="{{ $orgUrl }}" class="text-white">{{ $orgName }} <i
+        class="fas fa-angle-double-right"></i></a></p>
+    </div>
+  </div>
+  {{ if not .IsHome }}
+  <div class="w-100 py-2 breadcrumbBar text-light" style=" {{ if .IsHome }}background-color: transparent{{ else }}background-color: {{ site.Params.text_color_dark }}{{ end }}">  
+    <div class="container">
+      {{ partial "breadcrumb.html" . }}
+      <a data-toggle="collapse" data-target="#sidebarMobile"  aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <i class="ti-menu text-light sidebarIcon"></i></a>
+      <div class="text-light text-center sidebarMobile collapse justify-content-center" id="sidebarMobile">
+        <div class="sidebarBox">
+          <ul>
+            {{ $currentNode := . }}
+            {{range .Site.Home.Sections.ByWeight}}
+              {{ if eq .FirstSection $currentNode.FirstSection }}
+              {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "index" 0}}
+              {{ end }}
+            {{ end }}
+            {{ partial "download-pdf.html" .}}
+          </ul>
+        </div>
+      </div>
     </div>
+
   </div>
-    <p class="text-white unicef-glob mx-3">Visit <a href="{{ $orgUrl }}" class="text-white">{{ $orgName }} <i class="fas fa-angle-double-right"></i></a></p>
-</nav>
+  {{ end }}
+</nav>