finished mobile sidebar nav

app/client/templates/footer.html

@@ -2,10 +2,10 @@
     <footer class="page-footer teal accent-4">
         <div class="container row">
             <div class="col l6 s12">
-                <h5 class="white-text">Footer Content</h5>
-
-                <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer
-                    content.</p>
+                <h5 class="white-text">Stay Connected</h5>
+                <p class="grey-text text-lighten-4">Keep up with news and updates about Musare on social media!</p>
+                <a href="https://www.facebook.com/MusareMusic" target="_blank" class="waves-effect waves-light btn blue darken-3">Facebook</a>
+                <a href="https://twitter.com/musareapp" target="_blank" class="waves-effect waves-light btn light-blue accent-2">Twitter</a>
             </div>
             <div class="col l4 offset-l2 s12">
                 <h5 class="white-text">Links</h5>
@@ -18,7 +18,7 @@
         </div>
         <div class="footer-copyright">
             <div class="container">
-               Musare | © 2015 Copyright
+               Copyright &copy; 2016 Musare
             </div>
         </div>
     </footer>

app/client/templates/header.html

@@ -1,71 +1,86 @@
 <template name="header">
-  <header>
-    <!-- Dropdown Structure -->
-    <ul id="contributeDrop" class="dropdown-content">
-      <li><a href="https://www.github.com/Musare/Musare" target="_blank">Github</a></li>
-      <li><a href="donate.html">Donate</a></li>
-    </ul>
-    <ul id="aboutDrop" class="dropdown-content">
-      <li><a href="/project">The Project</a></li>
-      <li><a href="/team">The Team</a></li>
-      <li><a href="/contact">Contact Us</a></li>
-    </ul>
-    <ul id="accountDrop" class="dropdown-content">
-      {{#if currentUser}}
-        <li><a href="#!">Profile</a></li>
-        <li><a href="#!">Settings</a></li>
-        <li class="divider"></li>
-        <li><a href="#!">Logout</a></li>
-        {{else}}
-        <li><a href="/login">Login</a></li>
-        <li><a href="/register">Register</a></li>
-        {{/if}}
-      </ul>
-      <nav>
-        <div class="nav-wrapper teal accent-4">
-          <a href="/" class="brand-logo">Musare</a>
-          <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
-          <ul class="right hide-on-med-and-down scroll-fix">
-            <li><a href="feedback.html">Feedback</a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="dropdown-button" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-          </ul>
-          <ul class="side-nav" id="mobile-navi" style="width: 240px;">
-            <li><a href="#">Feedback</a></li>
-            <ul class="collapsible" data-collapsible="accordion">
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">filter_drama</i>First</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">place</i>Second</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-              <li>
-                <div class="collapsible-header black-text"><i class="material-icons">whatshot</i>Third</div>
-                <div class="collapsible-body black-text"><p>Lorem ipsum dolor sit amet.</p></div>
-              </li>
-            </ul>
-            <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
-            <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
-          --></ul>
-        </div>
-      </nav>
-      <script>
-      $(function() {
-        $(".dropdown-button").dropdown({
-          inDuration: 300,
-          outDuration: 225,
-          hover: true,
-          belowOrigin: true
-        });
-        $(".button-collapse").sideNav();
-        $('.collapsible').collapsible({
-          accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
-        });
-      });
-      </script>
-  </header>
+    <header>
+        <!-- Dropdown Structure -->
+        <ul id="contributeDrop" class="dropdown-content">
+            <li><a href="https://www.github.com/Musare/Musare" target="_blank">Github</a></li>
+            <li><a href="donate.html">Donate</a></li>
+        </ul>
+        <ul id="aboutDrop" class="dropdown-content">
+            <li><a href="/project">The Project</a></li>
+            <li><a href="/team">The Team</a></li>
+            <li><a href="/contact">Contact Us</a></li>
+        </ul>
+        <ul id="accountDrop" class="dropdown-content">
+            {{#if currentUser}}
+                <li><a href="#!">Profile</a></li>
+                <li><a href="#!">Settings</a></li>
+                <li class="divider"></li>
+                <li><a href="#!">Logout</a></li>
+            {{else}}
+                <li><a href="/login">Login</a></li>
+                <li><a href="/register">Register</a></li>
+            {{/if}}
+        </ul>
+        <nav>
+            <div class="nav-wrapper teal accent-4">
+                <a href="/" class="brand-logo">Musare</a>
+                <a href="#" data-activates="mobile-navi" class="button-collapse"><i class="material-icons">menu</i></a>
+                <ul class="right hide-on-med-and-down scroll-fix">
+                    <li><a href="feedback.html">Feedback</a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="contributeDrop">Contribute<i
+                            class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="aboutDrop">About<i
+                            class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="dropdown-button" href="#!" data-activates="accountDrop">Account<i
+                            class="material-icons right">arrow_drop_down</i></a></li>
+                </ul>
+                <ul class="side-nav" id="mobile-navi" style="width: 240px;">
+                    <ul class="collapsible" data-collapsible="accordion">
+                        <li>
+                            <a href="/feedback">Feedback</a>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i> Contribute</div>
+                            <div class="collapsible-body black-text">
+                                <a href="https://www.github.com/Musare/Musare" target="_blank">Github</a>
+                                <a href="donate.html">Donate</a>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i> About</div>
+                            <div class="collapsible-body black-text">
+                                <a href="/project">The Project</a>
+                                <a href="/team">The Team</a>
+                                <a href="/contact">Contact Us</a>
+                            </div>
+                        </li>
+                        <li>
+                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i> Account</div>
+                            <div class="collapsible-body black-text">
+                                <a href="/login">Login</a>
+                                <a href="/register">Register</a>
+                            </div>
+                        </li>
+                    </ul>
+                    <!--<li><a class="mobile-dropdown" href="#!" data-activates="contributeDrop">Contribute<i class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="mobile-dropdown" href="#!" data-activates="aboutDrop">About<i class="material-icons right">arrow_drop_down</i></a></li>
+                    <li><a class="mobile-dropdown" href="#!" data-activates="accountDrop">Account<i class="material-icons right">arrow_drop_down</i></a></li>
+                  --></ul>
+            </div>
+        </nav>
+        <script>
+            $(function () {
+                $(".dropdown-button").dropdown({
+                    inDuration: 300,
+                    outDuration: 225,
+                    hover: true,
+                    belowOrigin: true
+                });
+                $(".button-collapse").sideNav();
+                $('.collapsible').collapsible({
+                    accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+                });
+            });
+        </script>
+    </header>
 </template>