dagshub-docs/theme/partials/header.html

<script>
    // Constants
    const SIGN_IN_STATUS_ATTRIBUTE = 'data-md-signed-in',
        SIGNED_IN_STATUS = 'true',
        SIGNED_OUT_STATUS = 'false';

    const SIGN_IN_USERNAME_COOKIE = 'dags_awesome',
        SIGN_IN_USER_ID_COOKIE = 'ajs_user_id';

    const getCookie = (name) => {
        let match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        if (match) return match[2];
    };

    $(document).ready(() => {
        // Handling Signed in status
        let username = getCookie(SIGN_IN_USERNAME_COOKIE);
        let user_id = getCookie(SIGN_IN_USER_ID_COOKIE);

        if (username && user_id) {
            document.body.setAttribute(
                SIGN_IN_STATUS_ATTRIBUTE,
                SIGNED_IN_STATUS
            );
            $('.profile-menu .avatar').attr("src", "/avatars/" + user_id);
            $('.profile-menu .name').text(username);
            $('#user-profile-link').attr("href", "/" + username);
        } else {
            document.body.setAttribute(
                SIGN_IN_STATUS_ATTRIBUTE,
                SIGNED_OUT_STATUS
            );
        }
        // Dropdown handling functions
        $(".dropdown.md-tabs__item").hover(function (e) {
            $(this).children(".menu").slideToggle(100);
        })
    })

</script>
<!-- Add sidebar on home and about pages on narrow display or mobile only -->
<!-- Begin mobile navbar -->
<header class="md-header" data-md-component="header">
    <div class="pusher">
        <div class="ui full height">
            <div class="navbar-container">
                <div id="menu-container" class="dagshub-navbar">
                    <div class="left-menu">
                        <div class="fixed-content">
                            <a href="/" tabindex="0">
                                <img width="34" height="30" alt="DagsHub navbar logo" class="navbar-logo"
                                     aria-label="DagsHub Home" src="/docs/assets/images/favicon.svg">
                            </a>
                            {% if "search" in config.plugins %}
                            <label class="md-header__button md-icon" for="__search">
                                {% include ".icons/material/magnify.svg" %}
                            </label>

                            <!-- Search interface -->
                            {% include "partials/search.html" %}
                            {% endif %}
                        </div>
                        <a class="navbar-item show-when-signed-in" tabindex="0"
                           href="/issues" onclick="trackAnalyticsEvent('IssuesTab_Clicked')">Issues</a>
                        <a class="navbar-item show-when-signed-in" tabindex="0"
                           href="/pulls" onclick="trackAnalyticsEvent('PullRequests_Clicked')">Pull Requests</a>
                        <div class="dropdown navbar-item" tabindex="0">
                            Resources &nbsp; <img class="flip" src="/docs/assets/images/navbar/chevron-icon.svg">
                            <div class="submenu">
                                <a class="active"
                                   href="/docs" onclick="trackAnalyticsEvent('Resources_Docs_Clicked')">Docs</a>
                                <a class=""
                                   href="/blog" onclick="trackAnalyticsEvent('Resources_Blog_Clicked')">Blog</a>
                                <a class="navbar-item" data-analytics-event="Resources_Datasets_Clicked" tabindex="0" href="/datasets">Datasets</a>
                                <a class="navbar-item" data-analytics-event="Resources_Glossary_Clicked" tabindex="0" href="/glossary">Glossary</a>
                            </div>
                        </div>
                        <a class="navbar-item" tabindex="0"
                           href="/explore/repos" onclick="trackAnalyticsEvent('ExploreTab_Clicked')">Explore</a>
                      	<a class="navbar-item" tabindex="0"
                           href="/pricing">Pricing</a>
                        <div class="dropdown navbar-item show-when-signed-out" tabindex="0">
                            Product &nbsp; <img class="flip" src="/docs/assets/images/navbar/chevron-icon.svg">
                            <div class="submenu">
                            <a class="navbar-item" tabindex="0" href="/product">Platform</a>
                            <a class="navbar-item" tabindex="0" href="/enterprise">Enterprise</a>
                            </div>
                        </div>
                    </div><!-- end top menu -->
                    <label id="menu-toggle-label" for="__drawer"><img src="/docs/assets/images/navbar/menu-open.svg"></label>
                    <div id="menu-close-label" style="display: none;"><img src="/docs/assets/images/navbar/x.svg"></div>
                    <div id="menu-open-label" style="display: none;"><img src="/docs/assets/images/navbar/menu-open.svg"></div>
                    <div class="right-menu">
                        {% if not config.theme.palette is mapping %}
                        <form class="md-header__option" data-md-component="palette">
                            {% for option in config.theme.palette %}
                            {% set scheme  = option.scheme | d("default", true) %}
                            {% set primary = option.primary %}
                            {% set accent  = option.accent %}
                            <input
                                    class="md-option"
                                    data-md-color-media="{{ option.media }}"
                                    data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
                                    data-md-color-primary="{{ primary | replace(' ', '-') }}"
                                    data-md-color-accent="{{ accent | replace(' ', '-') }}"
                                    {% if option.toggle %}
                                    aria-label="{{ option.toggle.name }}"
                                    {% else  %}
                                    aria-hidden="true"
                                    {% endif %}
                                    type="radio"
                                    name="__palette"
                                    id="__palette_{{ loop.index }}"
                            />
                            {% if option.toggle %}
                            <label
                                    class="md-header__button md-icon"
                                    title="{{ option.toggle.name }}"
                                    for="__palette_{{ loop.index0 or loop.length }}"
                                    hidden
                            >
                                {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
                            </label>
                            {% endif %}
                            {% endfor %}
                        </form>
                        {% endif %}
                        <a aria-label="join our discord"
                           class="navbar-icon tooltip" tabindex="0"
                           aria-label="Connect to our Discord channel"
                           href="https://discord.com/invite/9gU36Y6" onclick="trackAnalyticsEvent('DiscordIcon_Clicked')">
                            <img  src="/docs/assets/images/navbar/social_icons/discord.svg">
                        </a>
                        <div class="dropdown primary button show-when-signed-in" tabindex="0" onclick="trackAnalyticsEvent('Create_Clicked')"
                                 data-content="Create..."
                                 style="position: relative;">
                                Create
                                <img src="/docs/assets/images/navbar/plus-icon.svg">
                                <div class="right submenu">
                                    <a href="/repo/create" onclick="trackAnalyticsEvent('Create_New_Clicked')">
                                        <div class="icon-wrapper"><img src="/docs/assets/images/navbar/plus-icon.svg"></div> New Repository
                                    </a>
                                    <a href="/repo/migrate"
                                       onclick="trackAnalyticsEvent('Create_Migrate_Clicked')">
                                        <div class="icon-wrapper"><img src="/docs/assets/images/navbar/custom_icons/migrate-icon.svg"></div> Migrate A Repo
                                    </a>
                                    <a class="repo-connect" href="/repo/connect"
                                       onclick="trackAnalyticsEvent('Create_Connect_Clicked')">
                                        <div class="icon-wrapper">{% include ".icons/material/github.svg" %}</div> Connect A Repo
                                    </a>
                                    <div class="line-divider"></div>
                                    <a href="/org/create" onclick="trackAnalyticsEvent('Create_Org_Clicked')">
                                        <div class="icon-wrapper"><img src="/docs/assets/images/navbar/custom_icons/org-icon.svg"></div> New Organization
                                    </a>
                                </div><!-- end content create new menu -->
                            </div><!-- end dropdown menu create new -->
                        <div class="dropdown profile-menu show-when-signed-in"
                                 tabindex="0"
                                 data-content="User profile and more"
                                 data-variation="tiny inverted">
                                <img class="avatar" alt="Avatar" src="">
                                <span class="sr-only">User profile and more</span>
                                <img class="flip" src="/docs/assets/images/navbar/chevron-icon.svg">
                                <div class="right submenu">
                                    <div class="name">
                                    </div>
                                    <div class="line-divider"></div>
                                    <a id="user-profile-link" href="">
                                        Your Profile
                                    </a>
                                    <a href="/user/settings/organizations">
                                        Your Organizations
                                    </a>
                                    <a href="/user/settings">
                                        Your Settings
                                    </a>

                                    <div class="line-divider"></div>
                                    <a href="/user/logout">
                                        Sign Out
                                    </a>
                                </div><!-- end content avatar menu -->
                            </div><!-- end dropdown avatar menu -->
                        <div class="primary button show-when-signed-out">
                            <a id="sign-up-navbar" tabindex="0" class=""
                               href="/user/sign_up?redirect_to=%2fdocs">
                            Register
                            </a>
                        </div>
                        <a id="sign-in-navbar" tabindex="0" class="secondary button show-when-signed-out"
                           href="/user/login?redirect_to=%2fdocs">
                        Login
                        </a>
                    </div>
                </div><!-- end container -->
            </div><!-- end bar -->
        </div>
</header>