mirror of
https://github.com/sissbruecker/linkding.git
synced 2025-08-14 22:19:32 +02:00
102 lines
4.1 KiB
HTML
102 lines
4.1 KiB
HTML
{% load shared %}
|
|
{% htmlmin %}
|
|
{# Basic menu list #}
|
|
<div class="hide-md">
|
|
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary mr-2">Add bookmark</a>
|
|
<div class="dropdown">
|
|
<a href="#" class="btn btn-link dropdown-toggle" tabindex="0" style="padding-right: 0.2rem">
|
|
Bookmarks
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"
|
|
style="height:1rem;width:1rem;vertical-align: text-bottom;">
|
|
<path fill-rule="evenodd"
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clip-rule="evenodd"/>
|
|
</svg>
|
|
</a>
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="{% url 'bookmarks:index' %}" class="btn btn-link">Active</a>
|
|
</li>
|
|
<li>
|
|
<a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
|
|
</li>
|
|
{% if request.user.profile.enable_sharing %}
|
|
<li>
|
|
<a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
|
|
</li>
|
|
{% endif %}
|
|
<li>
|
|
<a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
|
|
</li>
|
|
<li>
|
|
<a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
|
|
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
|
|
</div>
|
|
{# Menu drop-down for smaller devices #}
|
|
<div class="show-md">
|
|
<a href="{% url 'bookmarks:new' %}" class="btn btn-primary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
style="width: 24px; height: 24px">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
|
</svg>
|
|
</a>
|
|
<div class="dropdown dropdown-right">
|
|
<a href="#" id="mobile-nav-menu-trigger" class="btn btn-link dropdown-toggle" tabindex="0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
|
|
style="width: 24px; height: 24px">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
|
|
</svg>
|
|
</a>
|
|
<!-- menu component -->
|
|
<ul class="menu">
|
|
<li>
|
|
<a href="{% url 'bookmarks:index' %}" class="btn btn-link">Bookmarks</a>
|
|
</li>
|
|
<li style="padding-left: 1rem">
|
|
<a href="{% url 'bookmarks:archived' %}" class="btn btn-link">Archived</a>
|
|
</li>
|
|
{% if request.user.profile.enable_sharing %}
|
|
<li style="padding-left: 1rem">
|
|
<a href="{% url 'bookmarks:shared' %}" class="btn btn-link">Shared</a>
|
|
</li>
|
|
{% endif %}
|
|
<li style="padding-left: 1rem">
|
|
<a href="{% url 'bookmarks:index' %}?q=!unread" class="btn btn-link">Unread</a>
|
|
</li>
|
|
<li style="padding-left: 1rem">
|
|
<a href="{% url 'bookmarks:index' %}?q=!untagged" class="btn btn-link">Untagged</a>
|
|
</li>
|
|
<li>
|
|
<a href="{% url 'bookmarks:settings.index' %}" class="btn btn-link">Settings</a>
|
|
</li>
|
|
<li>
|
|
<a href="{% url 'logout' %}" class="btn btn-link">Logout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endhtmlmin %}
|
|
<script>
|
|
// Hide mobile menu on outside click
|
|
// The Spectre CSS component relies on focus changes to show/hide the dropdown, however mobile browsers like
|
|
// Safari will not trigger a blur event when clicking on a non-focusable element, so we have to simulate the
|
|
// behaviour through Javascript
|
|
const mobileNavMenuTrigger = document.getElementById('mobile-nav-menu-trigger');
|
|
|
|
function mobileNavMenuOutsideClickHandler(clickEvent) {
|
|
if (mobileNavMenuTrigger.parentElement.contains(clickEvent.target)) return
|
|
mobileNavMenuTrigger.blur();
|
|
}
|
|
|
|
mobileNavMenuTrigger.addEventListener('focus', function () {
|
|
document.addEventListener('click', mobileNavMenuOutsideClickHandler);
|
|
})
|
|
mobileNavMenuTrigger.addEventListener('blur', function () {
|
|
document.removeEventListener('click', mobileNavMenuOutsideClickHandler);
|
|
})
|
|
</script>
|