fix responsive logout, fixes #4744

Closes #4744

Merge request !3542

lib/classes/ResponsiveHelper.php

@@ -53,7 +53,8 @@ class ResponsiveHelper
                 'parent'   => '/',
                 'path'     => $path,
                 'visible'  => $forceVisibility ? true : $nav->isVisible(true),
-                'active'   => $nav->isActive()
+                'active'   => $nav->isActive(),
+                'button'   => $nav->getRenderAsButton(),
             ];
 
             if ($nav->isActive()) {
@@ -130,7 +131,8 @@ class ResponsiveHelper
                 'parent'  => $path,
                 'path'    => $subpath,
                 'visible' => $subnav->isVisible(),
-                'active'  => $subnav->isActive()
+                'active'  => $subnav->isActive(),
+                'button'  => $subnav->getRenderAsButton(),
             ];
 
             if ($subnav->isActive()) {

lib/navigation/Navigation.php

@@ -554,6 +554,8 @@ class Navigation implements IteratorAggregate
 
     /**
      * Return the list of subnavigation items of this object.
+     *
+     * @return Navigation[]
      */
     public function getSubNavigation()
     {

resources/assets/stylesheets/highcontrast.scss

@@ -1049,7 +1049,8 @@ button.skiplink {
     }
 
     // list elements when hovering
-    a {
+    a,
+    button {
         &:hover {
             background-color: $lightgray;
             color: $black;

resources/assets/stylesheets/scss/responsive.scss

@@ -216,7 +216,8 @@ $sidebarOut: -330px;
         color: var(--white);
         flex: 1;
 
-        > a {
+        > a,
+        button {
             display: inline-block;
             padding: 10px 10px 10px 5px;
             text-align: left;

resources/vue/components/responsive/NavigationItem.vue

@@ -10,7 +10,7 @@
                 >
                     <span class="navigation-icon">
                         <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                        <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                        <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                     </span>
                     <span class="navigation-text">
                         {{ item.title }}
@@ -29,14 +29,28 @@
             </button>
         </template>
         <div v-else class="navigation-title">
-            <a
+            <form v-if="item.button"
+                  :action="item.url"
+                  method="post"
+            >
+                <button class="as-link"
+                        tabindex="0"
+                        :title="navigateToText(item.title)"
+                        :aria-label="navigateToText(item.title)"
+                >
+                    <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
+                    <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                    {{ item.title }}
+                </button>
+            </form>
+            <a v-else
                 :href="item.url"
                 tabindex="0"
                 :title="navigateToText(item.title)"
                 :aria-label="navigateToText(item.title)"
             >
                 <studip-icon v-if="isCourse" shape="seminar" role="info_alt" :size="24" alt=""></studip-icon>
-                <img v-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
+                <img v-else-if="item.icon" :src="iconUrl" width="24" alt="" :class="{avatar: item.avatar}"/>
                 {{ item.title }}
             </a>
         </div>