header.html

<link rel="stylesheet" type="text/css" href="https://dusterthefirst.github.io/res/include/header.css">
<style>
a, #userid {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    }
.desktop li {
    transition: 0.2s ease;
    }
.mobile li {
    transition: 0.2s ease;
    }
</style>
<div class="desktop">
    <ul>
        <li><a draggable="false" href="/index.html">Home</a></li>
        <li><a draggable="false" href="/rules.html">Server Rules</a></li>
        <li><a draggable="false" href="/staffrules.html">Staff Rules</a></li>
        <li><a draggable="false" href="/roles.html">Roles</a></li>
        <li><a draggable="false" href="/feedback.html">Feedback</a></li>
        <li style="float: right">
            <div id="login">
                <a draggable="false" href="https://discordapp.com/oauth2/authorize?response_type=token&client_id=307231810218360832&scope=identify&redirect_uri=https://grandayy.github.io/auth.html">Login</a>                    
            </div>
            <div id="logout" style="display: none">
                <a draggable="false" onclick="logout()" style="display: inline-block;cursor: pointer;">Logout</a>
                <span id="userid" style="font-size: 1.2em; margin-right: 10px;"></span>                                        
            </div>
        </li>
    </ul>
</div>
<div class="mobile">
    <div id="menu">
        <div id="drpbtn" onclick="openMenu()">&#9776;</div>
        <ul>
            <li><a draggable="false" href="/index.html">Home</a></li>
            <li><a draggable="false" href="/rules.html">Server Rules</a></li>
            <li><a draggable="false" href="/staffrules.html">Staff Rules</a></li>
            <li><a draggable="false" href="/roles.html">Roles</a></li>
            <li><a draggable="false" href="/feedback.html">Feedback</a></li>
        </ul>
    </div>
</div>
<script>
    console.log(document.cookie);
    if (!getCookie('user')) {
        // DO NOTHING
    } else {
        let user = JSON.parse(getCookie('user'));
        document.getElementById('login').style.display = "none";
        document.getElementById('logout').style.display = "inline-block";

        document.getElementById('userid').innerHTML = `${user.username}<span style="font-size: .7em; color: grey">#${user.discriminator}</span>`
    }
    function logout() {
        setCookie('user', null, -100000);
        location.reload();
    }
    function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return null;
    }
    function setCookie(cname, cvalue, exms) {
        var d = new Date();
        d.setTime(d.getTime() + exms);
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }
</script>
<script>
    function openMenu(){
        $("#menu ul").toggleClass("open");
    }
</script>