diff options
Diffstat (limited to 'nextcloudappstore/core/templates/nav.html')
| -rw-r--r-- | nextcloudappstore/core/templates/nav.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/nextcloudappstore/core/templates/nav.html b/nextcloudappstore/core/templates/nav.html index 3f7555e792..49c389773f 100644 --- a/nextcloudappstore/core/templates/nav.html +++ b/nextcloudappstore/core/templates/nav.html @@ -1,5 +1,166 @@ {% load static %} {% load i18n %} +<nav class="bg-gray-800 nc-banner-bg"> + <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8"> + <div class="relative flex items-center justify-between h-16"> + <div class="flex items-center px-2 lg:px-0"> + <div class="flex-shrink-0"> + <img class="block h-8 w-auto" src="{% static 'assets/img/small-logo.png' %}" alt="Homepage"> + </div> + <div class="hidden lg:block lg:ml-6"> + <div class="flex space-x-4"> + <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> + <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">{% trans 'Apps' %}</a> + <!-- Profile dropdown --> + <div class="ml-4 relative flex-shrink-0"> + <div> + <button type="button" class="text-white hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" aria-expanded="false" aria-haspopup="true"> + {% trans 'Categories' %} + </button> + </div> + + <!-- + Dropdown menu, show/hide based on menu state. + + Entering: "transition ease-out duration-100" + From: "transform opacity-0 scale-95" + To: "transform opacity-100 scale-100" + Leaving: "transition ease-in duration-75" + From: "transform opacity-100 scale-100" + To: "transform opacity-0 scale-95" + --> + <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> + {% if categories %} + <a class="block px-4 py-2 text-sm text-gray-700 {% if cat.id == current_category.id and not object and not is_featured_category %}bg-gray-100{% endif %}" role="menuitem" tabindex="-1" href="{% url 'home' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">{% trans 'All apps' %}</a> + <a class="{% if cat.id == current_category.id and not object and is_featured_category %}bg-gray-100{% endif %} block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'featured' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">{% trans 'Featured apps' %}</a> + + {% for cat in categories %} + <a class="{% if cat.id == current_category.id %}bg-gray-100{% endif %} block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'category-app-list' cat.id %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">{{ cat.name }}</a> + {% endfor %} + {% endif %} + </div> + </div> + </div> + </div> + </div> + <div class="flex-1 flex justify-center px-2 lg:ml-6 lg:justify-end"> + <div class="max-w-lg w-full lg:max-w-xs"> + <form method="get" + action="{% if current_category %}{{ request.path }} + {% else %}{% url 'home' %} + {% endif %}"> + <label for="search" class="sr-only">Search in all apps</label> + <div class="relative"> + <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> + <!-- Heroicon name: solid/search --> + <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> + <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" /> + </svg> + </div> + <input type="search" name="search" role="search" value="{{ search_query }}" + class="block w-full pl-10 pr-3 py-2 border border-transparent rounded-md leading-5 bg-gray-700 text-gray-300 placeholder-gray-400 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 sm:text-sm" + placeholder="{% if current_category %}{% blocktrans with category=current_category.name %}Search in {{ category }}{% endblocktrans %}{% elif is_featured_category %}{% trans 'Search in featured apps' %}{% else %}{% trans 'Search in all apps' %}{% endif %}"> + </div> + </div> + </form> + </div> + <div class="flex lg:hidden"> + <!-- Mobile menu button --> + <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> + <span class="sr-only">Open main menu</span> + <!-- + Icon when menu is closed. + + Heroicon name: outline/menu + + Menu open: "hidden", Menu closed: "block" + --> + <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"> + <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> + </svg> + <!-- + Icon when menu is open. + + Heroicon name: outline/x + + Menu open: "block", Menu closed: "hidden" + --> + <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"> + <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> + </svg> + </button> + </div> + <div class="hidden lg:block lg:ml-4"> + <div class="flex items-center"> + <!-- Profile dropdown --> + <div class="ml-4 relative flex-shrink-0"> + <div> + <button type="button" class="flex-shrink-0 bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> + <span class="sr-only">Open user menu</span> + <!-- Heroicon name: outline/user-circle --> + <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> + <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> + </svg> + </button> + </div> + <!-- + Dropdown menu, show/hide based on menu state. + + Entering: "transition ease-out duration-100" + From: "transform opacity-0 scale-95" + To: "transform opacity-100 scale-100" + Leaving: "transition ease-in duration-75" + From: "transform opacity-100 scale-100" + To: "transform opacity-0 scale-95" + --> + <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> + {% if request.user.is_superuser %} + <a class="block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'admin:index' %}">{% trans 'Admin' %}</a> + {% endif %} + {% if request.user.is_authenticated %} + <a class="block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'user:account' %}">{% trans 'Account' %}</a> + <a class="block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'account_logout' %}">{% trans 'Log out' %}</a> + {% else %} + <a class="block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'account_login' %}">{% trans 'Log in' %}</a> + <a class="block px-4 py-2 text-sm text-gray-700" role="menuitem" href="{% url 'account_signup' %}">{% trans 'Register' %}</a> + {% endif %} + </div> + </div> + </div> + </div> + </div> + </div> + + <!-- Mobile menu, show/hide based on menu state. --> + <div class="lg:hidden" id="mobile-menu"> + <div class="px-2 pt-2 pb-3 space-y-1"> + <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> + <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a> + <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Team</a> + <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Projects</a> + <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a> + </div> + <div class="pt-4 pb-3 border-t border-gray-700"> + <div class="mt-3 px-2 space-y-1"> + {% if request.user.is_superuser %} + <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" href="{% url 'admin:index' %}">{% trans 'Admin' %}</a> + {% endif %} + {% if request.user.is_authenticated %} + <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" role="menuitem" href="{% url 'user:account' %}">{% trans 'Account' %}</a> + <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" role="menuitem" href="{% url 'account_logout' %}">{% trans 'Log out' %}</a> + {% else %} + <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700" role="menuitem" href="{% url 'account_login' %}">{% trans 'Log in' %}</a> + <a class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"role="menuitem" href="{% url 'account_signup' %}">{% trans 'Register' %}</a> + {% endif %} + <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a> + <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a> + <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a> + </div> + </div> + </div> +</nav> + +<!-- <div class="banner"> <div class="container"> <a class="brand" href="/"><img class="logo" alt="Logo" src="{% static 'assets/img/small-logo.png' %}" title="nextcloud.com"><div class="site-title"></div></a> @@ -98,3 +259,4 @@ </div> </div> </nav> +--> |