Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#1378] Updated new menus to use dynamic pages #613

Merged
merged 3 commits into from
May 13, 2023
Merged

[#1378] Updated new menus to use dynamic pages #613

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9ddb4d1
:art: [#1378] Added mobile menu and two desktop menus with notifications
jiromaykin Apr 20, 2023
8c4e177
[#1378] Updated new menus to use dynamic pages
May 11, 2023
458dc2f
Merge branch 'develop' into feature/1378-dynamic-menu
alextreme May 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/open_inwoner/cms/context_processors.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
from django.db.models import Q

from cms.models import Page


def active_apphooks(request):
"""
add lookup of active CMS apps to context

"cms_apps": {
"ProfileApphook": True,
"profile": True,
}
"""
active_app_hooks = (
Page.objects.published()
.exclude(Q(application_urls="") | Q(application_urls__isnull=True))
.values_list("application_urls", "application_namespace")
)

lookup = dict()

for classname, namespace in active_app_hooks:
lookup[classname] = True
lookup[namespace] = True

context = {"cms_apps": lookup}

return context
2 changes: 1 addition & 1 deletion src/open_inwoner/components/templates/components/Header/Breadcrumbs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<li class="breadcrumbs__list-item">
{% if forloop.first %}
<a class="link link--secondary" href="{{url}}" title="{{ name }}" aria-label="{{ name }}">
{% icon icon="apps" %}
{% icon icon="home" outlined=True %}
</a>
{% else %}
{% icon icon="chevron_right" %}
Expand Down
180 changes: 81 additions & 99 deletions src/open_inwoner/components/templates/components/Header/Header.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,79 +5,67 @@
{% accessibility_header request=request %}
<header class="header" aria-label="Navigatie header">
<div class="header__container">
{% firstof config.logo.default_alt_text config.name as logo_alt_text %}
{% logo src=config.logo.file.url alt=logo_alt_text svg_height=75 %}

<div class="header__menu">
<button class="header__button">
<div class="header__menu-icon">
<span class="closed">{% icon icon="menu" %}</span><span class="open">{% icon icon="close" %}</span>
<span class="closed">{% trans "Menu" %}</span>
<span class="open">{% trans "Sluiten" %}</span>
</div>
</button>
{% firstof config.logo.default_alt_text config.name as logo_alt_text %}
{% logo src=config.logo.file.url alt=logo_alt_text svg_height=75 %}

{% if request.user.is_authenticated %}
<span class="nav-login--icon">{% icon icon="how_to_reg" icon_position="before" icon_outlined=True %}</span>
{% elif config.login_show %}
<span class="nav-login--icon">
{% url 'login' as login_url %}
{% trans "Inloggen" as login %}
{% button text="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %}
</span>
{% endif %}

<dialog class="header__submenu">
<nav class="header__actions" aria-label="Zoek navigatie mobiel">
{% url 'search:search' as search_url %}
{% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=False %}
{% input search_form.query no_label=True %}
{% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
{% endrender_form %}
</nav>

{% if cms_apps.products %}
<nav class="header__actions" aria-label="Zoek navigatie mobiel">
{% url 'search:search' as search_url %}
{% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=False %}
{% input search_form.query no_label=True %}
{% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
{% endrender_form %}
</nav>
{% endif %}

<nav class="primary-navigation" aria-label="Hoofd navigatie">
<ul class="primary-navigation__list">
{% show_menu 0 100 100 100 "cms/menu/primary.html" %}

{# <li class="primary-navigation__list-item">#}
{# {% trans "Home" as link_text %}#}
{# {% url 'root' as link %}#}
{# {% link text=link_text href=link icon="apps" icon_position="before" %}#}
{# </li>#}
{# <li class="primary-navigation__list-item dropdown-nav__toggle">#}
{# <a href="#" class="link link--toggle link--icon link--icon-position-before" aria-label="{% trans "Onderwerpen" %}" title="{% trans "Onderwerpen" %}">#}
{# <span >{% trans "Onderwerpen" %}</span>#}
{# <span aria-hidden="true" class="material-icons-outlined ">description</span>#}
{# {% icon icon="expand_more" icon_position="after" icon_outlined=True %}#}
{# </a>#}
{##}
{# {% if categories %}#}
{# <ul class="primary-navigation__list subpage-list">#}
{# {% for category in categories %}#}
{# <li class="primary-navigation__list-item">#}
{# {% url 'products:category_detail' slug=category.slug as category_href %}#}
{# {% link text=category.name href=category_href %}#}
{# </li>#}
{# {% endfor %}#}
{# </ul>#}
{# {% endif %}#}
{# </li>#}
{##}
{# {% if request.user.is_authenticated %}#}
{# <li class="primary-navigation__list-item">#}
{# {% link text=_("Mijn profiel") href='profile:detail' icon="inventory_2" icon_position="before" icon_outlined=True %}#}
{# </li>#}
{# <li class="primary-navigation__list-item">#}
{# {% link text=_('Mijn berichten') href='inbox:index' icon="inbox" icon_position="before" %}#}
{# {% with request.user.get_new_messages_total as total_messages %}#}
{# {% if total_messages %}#}
{# {% with "("|addstr:total_messages|addstr:")" as message_total %}#}
{# {% link text=message_total href='inbox:index' secondary=True %}#}
{# {% endwith %}#}
{# {% endif %}#}
{# {% endwith %}#}
{# </li>#}
{##}
{# {% if request.user.bsn and config.show_cases %}#}
{# <li class="primary-navigation__list-item">#}
{# {% link text=_('Mijn aanvragen') href='cases:open_cases' icon="inventory_2" icon_position="before" icon_outlined=True %}#}
{# </li>#}
{# {% endif %}#}
{# {% if show_plans %}#}
{# <li class="primary-navigation__list-item">#}
{# {% link text=_('Samenwerken') href='collaborate:plan_list' icon="people" icon_outlined=True icon_position="before" %}#}
{# </li>#}
{# {% endif %}#}
{# {% endif %}#}

<li class="primary-navigation__list-item">
{% trans "Overzicht" as link_text %}
{% link text=link_text href="/" icon="grid_view" icon_position="before" %}
</li>

{% if cms_apps.products and categories %}
<li class="primary-navigation__list-item dropdown-nav__toggle">
<a href="#" class="link link--toggle link--icon link--icon-position-before" aria-label="{% trans "Onderwerpen" %}" title="{% trans "Onderwerpen" %}">
<span >{% trans "Onderwerpen" %}</span>
<span aria-hidden="true" class="material-icons-outlined ">description</span>
{% icon icon="expand_more" icon_position="after" icon_outlined=True %}
</a>

<ul class="primary-navigation__list subpage-list">
{% for category in categories %}
<li class="primary-navigation__list-item">
{% url 'products:category_detail' slug=category.slug as category_href %}
{% link text=category.name href=category_href %}
</li>
{% endfor %}
</ul>
</li>
{% endif %}

{% show_menu_below_id "home" 0 100 100 100 "cms/menu/primary.html" %}

{% if has_general_faq_questions %}
<li class="primary-navigation__list-item">
{% link text=_('FAQ') href='general_faq' icon="help_outline" icon_position="before" icon_outlined=True %}
Expand All @@ -86,64 +74,58 @@
</ul>
</nav>

<nav class="header__actions" aria-label="Navigatie mobiel voor inloggen en uitloggen">
<section class="header__actions" aria-label="Navigatie mobiel voor inloggen en uitloggen">
<div class="header__text-actions">
<p class="p">
{% if request.user.is_authenticated %}{% icon icon="person_outline" %}{% trans "Welkom" %} {{ request.user.get_short_name }}{% endif %}
</p>

{% if request.user.is_authenticated %}
<p class="p">
{% icon icon="person" icon_position="before" icon_outlined=True %}{% trans "Ingelogd als" %} {{ request.user.get_short_name }}
</p>
<ul class="header__list">
<li class="header__list-item">
{% trans "Logout" as logout %}
{% link text=logout href=request.user.get_logout_url icon="arrow_forward" icon_position="before" primary=True %}
</li>
</ul>
{% elif config.login_show %}
<ul class="header__list">
<li class="header__list-item">
{% url 'login' as login_url %}
{% trans "Login" as login %}
{% button text=login href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %}
</li>
</ul>
<p></p>
{% endif %}
</div>
</nav>
</section>


</dialog>
</div>
{#end of mobile menu#}

<nav class="header__actions" aria-label="Zoek navigatie desktop">
<div class="header__text-actions">
<p class="p">
{% if request.user.is_authenticated %}{% trans "Welkom" %} {{ request.user.get_full_name }}{% endif %}
</p>

{% if request.user.is_authenticated %}
<ul class="header__list">
<li class="header__list-item">
{% trans "Logout" as logout %}
{% link text=logout href=request.user.get_logout_url primary=True %}
</li>
</ul>
{% elif config.login_show %}
<ul class="header__list">
<li class="header__list-item">
{% url 'login' as login_url %}
{% trans "Login" as login %}
{% link text=login href=login_url primary=True %}
</li>
</ul>
{% endif %}
</div>
{% firstof config.logo.default_alt_text config.name as logo_alt_text %}
<div class="logo__desktop">{% logo src=config.logo.file.url alt=logo_alt_text svg_height=75 %}</div>

{% primary_navigation categories=categories request=request has_general_faq_questions=has_general_faq_questions cms_apps=cms_apps show_plans=show_plans %}

{% if cms_apps.products %}
<nav class="header__actions" aria-label="Zoek navigatie desktop">
{% url 'search:search' as search_url %}
{% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=True %}
{% input search_form.query no_label=True %}
{% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
{% endrender_form %}
</nav>
{% endif %}

{% navigation_authenticated categories=categories request=request has_general_faq_questions=has_general_faq_questions %}

{% primary_navigation categories=categories request=request has_general_faq_questions=has_general_faq_questions %}
</div>
</header>

{% if cms_apps.products %}
<section class="search search__mobile">
<nav class="search__actions " aria-label="Zoek navigatie mobiel">
{% url 'search:search' as search_url %}
{% render_form form=search_form method="GET" form_action=search_url inline=True spaceless=False %}
{% input search_form.query no_label=True %}
{% form_actions primary_icon="search" primary_text=_("Zoeken") hide_primary_text=True %}
{% endrender_form %}
</nav>
</section>
{% endif %}
38 changes: 38 additions & 0 deletions src/open_inwoner/components/templates/components/Header/NavigationAuthenticated.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
{% load i18n header_tags form_tags icon_tags link_tags string_tags solo_tags menu_tags button_tags %}

{% get_solo "configurations.SiteConfiguration" as config %}

{% if request.user.is_authenticated %}

<nav class="primary-navigation primary-navigation__authenticated" aria-label="Navigatie na inloggen">
<ul class="primary-navigation__list">
<li class="primary-navigation__list-item">
{% button text=_('Welkom ')|addstr:request.user.get_short_name type="button" icon="expand_more" icon_position="after" icon_outlined=True transparent=True extra_classes="primary-navigation--toggle" %}

<ul class="primary-navigation__list subpage-list">

{% show_menu_below_id "home" 0 100 100 100 "cms/menu/primary.html" %}

{% if has_general_faq_questions %}
<li class="primary-navigation__list-item">
{% link text=_('FAQ') href='general_faq' icon="help_outline" icon_position="before" icon_outlined=True %}
</li>
{% endif %}

<li class="header__list-item">
{% trans "Logout" as logout %}
{% link text=logout href=request.user.get_logout_url icon="logout" icon_position="before" primary=True %}
</li>
</ul>
</li>
</ul>
</nav>
{% elif config.login_show %}
<div class="desktop-login">
<span class="desktop-login__link">
{% url 'login' as login_url %}
{% trans "Inloggen" as login %}
{% button text="Inloggen" href=login_url icon="person" icon_position="before" primary=True icon_outlined=True transparent=True %}
</span>
</div>
{% endif %}
Loading