new responsive sidebar menu

Archaeology-ABM · Aug 13, 2024 · ce41b30 · ce41b30
1 parent ae698ca
commit ce41b30
Show file tree

Hide file tree

Showing 9 changed files with 219 additions and 66 deletions.
diff --git a/_data/menu.yml b/_data/menu.yml
@@ -1,17 +1,29 @@
 - title: Home
   link: /
+  icon: home
+  initclass: active
 
 - title: About
   link: /about
+  icon: users
+  initclass: ''
 
 - title: Blog
   link: /blog
+  icon: newspaper-o
+  initclass: ''
 
 - title: Library 
   link: /library
+  icon: database
+  initclass: ''
 
 - title: Guide for submissions
   link: /guide
+  icon: map
+  initclass: ''
 
 - title: Publications
   link: /publications
+  icon: book
+  initclass: ''
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,18 +1,5 @@
 <div id="header_wrap" class="outer">
     <header class="inner">
-      <!--{% if site.github.is_project_page %}
-        <a id="forkme_banner" href="{{ site.github.repository_url }}">View on GitHub</a>
-      {% endif %}-->
-
       {% include site-title.html %}
-
-      <!--{% if site.show_downloads %}
-        <section id="downloads">
-          <a class="zip_download_link" href="{{ site.github.zip_url }}">Download this project as a .zip file</a>
-          <a class="tar_download_link" href="{{ site.github.tar_url }}">Download this project as a tar.gz file</a>
-        </section>
-      {% endif %}-->
-
-      {% include navigation.html %}
     </header>
 </div>
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,7 +1,20 @@
-<nav>
-    <ul>
+<nav class="main-menu">
+  <img style="width: 100%; border: none; box-shadow: none; align-self: baseline;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png">
+  <ul>
       {% for item in site.data.menu %}
-      <li><a href="{{site.baseurl}}{{item.link}}">{{item.title}}</a></li>
+      <li class="list-item">
+        <a href="{{site.baseurl}}{{item.link}}">
+          <span class="icon"><i class="fas fa-{{item.icon}}" aria-hidden="true"></i></span>
+          <span class="menu-title">{{item.title}}</span>
+        </a>
+      </li>
       {% endfor %}
-    </ul>
+      <li>
+        <a href="https://github.com/Archaeology-ABM">
+          <span class="icon"><i class="fab fa-github" aria-hidden="true"></i></span>
+          <span class="menu-title">On GitHub</span>
+        </a>
+      </li>
+  </ul>
 </nav>
+<script src="{{ site.baseurl }}/assets/js/select-menu.js" type="text/javascript"></script>
diff --git a/_includes/site-title.html b/_includes/site-title.html
@@ -1,15 +1,15 @@
 <div class="headerRow">
-  <div class="headerColumn">
+  <div class="headerColumn" style="text-align: right;">
     <span class="faded faded-wide faded-all">
-      <img style="width: 100%; padding: 0px;border: 0px;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png" width="33%">
+      <img style="width: 50%; padding: 0px;border: 0px;" src="{{ site.url }}{{site.baseurl}}/assets/Logo_noText.png">
     </span>
   </div>
-  <div class="headerColumn" style="color:lightcyan; font-size: 120%;">
-    <strong style="color: #03989E; font-size: 150%;">N</strong>etwork for<br>
-    <strong style="color: #03989E; font-size: 150%;">A</strong>gent-based modelling of<br>
-    <strong style="color: #03989E; font-size: 150%;">S</strong>ocio-ecological<br>
-    <strong style="color: #03989E; font-size: 150%;">S</strong>ystems in<br>
-    <strong style="color: #03989E; font-size: 150%;">A</strong>rchaeology
+  <div class="headerColumn" style="color:lightcyan; font-size: 100%;">
+    <strong style="color: #03989E; font-size: 100%;">N</strong>etwork for<br>
+    <strong style="color: #03989E; font-size: 100%;">A</strong>gent-based modelling of<br>
+    <strong style="color: #03989E; font-size: 100%;">S</strong>ocio-ecological<br>
+    <strong style="color: #03989E; font-size: 100%;">S</strong>ystems in<br>
+    <strong style="color: #03989E; font-size: 100%;">A</strong>rchaeology
   </div>
 </div>
 <!-- <h1 id="project_title">{{ site.title | default: site.github.repository_name }}</h1>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -16,14 +16,17 @@
   <body>
 
     {% include header.html %}
-      
+
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+
+      {% include navigation.html %}
+
+      <div id="main_content" class="inner">
         {% include text-to-speech-player.html  %}
-          
+        <br>
         {{ content }}
-      </section>
+      </div>
     </div>
 
     {% include footer.html %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -6,6 +6,9 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2">
     <link rel="stylesheet" type="text/css" media="screen" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
+
     {% seo %}
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   </head>
@@ -16,8 +19,13 @@
 
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <section id="main_content" class="inner">
+
+      {% include navigation.html %}
+
+      <div id="main_content" class="inner">
+
         {% include text-to-speech-player.html  %}
+        <br>
         <!-- DATE -->
         <p style="font-size: 80%; font-style: italic; text-align: right; color: #a9a9a9; margin: 0;">
           <time datetime="{{ page.date | date: "%Y-%m-%d" }}">

diff --git a/assets/css/style.scss b/assets/css/style.scss
@@ -3,31 +3,158 @@
 
 @import "{{ site.theme }}";
 
-#forkme_banner{ display: none !important; }
+$headerandsidebackground: #212121;
+$colorhighlight: #03989E;
+$headerandsideborderwidth: 10px;
+$white: #ddd;
+$pad:     0.925rem;
+$sidepadopen: 250px;
+$sidepadclosed: 70px;
+$headerheight: 200px;
 
-#header_wrap > header > nav > a {
-color: white;
-  text-decoration: underline;
-  font-size: larger;
+*
+{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.inner
+{
+  max-width: 80%;
+}
+
+/*body
+{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: white
+}*/
+
+#header_wrap
+{
+  height: $headerheight;
+  margin-top: 0%;
+  border-bottom: $headerandsideborderwidth solid $colorhighlight;
 }
 
-#header_wrap > header > nav > a:hover {
-color: gray;
+#header_wrap .inner
+{
+  padding: 10px 0px 0px 30px;
+}
+
+.headerRow {
+  content: "";
+  display: table;
+  clear: both;
+}
+.headerColumn {
+  float: left;
+  width: 45%;
+  padding: 10px;
 }
 
-nav {
-  margin-bottom: 20px;
+#footer_wrap
+{
+  padding-left: $sidepadclosed;
 }
-nav ul {
+
+nav
+{
+  position: fixed;
+  top: 0%;
+  height: 100%;
+  left: 0%;
+  width: $sidepadclosed;
   display: flex;
+  background-color: $headerandsidebackground;
+  box-shadow: $headerandsideborderwidth 0 0 $colorhighlight;
+  border-left: 1px solid $colorhighlight;
+  overflow: hidden;
+  transition: width 0.5s;
+  z-index: 1000;
+}
+nav:hover
+{
+  width: $sidepadopen;
+}
+nav ul
+{
+  position: absolute;
+  top: $headerheight;
+  left: 0;
+  width: 100%;
+  padding-left: 5px;
+  padding-top: 30px;
+}
+nav ul li
+{
+  position: relative;
   list-style: none;
-}
-nav ul li {
-  margin-right: 10px;
+  width: 100%;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+nav ul li:hover
+{
+  background: $colorhighlight;
+  opacity: 50%;
+}
+nav ul li.list-item.active a {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background: $colorhighlight;
+  color: $white;
+}
+nav ul li a
+{
+  position: relative;
+  display: block;
+  width: 100%;
+  display: flex;
   text-decoration: none;
+  color: $colorhighlight;
+}
+nav ul li a:hover
+{
+  color: $white;
+}
+nav ul li a .icon
+{
+  position: relative;
+  display: block;
+  min-width: 60px;
+  height: 60px;
+  line-height: 70px;
+  text-align: center;
+}
+nav ul li a .icon i
+{
+  position: relative;
+  font-size: 1.5em;
+  z-index: 1;
+}
+nav ul li a .menu-title
+{
+  position: relative;
+  display: block;
+  padding-left: 5px;
+  height: 60px;
+  line-height: 60px;
+  white-space: nowrap;
 }
-nav ul li a {
-  color: #03989E;
+
+#main_content_wrap
+{
+  padding-left: $sidepadclosed;
+  transition: transform 400ms, opacity 400ms;
+}
+
+#main_content
+{
+  max-width: 80%;
 }
 
 .grid-container{
@@ -36,9 +163,9 @@ nav ul li a {
   grid-gap: 10px;
 }
 .grid-element{
-  background-color: #ddd;
+  background-color: $white;
   border: 1px solid;
-  border-color: #666;
+  border-color: $headerandsidebackground;
   text-align: center;
   padding: 15px;
 }
@@ -55,32 +182,19 @@ nav ul li a {
   border-radius:50%;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 /* Create two equal columns that floats next to each other */
 .column {
   float: left;
   width: 50%;
   padding: 10px;
 }
-.headerColumn {
-  float: left;
-  width: 45%;
-  padding: 10px;
-}
 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }
-.headerRow:after {
-  content: "";
-  display: table;
-  clear: both;
-}
+
 /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 600px) {
   .column {
@@ -98,7 +212,7 @@ nav ul li a {
   bottom:           0;
   right:            0;
   display:          inline-flex;
-  color:            #000000;
+  color:            $headerandsidebackground;
   cursor:           pointer;
   align-items:      center;
   justify-content:  center;
@@ -107,5 +221,7 @@ nav ul li a {
   padding:          .25em;
   width:            2em;
   height:           2em;
-  background-color: #03989E;
-}
+  background-color: $colorhighlight;
+}
+
+#forkme_banner{ display: none !important; }