[CSS][TWIG] Left panel HTML nesting to better aid screen readers.

Signed-off-by: Eliseu Amaro <mail@eliseuama.ro>

public/assets/css/left/left.css

@@ -29,6 +29,11 @@
     font-family: var(--display-font);
 }
 
+.profile-nav nav {
+    display: flex;
+    flex-direction: column;
+}
+
 .profile {
     margin-bottom: var(--main-size);
 

templates/sidepanel/left/left.html.twig

@@ -28,26 +28,34 @@
                     </div>
                 </a>
             </div>
-            <a href='#'>Messages</a>
+
-            <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
+            <nav>
-               class='hover-effect {{ active("replies") }}'>Replies</a>
+                <a href='#'>Messages</a>
-            {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
+                <a href="{{ path("replies", {'nickname' : user_nickname}) }}"
-                {{ link | raw }}
+                   class='hover-effect {{ active("replies") }}'>Replies</a>
-            {% endfor %}
+                {% for link in handle_event('InsertLeftPanelLink', user_nickname) %}
-            <a href="{{ path('settings_personal_info') }}"
+                    {{ link | raw }}
-               class='hover-effect {{ active('settings_') }}'>Settings</a>
+                {% endfor %}
-            <a href='{{ path('logout') }}'>Logout</a>
+                <a href="{{ path('settings_personal_info') }}"
-            </ul>
+                   class='hover-effect {{ active('settings_') }}'>Settings</a>
+                <a href='{{ path('logout') }}'>Logout</a>
+            </nav>
+
         {% else %}
             <div class="profile">
-                <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                <nav>
-                <a href="{{ path('register') }}">Register</a>
+                    <a href="{{ path('login') }}" class='hover-effect {{ active('login') }}'>Login</a>
+                    <a href="{{ path('register') }}">Register</a>
+                </nav>
             </div>
         {% endif %}
 
         <div class="timeline-nav">
-            <a href="{{ path('main_public') }}"
+            <h1>
-               class='{{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
+                <a href="{{ path('main_public') }}"
+                   class='{{ active('main_public', 'main_all', "home_all") }}'>Timeline</a>
+            </h1>
+
             <hr>
 
             <nav class='sec-nav'>