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"
                   class="grey-text text-darken-4">Github</a></li>
            <li><a href="/feedback" class="grey-text text-darken-4">Feedback</a></li>
        </ul>
        <ul id="aboutDrop" class="dropdown-content">
            <li><a href="/project" class="grey-text text-darken-4">The Project</a></li>
            <!--<li><a href="/team" class="grey-text text-darken-4">The Team</a></li>-->
        </ul>
        <ul id="accountDrop" class="dropdown-content">
            {{#if currentUser}}
                <li><a href="/u/{{currentUser.profile.username}}" class="grey-text text-darken-4">Profile</a></li>
                <li><a href="/settings" class="grey-text text-darken-4">Settings</a></li>
                <li class="divider"></li>
                <li class="logout"><a class="grey-text text-darken-4">Logout</a></li>
            {{else}}
                <li><a href="/login" class="grey-text text-darken-4">Login / Register</a></li>
            {{/if}}
        </ul>
        <nav>
            <div class="nav-wrapper grey darken-3">
                <a href="/" class="brand-logo"><img src="/logo.png" class="responsive-img" style="height: 60px;"/></a>
                <a href="#" data-activates="mobile-navi" class="button-collapse white-text"><i class="material-icons">menu</i></a>
                <ul class="right hide-on-med-and-down scroll-fix">
                    {{#if isModerator}}
                        <li><a class="light-blue-text text-accent-4" href="/admin"><b>Admin</b></a></li>
                    {{/if}}
                    <li><a href="/news" class="white-text">News</a></li>
                    <li><a class="dropdown-button white-text" href="#!" data-activates="contributeDrop">Contribute<i
                            class="material-icons right">arrow_drop_down</i></a></li>
                    <li><a class="dropdown-button white-text" href="#!" data-activates="aboutDrop">About<i
                            class="material-icons right">arrow_drop_down</i></a></li>
                    <li><a class="dropdown-button white-text" href="#!" data-activates="accountDrop">
                        {{#if currentUser}}
                            {{currentUser.profile.username}}
                        {{else}}
                            Account
                        {{/if}}
                        <i class="material-icons right white-text">arrow_drop_down</i></a></li>
                </ul>
                <ul class="side-nav" id="mobile-navi" style="width: 240px;">
                    <ul class="collapsible" data-collapsible="accordion">
                        {{#if isModerator}}
                            <li><a href="/admin">Admin</a></li>
                        {{/if}}
                        <li>
                            <a href="/news">News</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="/feedback">Feedback</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.profile.username}}
                                {{else}}
                                    Account
                                {{/if}}
                            </div>
                            <div class="collapsible-body black-text">
                                <a href="/login">Login / 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>