a customized Paginator Navbar (For Wagtail CMS)

pagination_nav.html

{# file path: <PROJECT_DIRE>\public_templates\wagtailadmin\shared\pagination_nav.html #}
{% load i18n %}
{% load wagtailadmin_tags %}

{% if linkurl %}
    {% url linkurl as url_to_use %}
{% endif %}

{% comment %} from here Changed by Developer#3 {% endcomment %}
{% if items.has_previous or items.has_next %} 
    <nav class="pagination_nav" aria-label="{% trans 'Pagination' %}">
        <ul class="pagination">
            <li class="arrow previous">
                {% if items.has_previous %}
                    <a href="{{ url_to_use }}{% querystring p=items.previous_page_number %}" class="icon icon-arrow-left">{% trans 'Previous' %}</a>
                {% endif %}
            </li>
            <p>{% with pr=items.paginator.page_range page_num=items.number total_pages=items.paginator.num_pages %}
                {% blocktrans %}Page {{ page_num }} of {{ total_pages }}.{% endblocktrans %}
                GoTO: 
                <select name="pagination_numbers" id="pagination_numbers">
                    {% for i in pr %}
                    <option value="{{ url_to_use }}{% querystring p=i %}" {% if i == page_num %} selected {% endif %}>{{i}}</option><a href="{{ url_to_use }}{% querystring p=i %}">Go</a>
                    {% endfor %}
                </select>
                {% endwith %}</p>
            
            <li class="arrow next">
                {% if items.has_next %}
                    <a href="{{ url_to_use }}{% querystring p=items.next_page_number %}" class="icon icon-arrow-right-after">{% trans 'Next' %}</a>
                {% endif %}
            </li>
        </ul>
    </nav>
{% endif %}

related CSS:

ul.pagination {box-shadow: 0 0 4px 2px grey, 0 0 4px 2px green;display: flex;justify-content: space-between;align-items: center;width: 400px}
ul.pagination, ul.pagination * {background-color: var(--main_color);color: var(--main_bg_color);}
nav.pagination_nav {position: fixed;top: 90vh;left: 35vw;}