dagshub-docs/theme/partials/nav.html

<!-- Main navigation -->
<div id="reader-view" class="md-button">
    <a>
        <i class="fas fa-book-open"></i> <span>Reader Mode</span>
    </a>
    <script>
        // Constants
        const READER_MODE_LOCAL_STORAGE_NAME = 'dagshub-docs-reader-mode',
              READER_MODE_ATTRIBUTE = 'data-md-reader-mode',
              READER_MODE_ACTIVE = 'true',
              READER_MODE_INACTIVE = 'false';

        current_mode = localStorage.getItem(READER_MODE_LOCAL_STORAGE_NAME);
        if (current_mode) {
            const attr = READER_MODE_ATTRIBUTE;
            document.body.setAttribute(attr, current_mode);
        }

        $(document).ready(() => {
            const attr = READER_MODE_ATTRIBUTE;
            let reader_view_toggle = $("#reader-view a")[0];
            reader_view_toggle.addEventListener("click", function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                let current_mode = document.body.getAttribute(attr);
                let next_mode = current_mode === READER_MODE_ACTIVE ? READER_MODE_INACTIVE : READER_MODE_ACTIVE;
                document.body.setAttribute(attr, next_mode);

                localStorage.setItem(READER_MODE_LOCAL_STORAGE_NAME, next_mode);
            })
        })
    </script>
</div>
<nav id="side-nav-primary" class="md-nav md-nav--primary" data-md-level="0">

    <!-- Site title -->
    <label class="md-nav__title md-nav__title--site" for="__drawer">
        <a href="/"
           title="{{ config.site_name }}"
           class="md-nav__button md-logo"
           aria-label="{{ config.site_name }}">
            {% if config.theme.logo.icon %}
                <i class="md-icon">{{ config.theme.logo.icon }}</i>
            {% else %}
                <img src="{{ config.theme.logo | url }}" height="50"/>
            {% endif %}
        </a>
        <span class="appears-in-non-mobile">DAGsHub - {{ config.site_name }}</span>
        <nav class="extra-links-sidebar">
            <div class="md-grid">
                <ul class="md-nav__list">
                    <li class="md-nav__item cta signup">
                        <a href="/user/sign_up">
                            <i class="fas fa-user-plus"></i>
                            &nbsp;&nbsp;Sign Up
                        </a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/explore/repos/" title="Explore" class="md-nav__link">Explore</a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/docs/" title="Docs" class="md-nav__link">Docs</a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/docs/faq" title="FAQ" class="md-nav__link">FAQ</a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/blog" title="Blog" class="md-nav__link">Blog</a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/about/" title="Our Story" class="md-nav__link">Our Story</a>
                    </li>
                    <li class="md-nav__item">
                        <a href="/careers/" title="Careers" class="md-nav__link">Careers</a>
                    </li>
                </ul>
            </div>
        </nav>
    </label>

    <!-- Repository containing source -->
    {% if config.repo_url %}
        <div class="md-nav__source">
            {% include "partials/source.html" %}
        </div>
    {% endif %}

    <!-- Render item list -->
    <ul class="md-nav__list" data-md-scrollfix>
        {% for nav_item in nav %}
            {% set path = "nav-" + loop.index | string %}
            {% set level = 1 %}
            {% include "partials/nav-item.html" %}
        {% endfor %}
    </ul>
</nav>