Navigation structure (#35)

OpenTechSchool · Oct 22, 2017 · fc2a821 · fc2a821
1 parent 7f195d8
commit fc2a821
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 49 deletions.
diff --git a/_data/nav.yml b/_data/nav.yml
@@ -1,29 +1,47 @@
-social:
-  - title: "Twitter"
-    icon: "twitter"
-    url: "https://twitter.com/OpenTechSchool"
-  - title: "Facebook"
-    icon: "facebook"
-    url: ""
-  - title: "Donate"
-    icon: "heart"
-    url: "/foundation/donate"
-
-main:
+navigation:
   - title: "Learn"
-    desc: "Want to start learning, click here"
     url: "/learn"
     # nav: learn
+    basic: true
   - title: "Contribute"
     url: "/contribute"
     # nav: contribute
+    basic: true
   - title: "Community"
     url: "/community/"
     nav: "community"
+    sub:
+      - title: "Chapters"
+        url: about/chapters/
+      - title: "Projects"
+        url: about/projects/
+      - title: "OTS People"
+        url: about/otspeople/
   - title: "About"
     url: "/about/"
     # nav: "about"
+    sub:
+      - title: "History"
+        url: /about/history/
+      - title: "Projects"
+        url: /about/projects/
+      - title: "Where we operate"
+        url: /about/operate/
+      - title: "What drive us"
+        url: /about/drive
+      - title: "Contact"
+        url: /about/contact
 
+social:
+  - title: "Twitter"
+    icon: "twitter"
+    url: "https://twitter.com/OpenTechSchool"
+  - title: "Facebook"
+    icon: "facebook"
+    url: "https://www.facebook.com/OpenTechSchool/"
+  - title: "Donate"
+    icon: "heart"
+    url: "/foundation/donate"
 
 learn:
   - title: "Materials"
@@ -33,22 +51,20 @@ learn:
     url: "/learn/projects"
 community:
   - title: "Chapters"
-    url: "/chapters/"
+    url: about/chapters/
   - title: "Projects"
-    url: "/projects"
-  - title: "People"
-    url: "/people"
+    url: about/projects/
+  - title: "OTS People"
+    url: about/otspeople/
   - title: ""
 about:
-  - title: "Foundation"
-    url: /about/foundation/
   - title: "History"
     url: /about/history/
-  - title: "Our Values"
-    url: /about/values
   - title: "Projects"
-    url: /projects/
-  - title: "Press"
-    url: /press/
-  - title: "Imprint"
-    url: /imprint/
+    url: /about/projects/
+  - title: "Where we operate"
+    url: /about/operate/
+  - title: "What drive us"
+    url: /about/drive
+  - title: "Contact"
+    url: /about/contact
diff --git a/_includes/_render_nav.html b/_includes/_render_nav.html
@@ -1,3 +1,19 @@
 {% for item in include.nav %}
-	<li><a href="{{item.url}}">{{item.title}}</a></li>
-{% endfor %}
+
+  {% if item.sub %}
+    <li class='dropdown'>
+      <a class='arrow'>{{item.title}}</a>
+      <ul class='submenu'>
+        {% for subitem in item.sub %}
+          <li><a href="{{subitem.url}}">{{subitem.title}}</a></li>
+        {% endfor %}
+      </ul>
+    </li>
+
+  {% else %}
+
+    <li><a href="{{item.url}}">{{item.title}}</a> </li>
+  {% endif %}
+
+{% endfor %}
+
diff --git a/_includes/_render_social_list.html b/_includes/_render_social_list.html
@@ -0,0 +1,5 @@
+{% for item in include.nav %}
+
+  <a href="{{item.url}}" class="{{item.icon}}" target='_blank'></a>
+
+{% endfor %}
diff --git a/_includes/head.html b/_includes/head.html
@@ -13,6 +13,7 @@
   <meta property="og:site_name" content="{{ site.url }}" />
   <meta property="og:description" content="{{ site.description }}" />
 
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
   <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,15 +1,19 @@
 <header>
   <div class="container-fluid">
-    <nav class="row middle-xs between-xs">
+    <nav class="row middle-sm between-xs">
       <a class="mainlogo" href="{{site.baseurl}}/" >OpenTechSchool</a>
-      <div class="col-xs-12 col-sm-6 row end-xs">
-        <ul class="social-links row col-xs-5 between-xs">
-          {% include _render_nav.html nav=site.data.nav.social %}
-        </ul>
 
-        <ul class="main row col-xs-9 between-xs">
-          {% include _render_nav.html nav=site.data.nav.main %}
+      <div class="nav-links row between-sm col-sm-6 ">
+        <input type="checkbox" id="menu-toggle">
+  			<label for="menu-toggle" class="label-toggle"></label>
+
+        <ul class='nav-links-list'>
+          {% include _render_nav.html nav=site.data.nav.navigation %}
         </ul>
+        <ul class='nav-social'>
+          {% include _render_social_list.html nav=site.data.nav.social %}
+        </ul>
+
       </div>
     </nav>
   </div>

diff --git a/_sass/base/_icons.scss b/_sass/base/_icons.scss
@@ -18,3 +18,26 @@ $svg-path: "/assets/statics/svg/";
 	width: 80px;
 	height: 80px;
 }
+
+.twitter::after {
+	content: "\f099";
+	font-family: "FontAwesome";
+	font-size: 2rem;
+	display: inline-block;
+
+
+}
+
+.facebook::after {
+	content: "\f09a";
+	font-family: "FontAwesome";
+	font-size: 2rem;
+	display: inline-block;
+}
+
+.heart::after {
+	content: "\f004";
+	font-family: "FontAwesome";
+	font-size: 2rem;
+	display: inline-block;
+}
diff --git a/_sass/base/_layout.scss b/_sass/base/_layout.scss
@@ -20,30 +20,180 @@ a {
 
 header {
 	font-family: $heading-font-family;
+	font-size: 1.2rem;
+	font-weight: 400;
 	padding-top: 0.25em;
 	margin-top: 10px;
-  padding: 0px 10px;
+ 	padding: 0 10px;
 
 	.mainlogo {
-		background-color: $brand-color;
 		font-size: $logo-size;
 		line-height: 2em;
-		color: white;
-		font-weight: 400;
+		color: $brand-color;
+		font-weight: 800;
 		padding: 0 0.5em;
 	}
 
-	.social-links {
-		font-size: $p-font-small;
-		text-transform: lowercase;
+
+	#menu-toggle {display: none;}
+	#menu-toggle:checked ~ ul {
+	  opacity: 1;
+	  height: 35vh;
+	  visibility: visible;
 	}
 
-	.main {
-		margin-top: 0.25em;
+	.label-toggle {
+	  background: -moz-linear-gradient(top, $brand-color, white, $brand-color, white, $brand-color);
+    background: -webkit-linear-gradient(top, $brand-color, white, $brand-color, white, $brand-color);
+    background: linear-gradient(top, $brand-color, white, $brand-color, white, $brand-color);
+
+
+	  cursor: pointer;
+	  display: block;
+	  float: right;
+	  height: 35px;
+	  margin-top: 1em;
+	  width: 35px;
+	}
+
+	.nav-links {
 		text-transform: uppercase;
+		justify-content: flex-end;
+		width: 100%;
+		margin-top: -50px;
+	}
+
+	.nav-social {
+		height: 0;
+		opacity: 0;
+		width: 100%;
+	  visibility: hidden;
+	}
+
+	.nav-links-list {
+	  display: block;
+	  height: 0;
+	  list-style-type: none;
+	  opacity: 0;
+	  text-align: center;
+	  transition: all 1s ease;
+	  width: 100%;
+	  visibility: hidden;
+	  > li {
+		  color: $brand-color;
+		  display: block;
+		  font-size: 1.2em;
+	    padding: 12px 8px 0px;
+		}
+		a {
+	  	display: block;
+			padding: 6px;
+		}
+	}
+
+	.dropdown {
+		a {
+			text-align: center;
+	    padding-left: 0;
+		}
+		.arrow::after  {
+			font-family: "FontAwesome";
+			content: "\f078";
+	    font-size: 1.2rem;
+	    top: -2px;
+	    position: relative;
+      padding: 0 6px;
+		}
+		&.open {
+			background-color: $brand-color;
+			a { color: white }
+			.arrow::after {
+				content: "\f00d";
+			}
+		}
+	}
+
+	.submenu {
+		display: none;
+		text-align: left;
+		position: relative;
+		background-color: $brand-color;
+		min-width: 200px;
+		text-transform: capitalize;
+		border-bottom: 2px solid white;
+		z-index: 999;
+		margin-left: -10px;
+    margin-top: 6px;
+		a {
+			font-size: 1.3rem;
+			font-weight: 100;
+			color: white;
+	    padding: 14px 10px;
+	    border-bottom: 1px solid transparent;
+  		&:hover{
+	  		border-bottom: 2px solid white;
+		    font-size: 1.5rem;
+  		}
+  	}
+	}
+
+	.dropdown.open .submenu {
+		display: block;
 	}
 }
 
+@media screen and (min-width: $medium-screen) {
+	header {
+		.nav-links {
+			justify-content: flex-start;
+	    width: auto;
+	    margin-top: 0.25em;
+		}
+
+		.label-toggle {display: none;}
+		#menu-toggle ~ ul {
+		  opacity: 1;
+		  height: auto;
+		  visibility: visible;
+		}
+
+		.nav-links-list {
+	    display: flex;
+	    width: auto;
+	    > li  {
+		    padding: 8px 6px 12px 10px;
+		  }
+
+	    a {
+	      text-decoration: none;
+	      transition: all .5s ease;
+	    }
+	  }
+
+	  .submenu {
+	  	position: absolute;
+	  	a {
+		  	text-align: left;
+		  }
+	  }
+
+		.label-toggle {
+			display: none;
+		}
+
+		.nav-social {
+			opacity: 1;
+			visibility: visible;
+			width: auto;
+			padding: 12px 10px;
+			a {
+		    padding: 0 14px;
+			}
+		}
+	}
+}
+
+
 .section-bkg {
 	margin-top: 50px;
 	margin-bottom: 50px;

diff --git a/_sass/base/_variables.scss b/_sass/base/_variables.scss
@@ -61,8 +61,8 @@ $action-color: $brand-color-lighter;
 
 
 // Breakpoints
-$medium-screen: 600px;
-$large-screen: 900px;
+$medium-screen: 768px;
+$large-screen: 990px;
 
 // Typography
 $base-font-family: $font-stack-esteban;