feat: Open social links in new tab

* Add target="_blank" and rel="noopener" to social links

* Create custom nav.html template to override theme default

Author: dhruv-ahuja

templates/partials/nav.html

@@ -0,0 +1,83 @@
+<nav>
+    <div class="left-nav">
+        {% if config.extra.logo %}
+            <a href={{ config.base_url }} class="logo">
+                <img alt="{{ config.title }}" src="{{ get_url(path=config.extra.logo) }}">
+            </a>
+        {% else %}
+            <a href={{ config.base_url }}>{{ config.title }}</a>
+        {% endif %}
+
+
+        <div class="socials">
+            {% for social in config.extra.socials %}
+                <a rel="me" href="{{ social.url }}" class="social" target="_blank" rel="noopener">
+                    <img alt="{{ social.name }}"
+                         src="{{ get_url(path="icons/social/" ~ social.icon ~ ".svg") }}">
+                </a>
+            {% endfor %}
+        </div>
+    </div>
+
+    <div class="right-nav">
+        {% for menu in config.extra.menu %}
+            <a href={{ get_url(path=menu.url) }} style="margin-right: 0.5em">{{ menu.name }}</a>
+        {% endfor %}
+
+        {% if config.build_search_index %}
+            <button id="search-button"
+                    class="search-button"
+                    title="$SHORTCUT to open search">
+                <img src="{{ get_url(path='icons/search.svg') }}"
+                     alt="Search"
+                     class="search-icon">
+            </button>
+
+            <div id="searchModal"
+                 class="search-modal js"
+                 role="dialog"
+                 aria-labelledby="modalTitle">
+                <div id="modal-content">
+                    <h1 id="modalTitle" class="page-header">Search</h1>
+                    <div id="searchBar">
+                        <input id="searchInput"
+                               role="combobox"
+                               autocomplete="off"
+                               spellcheck="false"
+                               aria-expanded="false"
+                               aria-controls="results-container"
+                               placeholder="Search..." />
+                        <button id="clear-search" class="clear-button" title="Clear search">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                                <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div id="results-container">
+                        <div id="results-info">
+                            <span id="zero_results" style="display: none;">No results</span>
+                            <span id="one_result" style="display: none;">1 result</span>
+                            <span id="many_results" style="display: none;">$NUMBER results</span>
+                        </div>
+                        <div id="results" role="listbox"></div>
+                    </div>
+                </div>
+            </div>
+        {% endif %}
+
+        {% if config.extra.theme == "toggle" %}
+            <a id="dark-mode-toggle"
+               onclick="toggleTheme(); event.preventDefault();"
+               href="#">
+                <img src="{{ get_url(path="icons/sun.svg") }}"
+                     id="sun-icon"
+                     style="filter: invert(1)"
+                     alt="Light" />
+                <img src={{ get_url(path="icons/moon.svg") }} id="moon-icon" alt="Dark" />
+            </a>
+
+            <!-- Initialize the theme toggle icons -->
+            <script>updateItemToggleTheme()</script>
+        {% endif %}
+    </div>
+</nav>