{% load static %}

<script type="text/javascript" src="{% static 'js/navbar.js' %}"></script>
<nav id='navbar' style="height:50px" class="navbar">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="{% url 'home'  %}">
                <!-- <h1 class=" is-size-3 " style="font-weight: bold;">KAYGO</h1> -->
                <img src=" {% static 'img/doucoder1.png' %} " alt="Logo de doucoder">

            </a>
            <span class="navbar-burger burger" data-target="navbarMenu">
                        <span></span>
            <span></span>
            <span></span>
            </span>
        </div>
        <div id="navbarMenu" class="navbar-menu">
            <div class="navbar-end">
                <a class="navbar-item is-active " href="{% url 'home' %}">
                            <span style="font-weight: 400;" >Accueil</span> 
                        </a>
                <a class="navbar-item" href="{% url 'portfolio' %}">
                    <span style="font-weight: 400;" >Portfolio</span>
                        </a> 
                        
                {% if user.is_authenticated %}
                <div class="navbar-item has-dropdown is-hoverable">
                    <a class="navbar-link">
                                Mon compte
                            </a>
                    <div class="navbar-dropdown">
                        <!--<a class="navbar-item" href="{% url 'profile'  user.username %}">
                                    {{user.username}}
                                </a> -->



                        <hr class="navbar-divider">
                        <a class="navbar-item" href="{% url 'logout' %}">
                                Logout
                            </a>
                    </div>
                </div>

                {% endif %}

                <div class="navbar-item">
                    <div class="buttons mynavbutton">
                        {% if not user.is_authenticated %}

                        <!-- <a href="{% url 'login' %}">
                            <button class="button is-link is-light">Login</button>
                        </a> -->

                        {% endif %}

                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>


<script>

    window.onscroll = function () { navSticky() };

    function navSticky() {

        if (document.documentElement.scrollTop > 350) {
            document.getElementById("navbar").classList.add('menu-scrolled');

            
            // accent-color
        }else{

            document.getElementById("navbar").classList.remove('menu-scrolled');
        }
    }



</script>