MusareMeteor/app/client/templates/header.html

<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>
        </ul>
        <ul id="accountDrop" class="dropdown-content">
            {{#if currentUser}}
                <li><a href="/u/{{currentUser.username}}">Profile</a></li>
                <li><a href="/settings">Settings</a></li>
                <li class="divider"></li>
                <li class="logout"><a>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">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">
                        {{#if currentUser}}
                            {{currentUser.username}}
                        {{else}}
                            Account
                        {{/if}}
                        <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>
                            </div>
                        </li>
                        <li>
                            <div class="collapsible-header black-text"><i class="material-icons">arrow_drop_down</i>
                                {{#if currentUser}}
                                    {{currentUser.username}}
                                {{else}}
                                    Account
                                {{/if}}
                            </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>