[SETTINGS][ROUTES][CONTROLLER] Settings overhaul, refactoring to accommodate new global settings view. WIP, component settings aren't shown at the moment.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>
This commit is contained in:
Eliseu Amaro 2021-07-29 17:29:25 +01:00 committed by Hugo Sales
parent eed74972c5
commit 6dd0292397
Signed by untrusted user: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
17 changed files with 147 additions and 438 deletions

View File

@ -1,8 +1,7 @@
<div>
<figure>
<img class="u-photo" src="{{ path('attachment_thumbnail', thumbnail_parameters) }}" alt="{{ attachment.getTitle() }}">
<figure>
<img class="u-photo" src="{{ path('attachment_thumbnail', thumbnail_parameters) }}"
alt="{{ attachment.getTitle() }}">
<figcaption><a
href="{{ path('attachment_show', {'id': attachment.getId()}) }}">{{ attachment.getTitle() }}</a>
</figcaption>
</figure>
</div>
</figure>

View File

@ -274,26 +274,23 @@ html {
.note-attachments {
display: flex;
}
.note-attachments > div {
margin: var(--small-size) 0 0 0;
border-radius: var(--unit-size);
background-color: var(--translucent);
}
.note-attachments > div figure {
.note-attachments > figure {
display: flex;
flex-direction: column;
margin: 0;
border-radius: var(--unit-size);
background-color: var(--translucent);
padding: var(--small-size);
}
.note-attachments > div figure figcaption {
.note-attachments > figure figcaption {
display: flex;
padding-top: var(--small-size);
}
.note-attachments > div figure img,
.note-attachments > div figure video {
.note-attachments > figure img,
.note-attachments > figure video {
width: 100%;
height: auto;
}

View File

@ -10,43 +10,61 @@
background-blend-mode: multiply;
}
.main-nav h1 {
margin-bottom: var(--unit-size);
}
.main-nav hr {
all: unset;
display: block;
height: 2px;
background-image: linear-gradient(to right, var(--translucent-light), transparent 90%);
margin-top: var(--unit-size);
margin-bottom: var(--unit-size);
}
.main-nav ul {
margin-top: var(--main-size);
background-color: var(--translucent);
border: 2px solid var(--bg2);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
}
.main-nav ul li {
font-size: var(--medium-size);
border-radius: var(--unit-size);
box-sizing: border-box;
padding: var(--unit-size);
margin-bottom: var(--small-size);
background-color: var(--translucent);
}
.form {
display: flex;
font-size: var(--main-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
}
background-image: radial-gradient(ellipse at 10% 10%, var(--bg3), var(--accent-blue)),
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAElBMVEUAAACUkpSEhoSMioyMjoyEgoRr6djFAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAU1JREFUKJEVUcl1xTAIpAVLSgECXIAYUoCAX0Bi919LlCPLm5ValiOUUe2+ZRVFuYpKXFsUX9aIp0V6GtC8VRhNL0X2fikvswhKrNDhes7pbpPkufFAtI0B76LEjfc2bgdHDk6RX4A/sjt6LCylfoYpNYYJx/9COhIugsjluzN9VGZ/Hnl51jIH2ba+Ywsy2RJCFdoDe8Obw61TXGAv+ewExMRJs7gd7YcimPuk42uMqY2VJ1fK+bDL32rb7kwok/la/u7Mrz7Xf0DTssSP2Btp1ZS0zw35tM/SsJKgWNLcRh+/th1QqntwtM3Tx0LNosoBYbM3qjJFiMeLsMH2i5BcQdU3n9sJHOE1Hoqn1GA/bm4s0YkVB/y4r0PbltF32FpljXmdlOOwbDvFWkoDYLppSG4pnM6UxX3Src1lhXeU36FOu3o+R2vNaHME/wESUl9/3zMniwAAAABJRU5ErkJggg==);
background-blend-mode: multiply;
.form .separator {
all: unset;
display: flex;
width: 2px;
background-image: linear-gradient(to bottom, var(--accent-blue), transparent 90%);
margin-right: var(--unit-size);
}
.form form {
width: 100%;
}
.form #save {
margin-top: var(--main-size);
display: flex;
flex-direction: column;
font-size: var(--medium-size);
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
background-color: var(--translucent);
}
.form #save div {
@ -68,6 +86,7 @@
border-radius: var(--unit-size);
padding: var(--unit-size);
box-sizing: border-box;
border: 2px solid var(--bg2);
background-color: var(--translucent);
}
@ -87,16 +106,17 @@
fill: var(--white);
}
.section-title-settings section {
margin-top: var(--unit-size);
}
.section-title-settings summary:focus,
.section-title-settings summary:hover {
border-radius: var(--unit-size) !important;
background: var(--white) !important;
color: var(--bg1) !important;
transition: var(--cubic-transition);
}
.section-title-settings summary:focus {
padding: var(--unit-size) var(--small-size) var(--unit-size) var(--small-size) !important;
transition: var(--cubic-transition);
}
.section-title-settings summary:focus .icon-details-open,
@ -112,7 +132,6 @@
}
.section-title-settings[open] .set-nav li:first-of-type {
margin-top: var(--unit-size);
}
.section-title-settings[open] .set-nav li:last-of-type {

View File

@ -57,6 +57,28 @@ use Symfony\Component\HttpFoundation\Request;
class UserPanel extends AbstractController
{
/**
* Return main settings page forms
*
* @param Request $request
*
* @throws Exception
*
* @return array
*/
public function all_settings(Request $request)
{
$personal_form = $this->personal_info($request);
$account_form = $this->account($request);
$notifications_form = $this->notifications($request);
return ['_template' => 'settings/base.html.twig',
'prof' => $personal_form->createView(),
'acc' => $account_form->createView(),
'tabbed_forms_notify' => $notifications_form,
];
}
/**
* Local user personal information panel
*/
@ -74,10 +96,13 @@ class UserPanel extends AbstractController
['self_tags', TextType::class, ['label' => _m('Self Tags'), 'required' => false, 'transformer' => ArrayTransformer::class, 'help' => _m('Tags for yourself (letters, numbers, -, ., and _), comma- or space-separated.')]],
['save', SubmitType::class, ['label' => _m('Save')]],
];
$extra_step = function ($data, $extra_args) use ($user) { $user->setNickname($data['nickname']); };
$extra_step = function ($data, $extra_args) use ($user) {
$user->setNickname($data['nickname']);
};
$form = Form::handle($form_definition, $request, $user, $extra, $extra_step, [['self_tags' => $extra['self_tags']]]);
return ['_template' => 'settings/profile.html.twig', 'prof' => $form->createView()];
return $form;
//return ['_template' => 'settings/profile.html.twig', 'prof' => $form->createView()];
}
/**
@ -98,7 +123,8 @@ class UserPanel extends AbstractController
$form = Form::handle($form_definition, $request, $user);
return ['_template' => 'settings/account.html.twig', 'acc' => $form->createView()];
return $form;
//return ['_template' => 'settings/account.html.twig', 'acc' => $form->createView()];
}
/**
@ -157,10 +183,13 @@ class UserPanel extends AbstractController
$tabbed_forms[$transport_name] = Form::create($f);
}
$tabbed_forms = F\map($tabbed_forms, function ($f) { return $f->createView(); });
return [
$tabbed_forms = F\map($tabbed_forms, function ($f) {
return $f->createView();
});
return $tabbed_forms;
/*return [
'_template' => 'settings/notifications.html.twig',
'tabbed_forms' => $tabbed_forms,
];
];*/
}
}

View File

@ -65,9 +65,10 @@ abstract class Main
}
// Settings pages
$r->connect('settings', '/settings', RedirectController::class, ['defaults' => ['route' => 'settings_personal_info']]);
foreach (['personal_info', 'notifications', 'account'] as $s) {
$r->connect('settings_' . $s, '/settings/' . $s, [C\UserPanel::class, $s]);
}
//$r->connect('settings', '/settings', RedirectController::class, ['defaults' => ['route' => 'settings']]);
$r->connect('settings', '/settings/', [C\UserPanel::class, 'all_settings']);
/*foreach (['personal_info', 'notifications', 'account'] as $s) {
$r->connect('settings', '/settings/', [C\UserPanel::class, $s]);
}*/
}
}

View File

@ -1,31 +0,0 @@
<div class="actor">
<div class="actor-content">
<div class="actor-info">
{% set nickname = actor.getNickname() %}
<div class="actor-avatar">
<img class="icon icon-avatar" src="{{ actor.getAvatarUrl() }}" alt="{{ nickname }}'s avatar">
</div>
<div class="actor-nickname-and-tags">
<b id="nick">{{ nickname }}</b>
{% set actor_tags = actor.getSelfTags() %}
<div class="tags">
{% if actor_tags %}
{% for tag in actor_tags %}
<a href='#'><i> #{{ tag }} </i></a>
{% endfor %}
{% else %}
<i> {{ '(No tags)' | trans }} </i>
{% endif %}
</div>
</div>
</div>
{% set actor_bio = actor.getBio() %}
<div class="actor-bio">
{% if actor_bio %}
<p>{{ actor_bio }}</p>
{% else %}
<p>{{ '(No bio)' | trans }}</p>
{% endif %}
</div>
</div>
</div>

View File

@ -12,10 +12,7 @@
{% block body %}
<div class="content">
<div style="display: block">
<p> {{ title | escape }} </p>
<a href="{{ download }}"> {{ 'Download link' | trans }}</a>
{% include '/attachments/view.html.twig' with {'attachment': attachment} only %}
</div>
</div>
{% endblock body %}

View File

@ -1,117 +0,0 @@
{% extends 'stdgrid.html.twig' %}
{% block meta %}
{{ parent() }}
{% endblock %}
{% block title %}Actors{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %}
{% block header %}
{{ parent() }}
{% endblock %}
{% block left %}
{{ parent() }}
{% endblock %}
{% block body %}
<div class="content">
{% if post_form is defined %}
{{ form_start(post_form) }}
<div class="create-notice">
<div class="target">
<div class="target-top">
{{ form_label(post_form.to) }}
</div>
<div class="target-bot">
{{ form_widget(post_form.to) }}
</div>
</div>
<div class="create-right">
<div class="create-top-right">
<div class="scope">
{{ form_row(post_form.visibility) }}
</div>
<div class="tabs">
{% for tab in tabs %}
<a href={{ path(tab['href']) }}>{{ tab['title'] }}</a>
{% endfor %}
</div>
</div>
<div class="input-wrapper">
<div class="content-input">
{{ form_row(post_form.content) }}
</div>
</div>
<div class="notice-options">
<div class="attachments">
{{ form_widget(post_form.attachments) }}
<label for="{{ post_form.attachments.vars.id }}">
{{ icon('attach', 'icon icon-attach') | raw }}
</label>
</div>
<div class="post">
{{ form_row(post_form.post) }}
</div>
</div>
</div>
</div>
{{ form_end(post_form) }}
{% endif %}
<div class="main">
<nav class='main-nav'>
<ul>
<li>
<a href="{{ path('main_public') }}"
class='hover-effect {{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
</li>
</ul>
</nav>
<div class="nav-content">
<nav class='main-nav'>
<ul>
<li>
<a href="{{ path('main_public') }}"
class='hover-effect {{ active('main_public') }}'>Public</a>
</li>
{% if user_nickname is defined %}
<li>
<a href="{{ path("home_all", {'nickname' : user_nickname}) }}"
class='hover-effect {{ active("home_all") }}'>Home</a>
</li>
{% endif %}
<li>
<a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Network</a>
</li>
<li>
<a href="{{ path('actors') }}" class='hover-effect {{ active('actors') }}'>Actors</a>
</li>
</ul>
</nav>
<div class="timeline">
<div class="actors">
{% if actors is defined and actors is not empty %}
{% for actor in actors %}
{% include '/actor/actor.html.twig' with {'actor': actor, 'have_user': have_user} only %}
{% endfor %}
{% else %}
<h1>{% trans %}No actors here.{% endtrans %}</h1>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock body %}
{% block javascripts %}{% endblock %}

View File

@ -1,9 +1,5 @@
{% extends 'stdgrid.html.twig' %}
{% block meta %}
{{ parent() }}
{% endblock %}
{% block title %}Welcome!{% endblock %}
{% block stylesheets %}
@ -11,14 +7,6 @@
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}">
{% endblock %}
{% block header %}
{{ parent() }}
{% endblock %}
{% block left %}
{{ parent() }}
{% endblock %}
{% block body %}
<div class="content">

View File

@ -1,12 +1,6 @@
{% extends 'settings/base.html.twig' %}
{% block title %}Account Settings{% endblock %}
{% block page_name %}Account{% endblock %}
{% block form %}
{% block form_account %}
<div class='form'>
<h1>Settings / Account</h1>
<div class="separator"></div>
{{ form(acc) }}
</div>
{% endblock form %}
{% endblock %}

View File

@ -1,53 +0,0 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %}
{% block nav %}
<nav class='set-nav'>
<ul>
<li>
<a href="{{ path('settings_profile') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
</li>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
</li>
<li>
<a href="{{ path('doc_tags') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
</li>
</ul>
</nav>
<nav class='set-nav2'>
<ul>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
</li>
<li>
<a href="{{ path('account_pass') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
</li>
<li>
<a href="{{ path('account_bak') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
and Restore</a>
</li>
</ul>
</nav>
{% endblock %}
{% block body %}
<div class="content">
{{ form(form) }}
</div>
{% endblock %}

View File

@ -1,53 +0,0 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %}
{% block nav %}
<nav class='set-nav'>
<ul>
<li>
<a href="{{ path('settings_profile') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
</li>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
</li>
<li>
<a href="{{ path('doc_tags') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
</li>
</ul>
</nav>
<nav class='set-nav2'>
<ul>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
</li>
<li>
<a href="{{ path('account_pass') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
</li>
<li>
<a href="{{ path('account_bak') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
and Restore</a>
</li>
</ul>
</nav>
{% endblock %}
{% block body %}
<div class="content">
{{ form(form) }}
</div>
{% endblock %}

View File

@ -1,53 +0,0 @@
{% extends 'base.html.twig' %}
{% block stylesheets %}
{{ parent() }}
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings.css') }}"
media="screen and (min-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_mid.css') }}"
media="screen and (max-width: 1300px)">
<link rel='stylesheet' type='text/css' href="{{ asset('assets/css/settings/settings_small.css') }}"
media="screen and (max-width: 750px)">
{% endblock %}
{% block nav %}
<nav class='set-nav'>
<ul>
<li>
<a href="{{ path('settings_profile') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'settings_' %}active{% endif %}'>Settings</a>
</li>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_' %}active{% endif %}'>Account</a>
</li>
<li>
<a href="{{ path('doc_tags') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'doc_tags' %}active{% endif %}'>Misc</a>
</li>
</ul>
</nav>
<nav class='set-nav2'>
<ul>
<li>
<a href="{{ path('account_email') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_email' %}active{% endif %}'>Email</a>
</li>
<li>
<a href="{{ path('account_pass') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_pass' %}active{% endif %}'>Password</a>
</li>
<li>
<a href="{{ path('account_bak') }}"
class='hover-effect {% if app.request.attributes.get('_route') starts with 'account_bak' %}active{% endif %}'>Backup
and Restore</a>
</li>
</ul>
</nav>
{% endblock %}
{% block body %}
<div class="content">
{{ form(form) }}
</div>
{% endblock %}

View File

@ -1,4 +1,4 @@
{% extends 'stdgrid.html.twig' %}
{% extends '/stdgrid.html.twig' %}
{% block meta %}
{{ parent() }}
@ -18,6 +18,7 @@
{% block body %}
<div class="content">
<nav class='main-nav'>
<h1>Settings</h1>
<ul>
@ -33,9 +34,22 @@
<nav class='set-nav'>
<ul>
<li>
<a href="{{ path('settings_personal_info') }}"
class='hover-effect {{ active('settings_personal_info') }}'>Personal Info</a>
<details class="section-title-settings">
<summary>
<h1>Personal
Info{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<em>Nickname, Homepage, Bio, Self Tags and more.</em>
</summary>
{% block form_profile %}
{% include '/settings/profile.html.twig' %}
{% endblock %}
</details>
</li>
<hr>
<li>
<a href="{{ path('settings_avatar') }}"
class='hover-effect {{ active('settings_avatar') }}'>Avatar</a>
@ -50,50 +64,43 @@
</nav>
</section>
</details>
{# <a href="{{ path('settings_personal_info') }}" #}
{# class='hover-effect {{ active('settings_personal_info', 'settings_avatar', 'settings_profile_') }}'>Profile</a> #}
</li>
<li>
<details class="section-title-settings">
<summary>
<a href="{{ path('settings_account') }}"
class='hover-effect {{ active('settings_account') }}'>
<h1>Account</h1>
<em>Email, Password and Language</em>
</a>
</summary>
<section>
</section>
</details>
</li>
<li>
<details class="section-title-settings">
<summary>
<a href="{{ path('settings_notifications') }}"
class='hover-effect {{ active('settings_notifications') }}'>
<h1>Notifications</h1>
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
</a>
</summary>
<section>
</section>
</details>
{# <a href="{{ path('settings_notifications') }}"
class='hover-effect {{ active('settings_notifications') }}'>Notifications</a> #}
</li>
</ul>
</nav>
<hr>
{% block form %}
<li>
<details class="section-title-settings">
<summary>
<h1>Account{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<em>Email, Password and Language</em>
</summary>
<section>
{% block form_account %}
{% include '/settings/account.html.twig' %}
{% endblock %}
</section>
</details>
</li>
<hr>
<li>
<details class="section-title-settings">
<summary>
<h1>Notifications{{ icon('arrow-down', 'icon icon-details-open') | raw }}</h1>
<em>Enable/disable notifications (Email, XMPP, Replies...)</em>
</summary>
<section>
{% block form_notify %}
{% include '/settings/notifications.html.twig' %}
{% endblock %}
</section>
</details>
</li>
</ul>
</nav>
</div>
{% endblock body %}

View File

@ -1,26 +1,17 @@
{% extends 'settings/base.html.twig' %}
{% block title %}Notification Settings{% endblock %}
{% block stylesheets %}
{{ parent() }}
{% endblock %}
{% block form %}
{% block form_notify %}
<div class='form'>
<h1>Settings / Notifications </h1>
<div class="separator"></div>
<ul>
{% for transport, form in tabbed_forms %}
{% for transport, form_transport in tabbed_forms_notify %}
<input type="radio" id="toggle-{{ transport }}" name="tabs"
value="toggle-{{ transport }}" {% if transport == "email" %} checked {% endif %}>
<label for="toggle-{{ transport }}" id='tabs'>
{{ transport }}
</label>
<div id="form_{{ transport }}" class='form'>
{{ form(form) }}
{{ form(form_transport) }}
</div>
{% endfor %}
</ul>
</div>
{% endblock form %}
{% endblock %}

View File

@ -1,12 +1,6 @@
{% extends 'settings/base.html.twig' %}
{% block title %}Profile Settings{% endblock %}
{% block form %}
{% block form_profile %}
<div class='form'>
<h1>Settings / Profile</h1>
<div class="separator"></div>
{{ form(prof) }}
</div>
{% endblock form %}
{% endblock %}

View File

@ -4,12 +4,12 @@
{% if app.user %}
<section class='profile'>
<section id="profile-links">
<a id="user-avatar" href="{{ path('settings_avatar') }}">
<a id="user-avatar" href="{{ path('settings') }}">
<img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">
</a>
<span id="user-info">
<a id="user-nick" href="{{ path('settings_personal_info') }}">
<a id="user-nick" href="{{ path('settings') }}">
<h2>{{ user_nickname }}</h2>
</a>
<div id="user-tags">
@ -41,7 +41,7 @@
{% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
{{ link | raw }}
{% endfor %}
<a href="{{ path('settings_personal_info') }}"
<a href="{{ path('settings') }}"
class='hover-effect {{ active('settings_') }}'>Settings</a>
<a href='{{ path('logout') }}'>Logout</a>
</nav>