Nested Templates

week03/app/styles/app.scss

 @import "settings";
 @import 'foundation-sites/foundation';
 @include foundation-everything;
+
+/*
+* Menu styles
+*/
+ul[role="menu"] {
+   @include menu-base;
+   @include menu-direction('vertical');
+
+   &.horizontal {
+       @include menu-direction('horizontal');
+   }
+
+   li {
+       &.menu-text{
+           @include menu-text;
+       }
+
+       &[role="separator"] {
+           padding-bottom: $global-padding;
+       }
+
+       a {
+           &.active {
+               @include menu-state-active;
+           }
+       }
+   }
+}
\ No newline at end of file

week03/app/templates/application.hbs

+<header class="top-bar">
+  <nav class="top-bar-left" aria-label="Main">
+    <ul class="horizontal" role="menu" aria-label="Main">
+      <li class="menu-text">Athena - Study Portal</li>
+      <li><a href="" role="menuitem" tabindex="0" class="active">My Modules</a></li>
+      <li><a href="" role="menuitem" tabindex="-1">My Exams</a></li>
+    </ul>
+  </nav>
+  <nav class="top-bar-right" aria-label="User">
+    <ul class="horizontal" role="menu" aria-label="User">
+      <li><a role="menuitem" tabindex="0">Profile</a></li>
+      <li><a role="menuitem" tabindex="-1">Logout</a></li>
+    </ul>
+  </nav>
+</header>
+
+
 {{outlet}}
\ No newline at end of file