<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
<a class="navbar-brand" href="https://styleguide.youthweb.net/components/preview/timeline"><img src="../../dist/img/logo-16.png" alt="Youthweb" /></a>
<div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
</li>
</ul>
<search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
</div>
<a class="nav-link-with-icon ml-auto" href="https://styleguide.youthweb.net/components/preview/messenger">
<span class="icon icon-chat"></span> <span class="navigation__notification-indicator"></span> <!-- TODO: <unread-messages></unread-messages> -->
</a>
<a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/notifications">
<span class="icon icon-bell"></span><span class="navigation__notification-indicator"></span> </a>
<a class="nav-link-with-icon" href="https://styleguide.youthweb.net/components/preview/admin">
<span class="icon icon-gauge"></span>
</a>
<button class="navbar-btn-avatar ml-2" type="button" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover" aria-expanded="false" aria-label="Toggle profile">
<img class="rounded-circle" src="https://eu.ui-avatars.com/api/?name=John+Doe&p=square35">
</button>
<button class="navbar-toggler d-lg-none ml-2" type="button" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon icon-menu"></span>
</button>
</nav>
<div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">
<div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
<div class="navbar-collapse">
<div class="w-100">
<search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/forum">Forum</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Zeugnisse</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/praystation">Gebetsanliegen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/groups">Gruppen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/events">Events</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://styleguide.youthweb.net/components/preview/live">Impulse</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/team">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/docs/index.html">Hilfe</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/develop">Develop</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/privacy">Datenschutz</a>
</li>
<li class="nav-item">
<a class="nav-link " href="https://styleguide.youthweb.net/components/preview/page/impressum">Impressum</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
Facebook
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
Instagram
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
Twitter
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
Pinterest
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
Shop
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
<div class="float-right m-2" onclick="event.stopPropagation();">
<div class="card card-profile mb-4 ">
<div class="card-header bg-secondary"></div>
<div class="card-body text-center">
<a href="https://styleguide.youthweb.net/components/preview/user">
<img class="card-profile-img" src="https://eu.ui-avatars.com/api/?name=John+Doe">
</a>
<h6 class="card-title">
<a class="text-inherit" href="user">John Doe</a>
</h6>
<p class="mb-4">Ut nam fabulas ponderum assentior</p><!-- Verhältnis zu Lebensmotto? -->
<ul class="card-menu">
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/friends" class="text-inherit">
Freunde
<h6 class="my-0">17</h6>
</a>
</li>
<li class="card-menu-item">
<a href="https://styleguide.youthweb.net/components/preview/participation/hall-of-fame" class="text-inherit">
CP
<h6 class="my-0">352</h6>
</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="">
<a href="https://styleguide.youthweb.net/components/preview/account/settings" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> Account</a>
<a href="https://styleguide.youthweb.net/components/preview/account/profile_settings" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> Profil</a>
<a href="https://styleguide.youthweb.net/components/preview/account/ignorelist" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> Ignoreliste</a>
</div>
</li>
<li class="list-group-item"><a href="https://styleguide.youthweb.net/components/preview/logout"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</div>
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title">Über mich<small> · <a href="https://styleguide.youthweb.net/components/preview/user">Zum Steckbrief</a></small></h6>
<p><i class="fas fa-user"></i> Angemeldet vor 5 Jahren
</p>
<p>
<i class="fas fa-star"></i> 21.02.1995 (32 Jahre alt)
</p>
<p>
<i class="fas fa-user-friends"></i> Gruppen: <a href="https://styleguide.youthweb.net/components/preview/groups/1234">Github</a>
</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-yw-gradient-primary app-navbar" id="mainNavigation">
<a class="navbar-brand" href="{{ url('landing_page') }}"><img src="{{ asset('img/logo-16.png') }}" alt="{{ 'Youthweb'|trans }}"/></a>
<div class="collapse navbar-collapse" id="navbarResponsive" data-parent="#mainNavigation">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url('forum_categories_list') }}">{{ 'Forum'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('liveposts_list') }}">{{ 'Zeugnisse'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('legacy', {'route':'prayrequests'}) }}">{{ 'Gebetsanliegen'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('legacy', {'route':'groups'}) }}">{{ 'Gruppen'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('events_list') }}">{{ 'Events'|trans }}</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="{{ url('legacy', {'route':'impulses/posts'}) }}">{{ 'Impulse'|trans }}</a>
</li>
</ul>
<search-user source="/" type="users" target="user/{0}" id="autosuggest__navbar"></search-user>
</div>
{% if has_unread_messages is not defined %}
{% set has_unread_messages = false %}
{% endif %}
<a class="nav-link-with-icon ml-auto" href="{{ url('legacy', {'route':'messages'}) }}">
<span class="icon icon-chat"></span> {% if has_unread_messages %}<span class="navigation__notification-indicator"></span>{% endif %}
<!-- TODO: <unread-messages></unread-messages> -->
</a>
{% if has_unread_notifications is not defined %}
{% set has_unread_notifications = false %}
{% endif %}
<a class="nav-link-with-icon" href="{{ url('notifications_list') }}">
<span class="icon icon-bell"></span>{% if has_unread_notifications %}<span class="navigation__notification-indicator"></span>{% endif %}
</a>
{% if show_admin_context is not defined %}
{% set show_admin_context = false %}
{% endif %}
{% if admin_context_url is not defined %}
{% set admin_context_url = url('admin_index') %}
{% endif %}
{% if show_admin_context %}
<a class="nav-link-with-icon" href="{{ admin_context_url|raw }}">
<span class="icon icon-gauge"></span>
</a>
{% endif %}
<button
class="navbar-btn-avatar ml-2"
type="button"
data-toggle="collapse"
data-target="#profilePopover"
aria-controls="profilePopover"
aria-expanded="false"
aria-label="Toggle profile">
<img class="rounded-circle" src="{{ auth_profile.picture_url|withPreset('square35') }}">
</button>
<button
class="navbar-toggler d-lg-none ml-2"
type="button"
data-toggle="collapse"
data-target="#navigationPopover"
aria-controls="navigationPopover"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon icon-menu"></span>
</button>
</nav>
<div id="navigationPopover" class="collapse w-100 d-lg-none" role="dialog" data-toggle="collapse" data-target="#navigationPopover" aria-controls="navigationPopover">
<div class="navbar navbar-dark bg-yw-gradient-primary" onclick="event.stopPropagation();">
<div class="navbar-collapse">
<div class="w-100">
<search-user source="/" type="users" target="user/{0}" id="autosuggest__popover"></search-user>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{{ url('forum_categories_list') }}">{{ 'Forum'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('liveposts_list') }}">{{ 'Zeugnisse'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('legacy', {'route':'prayrequests'}) }}">{{ 'Gebetsanliegen'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('legacy', {'route':'groups'}) }}">{{ 'Gruppen'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url('events_list') }}">{{ 'Events'|trans }}</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="{{ url('legacy', {'route':'impulses/posts'}) }}">{{ 'Impulse'|trans }}</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link " href="{{ url('blog_view_posts') }}">{{ 'Blog'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link " href="{{ url('legacy', {'route':'page/team'}) }}">{{ 'Über uns'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link " href="{{ url('docs_page', {'path':'index.html'}) }}">{{ 'Hilfe'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link " href="{{ url('legacy', {'route':'page/develop'}) }}">{{ 'Develop'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link " href="{{ url('legacy', {'route':'page/privacy'}) }}">{{ 'Datenschutz'|trans }}</a>
</li>
<li class="nav-item">
<a class="nav-link " href="{{ url('legacy', {'route':'page/impressum'}) }}">{{ 'Impressum'|trans }}</a>
</li>
</ul>
<div class="dropdown-divider"></div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.facebook.com/youthweb.net">
{{ 'Facebook'|trans }}
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.instagram.com/youthwebnet/">
{{ 'Instagram'|trans }}
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://twitter.com/youthwebnet">
{{ 'Twitter'|trans }}
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://www.pinterest.de/youthwebnet/">
{{ 'Pinterest'|trans }}
</a>
</li>
<li class="nav-item">
<a class="app-notifications nav-link" href="https://shop.spreadshirt.de/youthweb">
{{ 'Shop'|trans }}
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="profilePopover" class="collapse w-100" role="dialog" data-toggle="collapse" data-target="#profilePopover" aria-controls="profilePopover">
<div class="float-right m-2" onclick="event.stopPropagation();">
<div class="card card-profile mb-4 ">
<div class="card-header bg-secondary"></div>
<div class="card-body text-center">
<a href="{{ url('legacy', {'route':'users/'~auth_profile.id}) }}">
<img class="card-profile-img" src="{{ auth_profile.picture_url }}">
</a>
<h6 class="card-title">
<a class="text-inherit" href="user">{{ auth_profile.username }}</a>
</h6>
<p class="mb-4">{{ auth_profile.picture_description }}</p><!-- Verhältnis zu Lebensmotto? -->
<ul class="card-menu">
<li class="card-menu-item">
<a href="{{ url('legacy', {'route':'users/'~auth_profile.id~'/friends'}) }}" class="text-inherit" >
{{ 'Freunde'|trans }}
<h6 class="my-0">{{ auth_profile.friends_count }}</h6>
</a>
</li>
<li class="card-menu-item">
<a href="{{ url('participation_hall_of_fame') }}" class="text-inherit" >
{{ 'CP'|trans }}
<h6 class="my-0">{{ auth_profile.community_points_count }}</h6>
</a>
</li>
</ul>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div class="">
<a href="{{ url('legacy', {'route':'account/settings'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-user-cog"></i> {{ 'Account'|trans }}</a>
<a href="{{ url('legacy', {'route':'account/profile_settings'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-user-circle"></i> {{ 'Profil'|trans }}</a>
<a href="{{ url('legacy', {'route':'account/ignorelist'}) }}" class="btn btn-secondary btn-block"><i class="fas fa-eye-slash"></i> {{ 'Ignoreliste'|trans }}</a>
</div>
</li>
<li class="list-group-item"><a href="{{ logout_url() }}"><i class="fas fa-sign-out-alt"></i> {{ 'Logout'|trans }}</a></li>
</ul>
</div>
<div class="card mb-4">
<div class="card-body">
<h6 class="card-title">{{ 'Über mich'|trans }}<small> · <a href="{{ url('legacy', {'route':'users/'~auth_profile.id}) }}">{{ 'Zum Steckbrief'|trans }}</a></small></h6>
<p><i class="fas fa-user"></i> {{ 'Angemeldet vor 1 Jahr|Angemeldet vor %count% Jahren'|trans({'%count%':auth_profile.created_years_ago}) }}
</p>
<p>
<i class="fas fa-star"></i> {{ '%date% (%years% Jahre alt)'|trans({'%date%':auth_profile.birthday|date("d.m.Y"), '%years%':auth_profile.age_in_years}) }}
</p>
<p>
<i class="fas fa-user-friends"></i> {{ 'Gruppen:'|trans }} {% for group_data in auth_profile.groups %}<a href="{{ url('legacy', {'route':'groups/'~group_data.id}) }}">{{ group_data.name }}</a>{% if not loop.last %}, {% endif %}{% else %}{{ 'Keine'|trans }}{% endfor %}
</p>
</div>
</div>
</div>
</div>
{
"auth_profile": {
"id": "12345",
"username": "John Doe",
"picture_url": "https://eu.ui-avatars.com/api/?name=John+Doe",
"picture_description": "Ut nam fabulas ponderum assentior",
"background": "http://localhost:3000/dist/img/samantha-stortecky-sP5CaWEN7Do-unsplash.jpg",
"community_points_count": 352,
"friends_count": 17,
"birthday": "1995-02-21",
"age_in_years": "32",
"created_years_ago": "5",
"groups": [
{
"id": 1234,
"name": "Github"
}
]
},
"has_unread_messages": true,
"has_unread_notifications": true,
"show_admin_context": true
}
Die sticky Header-Navigation, die auf allen Seiten oben angeigt werden soll.