diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a79f98df5..7b1a66bf9f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - New footer design
 - Update jgit to version 5.6.1.202002131546-r-scm1
 - Update svnkit to version 1.10.1-scm1
+- Secondary navigation collapsable
 
 ### Fixed
 - Modification for mercurial repositories with enabled XSRF protection
diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 0df9e311c8..14f66a3171 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -484,19 +484,19 @@ exports[`Storyshots DateFromNow Default 1`] = `
 
 exports[`Storyshots Diff Binaries 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -504,18 +504,18 @@ exports[`Storyshots Diff Binaries 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -703,26 +703,26 @@ exports[`Storyshots Diff Binaries 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="conflict.png"
         >
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             conflict.png
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             add
           </span>
@@ -753,19 +753,19 @@ exports[`Storyshots Diff Binaries 1`] = `
 
 exports[`Storyshots Diff Collapsed 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -773,18 +773,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -813,16 +813,16 @@ exports[`Storyshots Diff Collapsed 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -830,18 +830,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -870,16 +870,16 @@ exports[`Storyshots Diff Collapsed 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -887,18 +887,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -927,16 +927,16 @@ exports[`Storyshots Diff Collapsed 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -944,18 +944,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -984,16 +984,16 @@ exports[`Storyshots Diff Collapsed 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -1001,18 +1001,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -1041,16 +1041,16 @@ exports[`Storyshots Diff Collapsed 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -1058,18 +1058,18 @@ exports[`Storyshots Diff Collapsed 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -1102,19 +1102,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
 
 exports[`Storyshots Diff CollapsingWithFunction 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -1122,18 +1122,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -1162,16 +1162,16 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -1179,18 +1179,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -1431,7 +1431,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -2014,16 +2014,16 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -2031,18 +2031,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -2462,16 +2462,16 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -2479,18 +2479,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -2910,16 +2910,16 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -2927,18 +2927,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -2967,16 +2967,16 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi ckdmuY panel is-size-6"
+    className="sc-jTzLTM hmfYFC panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -2984,18 +2984,18 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
             className="fas fa-angle-right has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -3028,19 +3028,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
 
 exports[`Storyshots Diff Default 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -3048,18 +3048,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -3606,16 +3606,16 @@ exports[`Storyshots Diff Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -3623,18 +3623,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -3875,7 +3875,7 @@ exports[`Storyshots Diff Default 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -4458,16 +4458,16 @@ exports[`Storyshots Diff Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -4475,18 +4475,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -4906,16 +4906,16 @@ exports[`Storyshots Diff Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -4923,18 +4923,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -5354,16 +5354,16 @@ exports[`Storyshots Diff Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -5371,18 +5371,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -5940,7 +5940,7 @@ exports[`Storyshots Diff Default 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -6154,7 +6154,7 @@ exports[`Storyshots Diff Default 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -6409,16 +6409,16 @@ exports[`Storyshots Diff Default 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -6426,18 +6426,18 @@ exports[`Storyshots Diff Default 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -6936,19 +6936,19 @@ exports[`Storyshots Diff Default 1`] = `
 
 exports[`Storyshots Diff File Annotation 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -6956,18 +6956,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -7518,16 +7518,16 @@ exports[`Storyshots Diff File Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -7535,18 +7535,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -7791,7 +7791,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -8374,16 +8374,16 @@ exports[`Storyshots Diff File Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -8391,18 +8391,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -8826,16 +8826,16 @@ exports[`Storyshots Diff File Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -8843,18 +8843,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -9278,16 +9278,16 @@ exports[`Storyshots Diff File Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -9295,18 +9295,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -9868,7 +9868,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -10082,7 +10082,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -10337,16 +10337,16 @@ exports[`Storyshots Diff File Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -10354,18 +10354,18 @@ exports[`Storyshots Diff File Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -10868,19 +10868,19 @@ exports[`Storyshots Diff File Annotation 1`] = `
 
 exports[`Storyshots Diff File Controls 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -10888,18 +10888,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -11464,16 +11464,16 @@ exports[`Storyshots Diff File Controls 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -11481,18 +11481,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -11751,7 +11751,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -12334,16 +12334,16 @@ exports[`Storyshots Diff File Controls 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -12351,18 +12351,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -12800,16 +12800,16 @@ exports[`Storyshots Diff File Controls 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -12817,18 +12817,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -13266,16 +13266,16 @@ exports[`Storyshots Diff File Controls 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -13283,18 +13283,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -13870,7 +13870,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -14084,7 +14084,7 @@ exports[`Storyshots Diff File Controls 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -14339,16 +14339,16 @@ exports[`Storyshots Diff File Controls 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -14356,18 +14356,18 @@ exports[`Storyshots Diff File Controls 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -14884,19 +14884,19 @@ exports[`Storyshots Diff File Controls 1`] = `
 
 exports[`Storyshots Diff Hunks 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java"
         >
@@ -14904,18 +14904,18 @@ exports[`Storyshots Diff Hunks 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/pullrequest/service/DefaultPullRequestService.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -15179,7 +15179,7 @@ exports[`Storyshots Diff Hunks 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -15370,7 +15370,7 @@ exports[`Storyshots Diff Hunks 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -15721,19 +15721,19 @@ exports[`Storyshots Diff Hunks 1`] = `
 
 exports[`Storyshots Diff Line Annotation 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -15741,18 +15741,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -16311,16 +16311,16 @@ exports[`Storyshots Diff Line Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -16328,18 +16328,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -16592,7 +16592,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -17175,16 +17175,16 @@ exports[`Storyshots Diff Line Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -17192,18 +17192,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -17623,16 +17623,16 @@ exports[`Storyshots Diff Line Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -17640,18 +17640,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -18071,16 +18071,16 @@ exports[`Storyshots Diff Line Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -18088,18 +18088,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -18657,7 +18657,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -18871,7 +18871,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -19126,16 +19126,16 @@ exports[`Storyshots Diff Line Annotation 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -19143,18 +19143,18 @@ exports[`Storyshots Diff Line Annotation 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -19665,19 +19665,19 @@ exports[`Storyshots Diff Line Annotation 1`] = `
 
 exports[`Storyshots Diff OnClick 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -19685,18 +19685,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -20283,16 +20283,16 @@ exports[`Storyshots Diff OnClick 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -20300,18 +20300,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -20566,7 +20566,7 @@ exports[`Storyshots Diff OnClick 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -21197,16 +21197,16 @@ exports[`Storyshots Diff OnClick 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -21214,18 +21214,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -21675,16 +21675,16 @@ exports[`Storyshots Diff OnClick 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -21692,18 +21692,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -22153,16 +22153,16 @@ exports[`Storyshots Diff OnClick 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -22170,18 +22170,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -22779,7 +22779,7 @@ exports[`Storyshots Diff OnClick 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -23009,7 +23009,7 @@ exports[`Storyshots Diff OnClick 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -23284,16 +23284,16 @@ exports[`Storyshots Diff OnClick 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -23301,18 +23301,18 @@ exports[`Storyshots Diff OnClick 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -23847,19 +23847,19 @@ exports[`Storyshots Diff OnClick 1`] = `
 
 exports[`Storyshots Diff Side-By-Side 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -23867,18 +23867,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -24518,16 +24518,16 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -24535,18 +24535,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -24831,7 +24831,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               colSpan={4}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -25460,16 +25460,16 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -25477,18 +25477,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -25960,16 +25960,16 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -25977,18 +25977,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -26460,16 +26460,16 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -26477,18 +26477,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -27157,7 +27157,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               colSpan={4}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -27399,7 +27399,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
               colSpan={4}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -27684,16 +27684,16 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -27701,18 +27701,18 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -28284,19 +28284,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
 
 exports[`Storyshots Diff SyntaxHighlighting 1`] = `
 <div
-  className="sc-hmzhuo TypKC"
+  className="sc-hqyNC ebbHT"
 >
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/java/com/cloudogu/scm/review/events/EventListener.java"
         >
@@ -28304,18 +28304,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/java/com/cloudogu/scm/review/events/EventListener.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -28862,16 +28862,16 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/js/ChangeNotification.tsx"
         >
@@ -28879,18 +28879,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/js/ChangeNotification.tsx
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -29131,7 +29131,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -29714,16 +29714,16 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/de/plugins.json"
         >
@@ -29731,18 +29731,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/de/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -30162,16 +30162,16 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/main/resources/locales/en/plugins.json"
         >
@@ -30179,18 +30179,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/main/resources/locales/en/plugins.json
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -30610,16 +30610,16 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="src/test/java/com/cloudogu/scm/review/events/ClientTest.java"
         >
@@ -30627,18 +30627,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             src/test/java/com/cloudogu/scm/review/events/ClientTest.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -31196,7 +31196,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -31410,7 +31410,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
               colSpan={3}
             >
               <hr
-                className="sc-jzJRlG etTijH"
+                className="sc-chPdSV iDxGaa"
               />
             </td>
           </tr>
@@ -31665,16 +31665,16 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
     </div>
   </div>
   <div
-    className="sc-gZMcBi iABzaT panel is-size-6"
+    className="sc-jTzLTM kHrqaQ panel is-size-6"
   >
     <div
       className="panel-heading"
     >
       <div
-        className="sc-gqjmRU kjsEoG level"
+        className="sc-fjdhpX glLOcd level"
       >
         <div
-          className="sc-VigVT bfvjTo level-left is-flex has-cursor-pointer"
+          className="sc-jzJRlG cWqroF level-left is-flex has-cursor-pointer"
           onClick={[Function]}
           title="Main.java"
         >
@@ -31682,18 +31682,18 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
             className="fas fa-angle-down has-text-inherit"
           />
           <span
-            className="sc-jTzLTM dwNlfD is-ellipsis-overflow is-size-6"
+            className="sc-cSHVUG ckScCA is-ellipsis-overflow is-size-6"
           >
             Main.java
           </span>
           <span
-            className="tag is-info is-outlined sc-cSHVUG kqfxpj is-rounded has-text-weight-normal"
+            className="tag is-info is-outlined sc-kgoBCf lfCumG is-rounded has-text-weight-normal"
           >
             modify
           </span>
         </div>
         <div
-          className="sc-fjdhpX fibrmN level-right is-flex"
+          className="sc-kAzzGY blvgvG level-right is-flex"
         >
           <div
             className="field is-grouped"
@@ -32192,7 +32192,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
 
 exports[`Storyshots Forms|Checkbox Default 1`] = `
 <div
-  className="sc-kgAjT khfRmZ"
+  className="sc-hmzhuo huWlPy"
 >
   <div
     className="field"
@@ -32237,7 +32237,7 @@ exports[`Storyshots Forms|Checkbox Default 1`] = `
 
 exports[`Storyshots Forms|Checkbox Disabled 1`] = `
 <div
-  className="sc-kgAjT khfRmZ"
+  className="sc-hmzhuo huWlPy"
 >
   <div
     className="field"
@@ -32325,10 +32325,10 @@ exports[`Storyshots Forms|DropDown With Translation 1`] = `
 
 exports[`Storyshots Forms|Radio Default 1`] = `
 <div
-  className="sc-cJSrbW hLoADP"
+  className="sc-frDJqD qQxSI"
 >
   <label
-    className="sc-cMljjf kOqpHe radio"
+    className="sc-gPEVay fGxTeG radio"
   >
     <input
       checked={false}
@@ -32339,7 +32339,7 @@ exports[`Storyshots Forms|Radio Default 1`] = `
     Not checked
   </label>
   <label
-    className="sc-cMljjf kOqpHe radio"
+    className="sc-gPEVay fGxTeG radio"
   >
     <input
       checked={true}
@@ -32354,10 +32354,10 @@ exports[`Storyshots Forms|Radio Default 1`] = `
 
 exports[`Storyshots Forms|Radio Disabled 1`] = `
 <div
-  className="sc-cJSrbW hLoADP"
+  className="sc-frDJqD qQxSI"
 >
   <label
-    className="sc-cMljjf kOqpHe radio"
+    className="sc-gPEVay fGxTeG radio"
     disabled={true}
   >
     <input
@@ -32374,7 +32374,7 @@ exports[`Storyshots Forms|Radio Disabled 1`] = `
 
 exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 <div
-  className="sc-ksYbfQ ePXdiL"
+  className="sc-kvZOFW iGjnWZ"
 >
   <div
     className="field"
@@ -32397,7 +32397,7 @@ exports[`Storyshots Forms|Textarea OnCancel 1`] = `
 
 exports[`Storyshots Forms|Textarea OnChange 1`] = `
 <div
-  className="sc-ksYbfQ ePXdiL"
+  className="sc-kvZOFW iGjnWZ"
 >
   <div
     className="field"
@@ -32424,7 +32424,7 @@ exports[`Storyshots Forms|Textarea OnChange 1`] = `
 
 exports[`Storyshots Forms|Textarea OnSubmit 1`] = `
 <div
-  className="sc-ksYbfQ ePXdiL"
+  className="sc-kvZOFW iGjnWZ"
 >
   <div
     className="field"
@@ -32463,7 +32463,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-user-circle fa-fw"
@@ -32472,7 +32472,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           Trillian McMillian
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32498,7 +32498,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -32507,7 +32507,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           footer.information.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32523,7 +32523,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -32532,7 +32532,7 @@ exports[`Storyshots Layout|Footer Default 1`] = `
           footer.support.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32571,21 +32571,21 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <span
-            className="sc-fMiknA fyPpQQ image is-rounded"
+            className="sc-fAjcbJ hVXurF image is-rounded"
           >
             <img
               alt="trillian"
-              className="is-rounded sc-fBuWsC djJrAv"
+              className="is-rounded sc-eqIVtm eXYEuD"
               src="test-file-stub"
             />
           </span>
           Trillian McMillian
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32620,7 +32620,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -32629,7 +32629,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           footer.information.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32661,7 +32661,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -32670,7 +32670,7 @@ exports[`Storyshots Layout|Footer Full 1`] = `
           footer.support.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32717,21 +32717,21 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <span
-            className="sc-fMiknA fyPpQQ image is-rounded"
+            className="sc-fAjcbJ hVXurF image is-rounded"
           >
             <img
               alt="trillian"
-              className="is-rounded sc-fBuWsC djJrAv"
+              className="is-rounded sc-eqIVtm eXYEuD"
               src="test-file-stub"
             />
           </span>
           Trillian McMillian
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32757,7 +32757,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -32766,7 +32766,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           footer.information.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32782,7 +32782,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -32791,7 +32791,7 @@ exports[`Storyshots Layout|Footer With Avatar 1`] = `
           footer.support.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32830,7 +32830,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-user-circle fa-fw"
@@ -32839,7 +32839,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           Trillian McMillian
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32874,7 +32874,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-info-circle fa-fw"
@@ -32883,7 +32883,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           footer.information.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -32915,7 +32915,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
         className="column is-one-third"
       >
         <div
-          className="sc-hzDkRC jeksqW"
+          className="sc-fMiknA bYlDmz"
         >
           <i
             className="fas fa-life-ring fa-fw"
@@ -32924,7 +32924,7 @@ exports[`Storyshots Layout|Footer With Plugin Links 1`] = `
           footer.support.title
         </div>
         <ul
-          className="sc-jhAzac eoWThz"
+          className="sc-dVhcbM dqMFgo"
         >
           <li>
             <a
@@ -34811,7 +34811,7 @@ PORT_NUMBER =
 
 exports[`Storyshots Table|Table Default 1`] = `
 <table
-  className="sc-fAjcbJ byigni table content is-hoverable"
+  className="sc-kjoXOD hpTAeq table content is-hoverable"
 >
   <thead>
     <tr>
@@ -34829,7 +34829,7 @@ exports[`Storyshots Table|Table Default 1`] = `
       >
         Last Name
         <i
-          className="fas fa-sort-amount-down has-text-grey-light sc-eqIVtm jxAoDg"
+          className="fas fa-sort-amount-down has-text-grey-light sc-gisBJw hYdOzi"
         />
       </th>
       <th
@@ -34902,7 +34902,7 @@ exports[`Storyshots Table|Table Empty 1`] = `
 
 exports[`Storyshots Table|Table TextColumn 1`] = `
 <table
-  className="sc-fAjcbJ byigni table content is-hoverable"
+  className="sc-kjoXOD hpTAeq table content is-hoverable"
 >
   <thead>
     <tr>
@@ -34914,7 +34914,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Id
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-gisBJw hYdOzi"
         />
       </th>
       <th
@@ -34925,7 +34925,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Name
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-gisBJw hYdOzi"
         />
       </th>
       <th
@@ -34936,7 +34936,7 @@ exports[`Storyshots Table|Table TextColumn 1`] = `
       >
         Description
         <i
-          className="fas fa-sort-alpha-down has-text-grey-light sc-eqIVtm jxAoDg"
+          className="fas fa-sort-alpha-down has-text-grey-light sc-gisBJw hYdOzi"
         />
       </th>
     </tr>
diff --git a/scm-ui/ui-components/src/navigation/MenuContext.ts b/scm-ui/ui-components/src/navigation/MenuContext.ts
new file mode 100644
index 0000000000..83c292538e
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/MenuContext.ts
@@ -0,0 +1,15 @@
+import React from "react";
+
+const MENU_COLLAPSED = "secondary-menu-collapsed";
+
+export const MenuContext = React.createContext({
+  menuCollapsed: isMenuCollapsed(),
+  setMenuCollapsed: (collapsed: boolean) => {}
+});
+
+export function isMenuCollapsed() {
+  return localStorage.getItem(MENU_COLLAPSED) === "true";
+}
+export function storeMenuCollapsed(status: boolean) {
+  localStorage.setItem(MENU_COLLAPSED, String(status));
+}
diff --git a/scm-ui/ui-components/src/navigation/NavLink.tsx b/scm-ui/ui-components/src/navigation/NavLink.tsx
index f87351d496..5b1aad1519 100644
--- a/scm-ui/ui-components/src/navigation/NavLink.tsx
+++ b/scm-ui/ui-components/src/navigation/NavLink.tsx
@@ -10,6 +10,8 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
+  collapsed?: boolean;
+  title?: string;
 };
 
 class NavLink extends React.Component<Props> {
@@ -23,7 +25,7 @@ class NavLink extends React.Component<Props> {
   }
 
   renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
+    const { to, icon, label, collapsed, title } = this.props;
 
     let showIcon = null;
     if (icon) {
@@ -35,10 +37,13 @@ class NavLink extends React.Component<Props> {
     }
 
     return (
-      <li>
-        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
+      <li title={collapsed ? title : undefined}>
+        <Link
+          className={classNames(this.isActive(route) ? "is-active" : "", collapsed ? "has-text-centered" : "")}
+          to={to}
+        >
           {showIcon}
-          {label}
+          {collapsed ? null : label}
         </Link>
       </li>
     );
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
new file mode 100644
index 0000000000..7b9955d25f
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigation.tsx
@@ -0,0 +1,110 @@
+import React, { FC, ReactElement, ReactNode, useContext, useEffect } from "react";
+import styled from "styled-components";
+import SubNavigation from "./SubNavigation";
+import { matchPath, useLocation } from "react-router-dom";
+import { isMenuCollapsed, MenuContext } from "./MenuContext";
+
+type Props = {
+  label: string;
+  children: ReactElement[];
+  collapsed: boolean;
+  onCollapse?: (newStatus: boolean) => void;
+};
+
+type CollapsedProps = {
+  collapsed: boolean;
+};
+
+const SectionContainer = styled.aside<CollapsedProps>`
+  position: sticky;
+  position: -webkit-sticky; /* Safari */
+  top: 2rem;
+  width: ${props => (props.collapsed ? "5.5rem" : "20.5rem")};
+`;
+
+const Icon = styled.i<CollapsedProps>`
+  padding-left: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.5rem")};
+  padding-right: ${(props: CollapsedProps) => (props.collapsed ? "0" : "0.4rem")};
+  height: 1.5rem;
+  font-size: 24px;
+  margin-top: -0.75rem;
+`;
+
+const MenuLabel = styled.p<CollapsedProps>`
+  height: 3.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
+  cursor: pointer;
+`;
+
+const SecondaryNavigation: FC<Props> = ({ label, children, collapsed, onCollapse }) => {
+  const location = useLocation();
+  const menuContext = useContext(MenuContext);
+
+  const subNavActive = isSubNavigationActive(children, location.pathname);
+  const isCollapsed = collapsed && !subNavActive;
+
+  useEffect(() => {
+    if (isMenuCollapsed()) {
+      menuContext.setMenuCollapsed(!subNavActive);
+    }
+  }, [subNavActive]);
+
+  const childrenWithProps = React.Children.map(children, (child: ReactElement) =>
+    React.cloneElement(child, { collapsed: isCollapsed })
+  );
+  const arrowIcon = isCollapsed ? <i className="fas fa-caret-down" /> : <i className="fas fa-caret-right" />;
+
+  return (
+    <SectionContainer className="menu" collapsed={isCollapsed}>
+      <div>
+        <MenuLabel
+          className="menu-label"
+          collapsed={isCollapsed}
+          onClick={onCollapse && !subNavActive ? () => onCollapse(!isCollapsed) : undefined}
+        >
+          {onCollapse && !subNavActive && (
+            <Icon color="info" className="is-medium" collapsed={isCollapsed}>
+              {arrowIcon}
+            </Icon>
+          )}
+          {isCollapsed ? "" : label}
+        </MenuLabel>
+        <ul className="menu-list">{childrenWithProps}</ul>
+      </div>
+    </SectionContainer>
+  );
+};
+
+const createParentPath = (to: string) => {
+  const parents = to.split("/");
+  parents.splice(-1, 1);
+  return parents.join("/");
+};
+
+const isSubNavigationActive = (children: ReactNode, url: string): boolean => {
+  const childArray = React.Children.toArray(children);
+  const match = childArray
+    .filter(child => {
+      // what about extension points?
+      // @ts-ignore
+      return child.type.name === SubNavigation.name;
+    })
+    .map(child => {
+      // @ts-ignore
+      return child.props;
+    })
+    .find(props => {
+      const path = createParentPath(props.to);
+      const matches = matchPath(url, {
+        path,
+        exact: props.activeOnlyWhenExact as boolean
+      });
+      return matches != null;
+    });
+
+  return match != null;
+};
+
+export default SecondaryNavigation;
diff --git a/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
new file mode 100644
index 0000000000..eca21767e8
--- /dev/null
+++ b/scm-ui/ui-components/src/navigation/SecondaryNavigationItem.tsx
@@ -0,0 +1,45 @@
+import React, { ReactElement, ReactNode } from "react";
+import { MenuContext } from "./MenuContext";
+import SubNavigation from "./SubNavigation";
+import NavLink from "./NavLink";
+
+type Props = {
+  to: string;
+  icon: string;
+  label: string;
+  title: string;
+  activeWhenMatch?: (route: any) => boolean;
+  activeOnlyWhenExact?: boolean;
+  children?: ReactElement[];
+};
+
+export default class SecondaryNavigationItem extends React.Component<Props> {
+  render() {
+    const { to, icon, label, title, activeWhenMatch, activeOnlyWhenExact, children } = this.props;
+    if (children) {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => (
+            <SubNavigation
+              to={to}
+              icon={icon}
+              label={label}
+              title={title}
+              activeWhenMatch={activeWhenMatch}
+              activeOnlyWhenExact={activeOnlyWhenExact}
+              collapsed={menuCollapsed}
+            >
+              {children}
+            </SubNavigation>
+          )}
+        </MenuContext.Consumer>
+      );
+    } else {
+      return (
+        <MenuContext.Consumer>
+          {({ menuCollapsed }) => <NavLink to={to} icon={icon} label={label} title={title} collapsed={menuCollapsed} />}
+        </MenuContext.Consumer>
+      );
+    }
+  }
+}
diff --git a/scm-ui/ui-components/src/navigation/Section.tsx b/scm-ui/ui-components/src/navigation/Section.tsx
deleted file mode 100644
index b6f0542506..0000000000
--- a/scm-ui/ui-components/src/navigation/Section.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React, { ReactNode } from "react";
-
-type Props = {
-  label: string;
-  children?: ReactNode;
-};
-
-class Section extends React.Component<Props> {
-  render() {
-    const { label, children } = this.props;
-    return (
-      <div>
-        <p className="menu-label">{label}</p>
-        <ul className="menu-list">{children}</ul>
-      </div>
-    );
-  }
-}
-
-export default Section;
diff --git a/scm-ui/ui-components/src/navigation/SubNavigation.tsx b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
index 258658561a..769167a027 100644
--- a/scm-ui/ui-components/src/navigation/SubNavigation.tsx
+++ b/scm-ui/ui-components/src/navigation/SubNavigation.tsx
@@ -1,5 +1,5 @@
-import React, { ReactNode } from "react";
-import { Link, Route } from "react-router-dom";
+import React, { FC, ReactElement, useContext, useEffect } from "react";
+import { Link, useRouteMatch } from "react-router-dom";
 import classNames from "classnames";
 
 type Props = {
@@ -8,52 +8,39 @@ type Props = {
   label: string;
   activeOnlyWhenExact?: boolean;
   activeWhenMatch?: (route: any) => boolean;
-  children?: ReactNode;
+  children?: ReactElement[];
+  collapsed?: boolean;
+  title?: string;
 };
 
-class SubNavigation extends React.Component<Props> {
-  static defaultProps = {
-    activeOnlyWhenExact: false
-  };
+const SubNavigation: FC<Props> = ({ to, activeOnlyWhenExact, icon, collapsed, title, label, children }) => {
+  const parents = to.split("/");
+  parents.splice(-1, 1);
+  const parent = parents.join("/");
 
-  isActive(route: any) {
-    const { activeWhenMatch } = this.props;
-    return route.match || (activeWhenMatch && activeWhenMatch(route));
+  const match = useRouteMatch({
+    path: parent,
+    exact: activeOnlyWhenExact
+  });
+
+  let defaultIcon = "fas fa-cog";
+  if (icon) {
+    defaultIcon = icon;
   }
 
-  renderLink = (route: any) => {
-    const { to, icon, label } = this.props;
-
-    let defaultIcon = "fas fa-cog";
-    if (icon) {
-      defaultIcon = icon;
-    }
-
-    let children = null;
-    if (this.isActive(route)) {
-      children = <ul className="sub-menu">{this.props.children}</ul>;
-    }
-
-    return (
-      <li>
-        <Link className={this.isActive(route) ? "is-active" : ""} to={to}>
-          <i className={classNames(defaultIcon, "fa-fw")} /> {label}
-        </Link>
-        {children}
-      </li>
-    );
-  };
-
-  render() {
-    const { to, activeOnlyWhenExact } = this.props;
-
-    // removes last part of url
-    const parents = to.split("/");
-    parents.splice(-1, 1);
-    const parent = parents.join("/");
-
-    return <Route path={parent} exact={activeOnlyWhenExact} children={this.renderLink} />;
+  let childrenList = null;
+  if (match && !collapsed) {
+    childrenList = <ul className="sub-menu">{children}</ul>;
   }
-}
+
+  return (
+    <li title={collapsed ? title : undefined}>
+      <Link className={classNames(match != null ? "is-active" : "", collapsed ? "has-text-centered" : "")} to={to}>
+        <i className={classNames(defaultIcon, "fa-fw")} /> {collapsed ? "" : label}
+      </Link>
+      {childrenList}
+    </li>
+  );
+};
 
 export default SubNavigation;
diff --git a/scm-ui/ui-components/src/navigation/index.ts b/scm-ui/ui-components/src/navigation/index.ts
index 6c83ffc86d..770d5f6686 100644
--- a/scm-ui/ui-components/src/navigation/index.ts
+++ b/scm-ui/ui-components/src/navigation/index.ts
@@ -6,4 +6,6 @@ export { default as Navigation } from "./Navigation";
 export { default as SubNavigation } from "./SubNavigation";
 export { default as PrimaryNavigation } from "./PrimaryNavigation";
 export { default as PrimaryNavigationLink } from "./PrimaryNavigationLink";
-export { default as Section } from "./Section";
+export { default as SecondaryNavigation } from "./SecondaryNavigation";
+export { MenuContext, storeMenuCollapsed, isMenuCollapsed } from "./MenuContext";
+export { default as SecondaryNavigationItem } from "./SecondaryNavigationItem";
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index edf1d8c79a..360eae176c 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -10,6 +10,8 @@ import Icon from "../Icon";
 import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
 import TokenizedDiffView from "./TokenizedDiffView";
 import DiffButton from "./DiffButton";
+import { MenuContext } from "@scm-manager/ui-components";
+import { storeMenuCollapsed } from "../navigation";
 
 const EMPTY_ANNOTATION_FACTORY = {};
 
@@ -100,10 +102,14 @@ class DiffFile extends React.Component<Props, State> {
     }
   };
 
-  toggleSideBySide = () => {
-    this.setState(state => ({
-      sideBySide: !state.sideBySide
-    }));
+  toggleSideBySide = (callback: () => void) => {
+    this.setState(
+      state => ({
+        sideBySide: !state.sideBySide
+      }),
+      () => callback()
+    );
+    storeMenuCollapsed(true);
   };
 
   setCollapse = (collapsed: boolean) => {
@@ -259,11 +265,15 @@ class DiffFile extends React.Component<Props, State> {
       file.hunks && file.hunks.length > 0 ? (
         <ButtonWrapper className={classNames("level-right", "is-flex")}>
           <ButtonGroup>
-            <DiffButton
-              icon={sideBySide ? "align-left" : "columns"}
-              tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
-              onClick={this.toggleSideBySide}
-            />
+            <MenuContext.Consumer>
+              {({ setMenuCollapsed }) => (
+                <DiffButton
+                  icon={sideBySide ? "align-left" : "columns"}
+                  tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+                  onClick={() => this.toggleSideBySide(() => setMenuCollapsed(true))}
+                />
+              )}
+            </MenuContext.Consumer>
             {fileControls}
           </ButtonGroup>
         </ButtonWrapper>
diff --git a/scm-ui/ui-webapp/public/locales/de/admin.json b/scm-ui/ui-webapp/public/locales/de/admin.json
index 7a40dff908..2bfc2d6b5b 100644
--- a/scm-ui/ui-webapp/public/locales/de/admin.json
+++ b/scm-ui/ui-webapp/public/locales/de/admin.json
@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Administrations Navigation",
+      "navigationLabel": "Administration",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell"
diff --git a/scm-ui/ui-webapp/public/locales/de/commons.json b/scm-ui/ui-webapp/public/locales/de/commons.json
index 310c14ead3..8b9e9942e7 100644
--- a/scm-ui/ui-webapp/public/locales/de/commons.json
+++ b/scm-ui/ui-webapp/public/locales/de/commons.json
@@ -61,7 +61,7 @@
     "previous": "Zurück"
   },
   "profile": {
-    "navigationLabel": "Profil Navigation",
+    "navigationLabel": "Profil",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Passwort ändern",
     "settingsNavLink": "Einstellungen",
diff --git a/scm-ui/ui-webapp/public/locales/de/config.json b/scm-ui/ui-webapp/public/locales/de/config.json
index 4cbfff2afc..99e810215b 100644
--- a/scm-ui/ui-webapp/public/locales/de/config.json
+++ b/scm-ui/ui-webapp/public/locales/de/config.json
@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Administrations Navigation",
+    "navigationLabel": "Administration",
     "title": "Globale Einstellungen",
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Einstellungen Fehler",
diff --git a/scm-ui/ui-webapp/public/locales/de/groups.json b/scm-ui/ui-webapp/public/locales/de/groups.json
index 2e8c7aeb88..43cdd51f7e 100644
--- a/scm-ui/ui-webapp/public/locales/de/groups.json
+++ b/scm-ui/ui-webapp/public/locales/de/groups.json
@@ -18,7 +18,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Gruppen Fehler",
     "menu": {
-      "navigationLabel": "Gruppen Navigation",
+      "navigationLabel": "Gruppen",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell",
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index 27909f338c..bb353f6b67 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -28,7 +28,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Repository Fehler",
     "menu": {
-      "navigationLabel": "Repository Navigation",
+      "navigationLabel": "Repository",
       "informationNavLink": "Informationen",
       "branchesNavLink": "Branches",
       "sourcesNavLink": "Code",
diff --git a/scm-ui/ui-webapp/public/locales/de/users.json b/scm-ui/ui-webapp/public/locales/de/users.json
index 60f9f64423..fd744e768d 100644
--- a/scm-ui/ui-webapp/public/locales/de/users.json
+++ b/scm-ui/ui-webapp/public/locales/de/users.json
@@ -32,7 +32,7 @@
     "errorTitle": "Fehler",
     "errorSubtitle": "Unbekannter Benutzer Fehler",
     "menu": {
-      "navigationLabel": "Benutzer Navigation",
+      "navigationLabel": "Benutzer",
       "informationNavLink": "Informationen",
       "settingsNavLink": "Einstellungen",
       "generalNavLink": "Generell",
diff --git a/scm-ui/ui-webapp/public/locales/en/admin.json b/scm-ui/ui-webapp/public/locales/en/admin.json
index 0357a5dc34..b061901df2 100644
--- a/scm-ui/ui-webapp/public/locales/en/admin.json
+++ b/scm-ui/ui-webapp/public/locales/en/admin.json
@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Administration Navigation",
+      "navigationLabel": "Administration",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General"
diff --git a/scm-ui/ui-webapp/public/locales/en/commons.json b/scm-ui/ui-webapp/public/locales/en/commons.json
index f57a944c65..6b7b6c8fb6 100644
--- a/scm-ui/ui-webapp/public/locales/en/commons.json
+++ b/scm-ui/ui-webapp/public/locales/en/commons.json
@@ -62,7 +62,7 @@
     "previous": "Previous"
   },
   "profile": {
-    "navigationLabel": "Profile Navigation",
+    "navigationLabel": "Profile",
     "informationNavLink": "Information",
     "changePasswordNavLink": "Change password",
     "settingsNavLink": "Settings",
diff --git a/scm-ui/ui-webapp/public/locales/en/config.json b/scm-ui/ui-webapp/public/locales/en/config.json
index a3720cd67c..068238f132 100644
--- a/scm-ui/ui-webapp/public/locales/en/config.json
+++ b/scm-ui/ui-webapp/public/locales/en/config.json
@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Administration Navigation",
+    "navigationLabel": "Administration",
     "title": "Global Configuration",
     "errorTitle": "Error",
     "errorSubtitle": "Unknown Config Error",
diff --git a/scm-ui/ui-webapp/public/locales/en/groups.json b/scm-ui/ui-webapp/public/locales/en/groups.json
index 6911f897f8..069013e5d0 100644
--- a/scm-ui/ui-webapp/public/locales/en/groups.json
+++ b/scm-ui/ui-webapp/public/locales/en/groups.json
@@ -18,7 +18,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown group error",
     "menu": {
-      "navigationLabel": "Group Navigation",
+      "navigationLabel": "Group",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 793c01388d..004cf594ea 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -28,7 +28,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown repository error",
     "menu": {
-      "navigationLabel": "Repository Navigation",
+      "navigationLabel": "Repository",
       "informationNavLink": "Information",
       "branchesNavLink": "Branches",
       "sourcesNavLink": "Code",
diff --git a/scm-ui/ui-webapp/public/locales/en/users.json b/scm-ui/ui-webapp/public/locales/en/users.json
index 0fab330e6f..3353977a18 100644
--- a/scm-ui/ui-webapp/public/locales/en/users.json
+++ b/scm-ui/ui-webapp/public/locales/en/users.json
@@ -32,7 +32,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Unknown user error",
     "menu": {
-      "navigationLabel": "User Navigation",
+      "navigationLabel": "User",
       "informationNavLink": "Information",
       "settingsNavLink": "Settings",
       "generalNavLink": "General",
diff --git a/scm-ui/ui-webapp/public/locales/es/admin.json b/scm-ui/ui-webapp/public/locales/es/admin.json
index 6d7ac4ccc5..e329076b22 100644
--- a/scm-ui/ui-webapp/public/locales/es/admin.json
+++ b/scm-ui/ui-webapp/public/locales/es/admin.json
@@ -1,7 +1,7 @@
 {
   "admin": {
     "menu": {
-      "navigationLabel": "Menú de administración",
+      "navigationLabel": "Administración",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General"
diff --git a/scm-ui/ui-webapp/public/locales/es/commons.json b/scm-ui/ui-webapp/public/locales/es/commons.json
index 06db500845..47638c1d6e 100644
--- a/scm-ui/ui-webapp/public/locales/es/commons.json
+++ b/scm-ui/ui-webapp/public/locales/es/commons.json
@@ -62,7 +62,7 @@
     "previous": "Anterior"
   },
   "profile": {
-    "navigationLabel": "Menú de sección",
+    "navigationLabel": "Sección",
     "informationNavLink": "Información",
     "changePasswordNavLink": "Cambiar contraseña",
     "settingsNavLink": "Ajustes",
diff --git a/scm-ui/ui-webapp/public/locales/es/config.json b/scm-ui/ui-webapp/public/locales/es/config.json
index 8357e72546..4749546a22 100644
--- a/scm-ui/ui-webapp/public/locales/es/config.json
+++ b/scm-ui/ui-webapp/public/locales/es/config.json
@@ -1,6 +1,6 @@
 {
   "config": {
-    "navigationLabel": "Menú de administración",
+    "navigationLabel": "Administración",
     "title": "Configuración global",
     "errorTitle": "Error",
     "errorSubtitle": "Error de configuración desconocido",
diff --git a/scm-ui/ui-webapp/public/locales/es/groups.json b/scm-ui/ui-webapp/public/locales/es/groups.json
index f62cfc62cb..ecb01ffd89 100644
--- a/scm-ui/ui-webapp/public/locales/es/groups.json
+++ b/scm-ui/ui-webapp/public/locales/es/groups.json
@@ -18,7 +18,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de grupo desconocido",
     "menu": {
-      "navigationLabel": "Menú de grupo",
+      "navigationLabel": "Grupo",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General",
diff --git a/scm-ui/ui-webapp/public/locales/es/repos.json b/scm-ui/ui-webapp/public/locales/es/repos.json
index bd1d7d49ab..6758a4841c 100644
--- a/scm-ui/ui-webapp/public/locales/es/repos.json
+++ b/scm-ui/ui-webapp/public/locales/es/repos.json
@@ -28,7 +28,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de repositorio desconocido",
     "menu": {
-      "navigationLabel": "Menú de repositorio",
+      "navigationLabel": "Repositorio",
       "informationNavLink": "Información",
       "branchesNavLink": "Ramas",
       "sourcesNavLink": "Código",
diff --git a/scm-ui/ui-webapp/public/locales/es/users.json b/scm-ui/ui-webapp/public/locales/es/users.json
index 7c8fa4d35e..05f8fa14e3 100644
--- a/scm-ui/ui-webapp/public/locales/es/users.json
+++ b/scm-ui/ui-webapp/public/locales/es/users.json
@@ -32,7 +32,7 @@
     "errorTitle": "Error",
     "errorSubtitle": "Error de usuario desconocido",
     "menu": {
-      "navigationLabel": "Menú de usuario",
+      "navigationLabel": "Usuario",
       "informationNavLink": "Información",
       "settingsNavLink": "Ajustes",
       "generalNavLink": "General",
diff --git a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
index 23b1a58c65..eabd8c1736 100644
--- a/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
+++ b/scm-ui/ui-webapp/src/admin/containers/Admin.tsx
@@ -2,11 +2,18 @@ import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { Redirect, Route, Switch } from "react-router-dom";
-import { History } from "history";
+import { Redirect, Route, RouteComponentProps, Switch } from "react-router-dom";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Links } from "@scm-manager/ui-types";
-import { Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation,
+  isMenuCollapsed,
+  MenuContext,
+  storeMenuCollapsed
+} from "@scm-manager/ui-components";
 import { getAvailablePluginsLink, getInstalledPluginsLink, getLinks } from "../../modules/indexResource";
 import AdminDetails from "./AdminDetails";
 import PluginsOverview from "../plugins/containers/PluginsOverview";
@@ -15,17 +22,30 @@ import RepositoryRoles from "../roles/containers/RepositoryRoles";
 import SingleRepositoryRole from "../roles/containers/SingleRepositoryRole";
 import CreateRepositoryRole from "../roles/containers/CreateRepositoryRole";
 
-type Props = WithTranslation & {
-  links: Links;
-  availablePluginsLink: string;
-  installedPluginsLink: string;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    links: Links;
+    availablePluginsLink: string;
+    installedPluginsLink: string;
+  };
 
-  // context objects
-  match: any;
-  history: History;
+type State = {
+  menuCollapsed: boolean;
 };
 
-class Admin extends React.Component<Props> {
+class Admin extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
+  onCollapseAdminMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       if (url.includes("role")) {
@@ -48,6 +68,7 @@ class Admin extends React.Component<Props> {
 
   render() {
     const { links, availablePluginsLink, installedPluginsLink, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     const url = this.matchedUrl();
     const extensionProps = {
@@ -56,56 +77,68 @@ class Admin extends React.Component<Props> {
     };
 
     return (
-      <Page>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Switch>
-              <Redirect exact from={url} to={`${url}/info`} />
-              <Route path={`${url}/info`} exact component={AdminDetails} />
-              <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
-              <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
-              <Route
-                path={`${url}/plugins/installed`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
-              />
-              <Route
-                path={`${url}/plugins/installed/:page`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
-              />
-              <Route
-                path={`${url}/plugins/available`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
-              />
-              <Route
-                path={`${url}/plugins/available/:page`}
-                exact
-                render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
-              />
-              <Route
-                path={`${url}/role/:role`}
-                render={() => <SingleRepositoryRole baseUrl={`${url}/roles`} history={this.props.history} />}
-              />
-              <Route path={`${url}/roles`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
-              <Route
-                path={`${url}/roles/create`}
-                render={() => <CreateRepositoryRole history={this.props.history} />}
-              />
-              <Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
-              <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
-            </Switch>
-          </div>
-          <div className="column is-one-quarter">
-            <Navigation>
-              <Section label={t("admin.menu.navigationLabel")}>
-                <NavLink to={`${url}/info`} icon="fas fa-info-circle" label={t("admin.menu.informationNavLink")} />
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
+        <Page>
+          <div className="columns">
+            <div className="column">
+              <Switch>
+                <Redirect exact from={url} to={`${url}/info`} />
+                <Route path={`${url}/info`} exact component={AdminDetails} />
+                <Route path={`${url}/settings/general`} exact component={GlobalConfig} />
+                <Redirect exact from={`${url}/plugins`} to={`${url}/plugins/installed/`} />
+                <Route
+                  path={`${url}/plugins/installed`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
+                />
+                <Route
+                  path={`${url}/plugins/installed/:page`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/installed`} installed={true} />}
+                />
+                <Route
+                  path={`${url}/plugins/available`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
+                />
+                <Route
+                  path={`${url}/plugins/available/:page`}
+                  exact
+                  render={() => <PluginsOverview baseUrl={`${url}/plugins/available`} installed={false} />}
+                />
+                <Route
+                  path={`${url}/role/:role`}
+                  render={() => <SingleRepositoryRole baseUrl={`${url}/roles`} history={this.props.history} />}
+                />
+                <Route path={`${url}/roles`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
+                <Route
+                  path={`${url}/roles/create`}
+                  render={() => <CreateRepositoryRole history={this.props.history} />}
+                />
+                <Route path={`${url}/roles/:page`} exact render={() => <RepositoryRoles baseUrl={`${url}/roles`} />} />
+                <ExtensionPoint name="admin.route" props={extensionProps} renderAll={true} />
+              </Switch>
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("admin.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseAdminMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}/info`}
+                  icon="fas fa-info-circle"
+                  label={t("admin.menu.informationNavLink")}
+                  title={t("admin.menu.informationNavLink")}
+                />
                 {(availablePluginsLink || installedPluginsLink) && (
                   <SubNavigation
                     to={`${url}/plugins/`}
                     icon="fas fa-puzzle-piece"
                     label={t("plugins.menu.pluginsNavLink")}
+                    title={t("plugins.menu.pluginsNavLink")}
                   >
                     {installedPluginsLink && (
                       <NavLink to={`${url}/plugins/installed/`} label={t("plugins.menu.installedNavLink")} />
@@ -119,19 +152,24 @@ class Admin extends React.Component<Props> {
                   to={`${url}/roles/`}
                   icon="fas fa-user-shield"
                   label={t("repositoryRole.navLink")}
+                  title={t("repositoryRole.navLink")}
                   activeWhenMatch={this.matchesRoles}
                   activeOnlyWhenExact={false}
                 />
                 <ExtensionPoint name="admin.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("admin.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("admin.menu.settingsNavLink")}
+                  title={t("admin.menu.settingsNavLink")}
+                >
                   <NavLink to={`${url}/settings/general`} label={t("admin.menu.generalNavLink")} />
                   <ExtensionPoint name="admin.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
           </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/containers/Profile.tsx b/scm-ui/ui-webapp/src/containers/Profile.tsx
index 4852993afd..767680f711 100644
--- a/scm-ui/ui-webapp/src/containers/Profile.tsx
+++ b/scm-ui/ui-webapp/src/containers/Profile.tsx
@@ -1,24 +1,49 @@
 import React from "react";
-import { Route, withRouter } from "react-router-dom";
+import { Route, RouteComponentProps, withRouter } from "react-router-dom";
 import { getMe } from "../modules/auth";
 import { compose } from "redux";
 import { connect } from "react-redux";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Me } from "@scm-manager/ui-types";
-import { ErrorPage, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import ChangeUserPassword from "./ChangeUserPassword";
 import ProfileInfo from "./ProfileInfo";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
-  me: Me;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    me: Me;
 
-  // Context props
-  match: any;
+    // Context props
+    match: any;
+  };
+
+type State = {
+  menuCollapsed: boolean;
 };
-type State = {};
 
 class Profile extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
+  onCollapseProfileMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -34,6 +59,7 @@ class Profile extends React.Component<Props, State> {
     const url = this.matchedUrl();
 
     const { me, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (!me) {
       return (
@@ -54,26 +80,41 @@ class Profile extends React.Component<Props, State> {
     };
 
     return (
-      <Page title={me.displayName}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route path={url} exact render={() => <ProfileInfo me={me} />} />
-            <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
-            <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("profile.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("profile.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/password`} label={t("profile.settingsNavLink")}>
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
+        <Page title={me.displayName}>
+          <div className="columns">
+            <div className="column">
+              <Route path={url} exact render={() => <ProfileInfo me={me} />} />
+              <Route path={`${url}/settings/password`} render={() => <ChangeUserPassword me={me} />} />
+              <ExtensionPoint name="profile.route" props={extensionProps} renderAll={true} />
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("profile.navigationLabel")}
+                onCollapse={() => this.onCollapseProfileMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("profile.informationNavLink")}
+                  title={t("profile.informationNavLink")}
+                />
+                <SubNavigation
+                  to={`${url}/settings/password`}
+                  label={t("profile.settingsNavLink")}
+                  title={t("profile.settingsNavLink")}
+                >
                   <NavLink to={`${url}/settings/password`} label={t("profile.changePasswordNavLink")} />
                   <ExtensionPoint name="profile.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
           </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
index 90e15b5e43..362d55a6a6 100644
--- a/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
+++ b/scm-ui/ui-webapp/src/groups/containers/SingleGroup.tsx
@@ -1,38 +1,60 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
+import { Route, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Group } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  Loading,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import { getGroupsLink } from "../../modules/indexResource";
 import { fetchGroupByName, getFetchGroupFailure, getGroupByName, isFetchGroupPending } from "../modules/groups";
 import { Details } from "./../components/table";
 import { EditGroupNavLink, SetPermissionsNavLink } from "./../components/navLinks";
 import EditGroup from "./EditGroup";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
-  name: string;
-  group: Group;
-  loading: boolean;
-  error: Error;
-  groupLink: string;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    name: string;
+    group: Group;
+    loading: boolean;
+    error: Error;
+    groupLink: string;
 
-  // dispatcher functions
-  fetchGroupByName: (p1: string, p2: string) => void;
+    // dispatcher functions
+    fetchGroupByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
-  match: any;
-  history: History;
+type State = {
+  menuCollapsed: boolean;
 };
 
-class SingleGroup extends React.Component<Props> {
+class SingleGroup extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     this.props.fetchGroupByName(this.props.groupLink, this.props.name);
   }
 
+  onCollapseGroupMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   stripEndingSlash = (url: string) => {
     if (url.endsWith("/")) {
       return url.substring(0, url.length - 2);
@@ -46,6 +68,7 @@ class SingleGroup extends React.Component<Props> {
 
   render() {
     const { t, loading, error, group } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleGroup.errorTitle")} subtitle={t("singleGroup.errorSubtitle")} error={error} />;
@@ -63,33 +86,48 @@ class SingleGroup extends React.Component<Props> {
     };
 
     return (
-      <Page title={group.name}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route path={url} exact component={() => <Details group={group} />} />
-            <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
-            <Route
-              path={`${url}/settings/permissions`}
-              exact
-              component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
-            />
-            <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("singleGroup.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleGroup.menu.informationNavLink")} />
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
+        <Page title={group.name}>
+          <div className="columns">
+            <div className="column">
+              <Route path={url} exact component={() => <Details group={group} />} />
+              <Route path={`${url}/settings/general`} exact component={() => <EditGroup group={group} />} />
+              <Route
+                path={`${url}/settings/permissions`}
+                exact
+                component={() => <SetPermissions selectedPermissionsLink={group._links.permissions} />}
+              />
+              <ExtensionPoint name="group.route" props={extensionProps} renderAll={true} />
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("singleGroup.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseGroupMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("singleGroup.menu.informationNavLink")}
+                  title={t("singleGroup.menu.informationNavLink")}
+                />
                 <ExtensionPoint name="group.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("singleGroup.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("singleGroup.menu.settingsNavLink")}
+                  title={t("singleGroup.menu.settingsNavLink")}
+                >
                   <EditGroupNavLink group={group} editUrl={`${url}/settings/general`} />
                   <SetPermissionsNavLink group={group} permissionsUrl={`${url}/settings/permissions`} />
                   <ExtensionPoint name="group.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
           </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
index 34e4c47ab4..ab0e3a2222 100644
--- a/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
+++ b/scm-ui/ui-webapp/src/repos/components/RepositoryNavLink.tsx
@@ -10,6 +10,7 @@ type Props = {
   activeWhenMatch?: (route: any) => boolean;
   activeOnlyWhenExact: boolean;
   icon?: string;
+  title?: string;
 };
 
 /**
diff --git a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
index a5ca949cee..644fe816ef 100644
--- a/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/Changesets.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { compose } from "redux";
-import { withRouter } from "react-router-dom";
+import { withRouter, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
 import { Branch, Changeset, PagedCollection, Repository } from "@scm-manager/ui-types";
 import {
@@ -20,23 +20,21 @@ import {
   selectListAsCollection
 } from "../modules/changesets";
 
-type Props = WithTranslation & {
-  repository: Repository;
-  branch: Branch;
-  page: number;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    repository: Repository;
+    branch: Branch;
+    page: number;
 
-  // State props
-  changesets: Changeset[];
-  list: PagedCollection;
-  loading: boolean;
-  error: Error;
+    // State props
+    changesets: Changeset[];
+    list: PagedCollection;
+    loading: boolean;
+    error: Error;
 
-  // Dispatch props
-  fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
-
-  // context props
-  match: any;
-};
+    // Dispatch props
+    fetchChangesets: (p1: Repository, p2: Branch, p3: number) => void;
+  };
 
 class Changesets extends React.Component<Props> {
   componentDidMount() {
@@ -44,6 +42,10 @@ class Changesets extends React.Component<Props> {
     fetchChangesets(repository, branch, page);
   }
 
+  shouldComponentUpdate(nextProps: Readonly<Props>): boolean {
+    return this.props.changesets !== nextProps.changesets;
+  }
+
   render() {
     const { changesets, loading, error, t } = this.props;
 
diff --git a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
index e0452416f7..c22a4f583e 100644
--- a/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
+++ b/scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
@@ -1,11 +1,20 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Redirect, Route, Switch } from "react-router-dom";
+import { Redirect, Route, Switch, RouteComponentProps } from "react-router-dom";
 import { WithTranslation, withTranslation } from "react-i18next";
-import { History } from "history";
 import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Repository } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  Loading,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation,
+  MenuContext,
+  storeMenuCollapsed,
+  isMenuCollapsed
+} from "@scm-manager/ui-components";
 import { fetchRepoByName, getFetchRepoFailure, getRepository, isFetchRepoPending } from "../modules/repos";
 import RepositoryDetails from "../components/RepositoryDetails";
 import EditRepo from "./EditRepo";
@@ -21,24 +30,33 @@ import CodeOverview from "../codeSection/containers/CodeOverview";
 import ChangesetView from "./ChangesetView";
 import SourceExtensions from "../sources/containers/SourceExtensions";
 
-type Props = WithTranslation & {
-  namespace: string;
-  name: string;
-  repository: Repository;
-  loading: boolean;
-  error: Error;
-  repoLink: string;
-  indexLinks: object;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    namespace: string;
+    name: string;
+    repository: Repository;
+    loading: boolean;
+    error: Error;
+    repoLink: string;
+    indexLinks: object;
 
-  // dispatch functions
-  fetchRepoByName: (link: string, namespace: string, name: string) => void;
+    // dispatch functions
+    fetchRepoByName: (link: string, namespace: string, name: string) => void;
+  };
 
-  // context props
-  history: History;
-  match: any;
+type State = {
+  menuCollapsed: boolean;
 };
 
-class RepositoryRoot extends React.Component<Props> {
+class RepositoryRoot extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     const { fetchRepoByName, namespace, name, repoLink } = this.props;
     fetchRepoByName(repoLink, namespace, name);
@@ -87,8 +105,13 @@ class RepositoryRoot extends React.Component<Props> {
     return `${url}/changesets`;
   };
 
+  onCollapseRepositoryMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   render() {
     const { loading, error, indexLinks, repository, t } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return (
@@ -117,66 +140,76 @@ class RepositoryRoot extends React.Component<Props> {
     }
 
     return (
-      <Page title={repository.namespace + "/" + repository.name}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Switch>
-              <Redirect exact from={this.props.match.url} to={redirectedUrl} />
+      <MenuContext.Provider
+        value={{
+          menuCollapsed,
+          setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed })
+        }}
+      >
+        <Page title={repository.namespace + "/" + repository.name}>
+          <div className="columns">
+            <div className="column">
+              <Switch>
+                <Redirect exact from={this.props.match.url} to={redirectedUrl} />
 
-              {/* redirect pre 2.0.0-rc2 links */}
-              <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`} />
-              <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`} />
-              <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
-              <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`} />
-              <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`} />
+                {/* redirect pre 2.0.0-rc2 links */}
+                <Redirect from={`${url}/changeset/:id`} to={`${url}/code/changeset/:id`} />
+                <Redirect exact from={`${url}/sources`} to={`${url}/code/sources`} />
+                <Redirect from={`${url}/sources/:revision/:path*`} to={`${url}/code/sources/:revision/:path*`} />
+                <Redirect exact from={`${url}/changesets`} to={`${url}/code/changesets`} />
+                <Redirect from={`${url}/branch/:branch/changesets`} to={`${url}/code/branch/:branch/changesets/`} />
 
-              <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository} />} />
-              <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository} />} />
-              <Route
-                path={`${url}/settings/permissions`}
-                render={() => (
-                  <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
-                )}
-              />
-              <Route
-                exact
-                path={`${url}/code/changeset/:id`}
-                render={() => <ChangesetView repository={repository} />}
-              />
-              <Route
-                path={`${url}/code/sourceext/:extension`}
-                exact={true}
-                render={() => <SourceExtensions repository={repository} />}
-              />
-              <Route
-                path={`${url}/code/sourceext/:extension/:revision/:path*`}
-                render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
-              />
-              <Route
-                path={`${url}/code`}
-                render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository} />}
-              />
-              <Route
-                path={`${url}/branch/:branch`}
-                render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
-              />
-              <Route
-                path={`${url}/branches`}
-                exact={true}
-                render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />}
-              />
-              <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
-              <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
-            </Switch>
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("repositoryRoot.menu.navigationLabel")}>
+                <Route path={`${url}/info`} exact component={() => <RepositoryDetails repository={repository} />} />
+                <Route path={`${url}/settings/general`} component={() => <EditRepo repository={repository} />} />
+                <Route
+                  path={`${url}/settings/permissions`}
+                  render={() => (
+                    <Permissions namespace={this.props.repository.namespace} repoName={this.props.repository.name} />
+                  )}
+                />
+                <Route
+                  exact
+                  path={`${url}/code/changeset/:id`}
+                  render={() => <ChangesetView repository={repository} />}
+                />
+                <Route
+                  path={`${url}/code/sourceext/:extension`}
+                  exact={true}
+                  render={() => <SourceExtensions repository={repository} />}
+                />
+                <Route
+                  path={`${url}/code/sourceext/:extension/:revision/:path*`}
+                  render={() => <SourceExtensions repository={repository} baseUrl={`${url}/code/sources`} />}
+                />
+                <Route
+                  path={`${url}/code`}
+                  render={() => <CodeOverview baseUrl={`${url}/code`} repository={repository} />}
+                />
+                <Route
+                  path={`${url}/branch/:branch`}
+                  render={() => <BranchRoot repository={repository} baseUrl={`${url}/branch`} />}
+                />
+                <Route
+                  path={`${url}/branches`}
+                  exact={true}
+                  render={() => <BranchesOverview repository={repository} baseUrl={`${url}/branch`} />}
+                />
+                <Route path={`${url}/branches/create`} render={() => <CreateBranch repository={repository} />} />
+                <ExtensionPoint name="repository.route" props={extensionProps} renderAll={true} />
+              </Switch>
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("repositoryRoot.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseRepositoryMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
                 <ExtensionPoint name="repository.navigation.topLevel" props={extensionProps} renderAll={true} />
                 <NavLink
                   to={`${url}/info`}
                   icon="fas fa-info-circle"
                   label={t("repositoryRoot.menu.informationNavLink")}
+                  title={t("repositoryRoot.menu.informationNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -186,6 +219,7 @@ class RepositoryRoot extends React.Component<Props> {
                   label={t("repositoryRoot.menu.branchesNavLink")}
                   activeWhenMatch={this.matchesBranches}
                   activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.branchesNavLink")}
                 />
                 <RepositoryNavLink
                   repository={repository}
@@ -195,18 +229,23 @@ class RepositoryRoot extends React.Component<Props> {
                   label={t("repositoryRoot.menu.sourcesNavLink")}
                   activeWhenMatch={this.matchesCode}
                   activeOnlyWhenExact={false}
+                  title={t("repositoryRoot.menu.sourcesNavLink")}
                 />
                 <ExtensionPoint name="repository.navigation" props={extensionProps} renderAll={true} />
-                <SubNavigation to={`${url}/settings/general`} label={t("repositoryRoot.menu.settingsNavLink")}>
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("repositoryRoot.menu.settingsNavLink")}
+                  title={t("repositoryRoot.menu.settingsNavLink")}
+                >
                   <EditRepoNavLink repository={repository} editUrl={`${url}/settings/general`} />
                   <PermissionsNavLink permissionUrl={`${url}/settings/permissions`} repository={repository} />
                   <ExtensionPoint name="repository.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
           </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }
diff --git a/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts b/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
index b0d9675c40..45191b1e69 100644
--- a/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/changesets.test.ts
@@ -581,6 +581,31 @@ describe("changesets", () => {
       ]);
     });
 
+    it("should return always the same changeset array for the given parameters", () => {
+      const state = {
+        changesets: {
+          "foo/bar": {
+            byId: {
+              id2: {
+                id: "id2"
+              },
+              id1: {
+                id: "id1"
+              }
+            },
+            byBranch: {
+              "": {
+                entries: ["id1", "id2"]
+              }
+            }
+          }
+        }
+      };
+      const one = getChangesets(state, repository);
+      const two = getChangesets(state, repository);
+      expect(one).toBe(two);
+    });
+
     it("should return true, when fetching changesets is pending", () => {
       const state = {
         pending: {
@@ -639,5 +664,14 @@ describe("changesets", () => {
       expect(collection.page).toBe(1);
       expect(collection.pageTotal).toBe(10);
     });
+
+    it("should return always the same empty object", () => {
+      const state = {
+        changesets: {}
+      };
+      const one = selectListAsCollection(state, repository);
+      const two = selectListAsCollection(state, repository);
+      expect(one).toBe(two);
+    });
   });
 });
diff --git a/scm-ui/ui-webapp/src/repos/modules/changesets.ts b/scm-ui/ui-webapp/src/repos/modules/changesets.ts
index 5be98cf4df..3e75a1668d 100644
--- a/scm-ui/ui-webapp/src/repos/modules/changesets.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/changesets.ts
@@ -3,6 +3,7 @@ import { apiClient, urls } from "@scm-manager/ui-components";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
 import { Action, Branch, PagedCollection, Repository } from "@scm-manager/ui-types";
+import memoizeOne from "memoize-one";
 
 export const FETCH_CHANGESETS = "scm/repos/FETCH_CHANGESETS";
 export const FETCH_CHANGESETS_PENDING = `${FETCH_CHANGESETS}_${PENDING_SUFFIX}`;
@@ -254,10 +255,15 @@ export function getChangesets(state: object, repository: Repository, branch?: Br
     return null;
   }
 
+  return collectChangesets(stateRoot, changesets);
+}
+const mapChangesets = (stateRoot, changesets) => {
   return changesets.entries.map((id: string) => {
     return stateRoot.byId[id];
   });
-}
+};
+
+const collectChangesets = memoizeOne(mapChangesets);
 
 export function getChangeset(state: object, repository: Repository, id: string) {
   const key = createItemId(repository);
@@ -291,6 +297,8 @@ export function getFetchChangesetsFailure(state: object, repository: Repository,
   return getFailure(state, FETCH_CHANGESETS, createItemId(repository, branch));
 }
 
+const EMPTY = {};
+
 const selectList = (state: object, repository: Repository, branch?: Branch) => {
   const repoId = createItemId(repository);
 
@@ -302,7 +310,7 @@ const selectList = (state: object, repository: Repository, branch?: Branch) => {
       return repoState.byBranch[branchName];
     }
   }
-  return {};
+  return EMPTY;
 };
 
 const selectListEntry = (state: object, repository: Repository, branch?: Branch): object => {
@@ -310,7 +318,7 @@ const selectListEntry = (state: object, repository: Repository, branch?: Branch)
   if (list.entry) {
     return list.entry;
   }
-  return {};
+  return EMPTY;
 };
 
 export const selectListAsCollection = (state: object, repository: Repository, branch?: Branch): PagedCollection => {
diff --git a/scm-ui/ui-webapp/src/repos/modules/repos.ts b/scm-ui/ui-webapp/src/repos/modules/repos.ts
index dbea9c24fd..38da52611f 100644
--- a/scm-ui/ui-webapp/src/repos/modules/repos.ts
+++ b/scm-ui/ui-webapp/src/repos/modules/repos.ts
@@ -3,6 +3,7 @@ import * as types from "../../modules/types";
 import { Action, Repository, RepositoryCollection } from "@scm-manager/ui-types";
 import { isPending } from "../../modules/pending";
 import { getFailure } from "../../modules/failure";
+import React from "react";
 
 export const FETCH_REPOS = "scm/repos/FETCH_REPOS";
 export const FETCH_REPOS_PENDING = `${FETCH_REPOS}_${types.PENDING_SUFFIX}`;
@@ -155,7 +156,12 @@ export function fetchRepoFailure(namespace: string, name: string, error: Error):
 
 // create repo
 
-export function createRepo(link: string, repository: Repository, initRepository: boolean, callback?: (repo: Repository) => void) {
+export function createRepo(
+  link: string,
+  repository: Repository,
+  initRepository: boolean,
+  callback?: (repo: Repository) => void
+) {
   return function(dispatch: any) {
     dispatch(createRepoPending());
     const repoLink = initRepository ? link + "?initialize=true" : link;
diff --git a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
index 8b0826ee6b..1973cf3fd4 100644
--- a/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
+++ b/scm-ui/ui-webapp/src/users/containers/SingleUser.tsx
@@ -1,10 +1,18 @@
 import React from "react";
 import { connect } from "react-redux";
-import { Route } from "react-router-dom";
-import { History } from "history";
+import { Route, RouteComponentProps } from "react-router-dom";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { User } from "@scm-manager/ui-types";
-import { ErrorPage, Loading, Navigation, NavLink, Page, Section, SubNavigation } from "@scm-manager/ui-components";
+import {
+  ErrorPage,
+  isMenuCollapsed,
+  Loading,
+  MenuContext,
+  NavLink,
+  Page,
+  SecondaryNavigation,
+  SubNavigation
+} from "@scm-manager/ui-components";
 import { Details } from "./../components/table";
 import EditUser from "./EditUser";
 import { fetchUserByName, getFetchUserFailure, getUserByName, isFetchUserPending } from "../modules/users";
@@ -13,23 +21,33 @@ import { WithTranslation, withTranslation } from "react-i18next";
 import { getUsersLink } from "../../modules/indexResource";
 import SetUserPassword from "../components/SetUserPassword";
 import SetPermissions from "../../permissions/components/SetPermissions";
+import { storeMenuCollapsed } from "@scm-manager/ui-components/src";
 
-type Props = WithTranslation & {
-  name: string;
-  user: User;
-  loading: boolean;
-  error: Error;
-  usersLink: string;
+type Props = RouteComponentProps &
+  WithTranslation & {
+    name: string;
+    user: User;
+    loading: boolean;
+    error: Error;
+    usersLink: string;
 
-  // dispatcher function
-  fetchUserByName: (p1: string, p2: string) => void;
+    // dispatcher function
+    fetchUserByName: (p1: string, p2: string) => void;
+  };
 
-  // context objects
-  match: any;
-  history: History;
+type State = {
+  menuCollapsed: boolean;
 };
 
-class SingleUser extends React.Component<Props> {
+class SingleUser extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      menuCollapsed: isMenuCollapsed()
+    };
+  }
+
   componentDidMount() {
     this.props.fetchUserByName(this.props.usersLink, this.props.name);
   }
@@ -41,12 +59,17 @@ class SingleUser extends React.Component<Props> {
     return url;
   };
 
+  onCollapseUserMenu = (collapsed: boolean) => {
+    this.setState({ menuCollapsed: collapsed }, () => storeMenuCollapsed(collapsed));
+  };
+
   matchedUrl = () => {
     return this.stripEndingSlash(this.props.match.url);
   };
 
   render() {
     const { t, loading, error, user } = this.props;
+    const { menuCollapsed } = this.state;
 
     if (error) {
       return <ErrorPage title={t("singleUser.errorTitle")} subtitle={t("singleUser.errorSubtitle")} error={error} />;
@@ -64,33 +87,48 @@ class SingleUser extends React.Component<Props> {
     };
 
     return (
-      <Page title={user.displayName}>
-        <div className="columns">
-          <div className="column is-three-quarters">
-            <Route path={url} exact component={() => <Details user={user} />} />
-            <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
-            <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
-            <Route
-              path={`${url}/settings/permissions`}
-              component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
-            />
-            <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
-          </div>
-          <div className="column">
-            <Navigation>
-              <Section label={t("singleUser.menu.navigationLabel")}>
-                <NavLink to={`${url}`} icon="fas fa-info-circle" label={t("singleUser.menu.informationNavLink")} />
-                <SubNavigation to={`${url}/settings/general`} label={t("singleUser.menu.settingsNavLink")}>
+      <MenuContext.Provider
+        value={{ menuCollapsed, setMenuCollapsed: (collapsed: boolean) => this.setState({ menuCollapsed: collapsed }) }}
+      >
+        <Page title={user.displayName}>
+          <div className="columns">
+            <div className="column">
+              <Route path={url} exact component={() => <Details user={user} />} />
+              <Route path={`${url}/settings/general`} component={() => <EditUser user={user} />} />
+              <Route path={`${url}/settings/password`} component={() => <SetUserPassword user={user} />} />
+              <Route
+                path={`${url}/settings/permissions`}
+                component={() => <SetPermissions selectedPermissionsLink={user._links.permissions} />}
+              />
+              <ExtensionPoint name="user.route" props={extensionProps} renderAll={true} />
+            </div>
+            <div className={menuCollapsed ? "column is-1" : "column is-3"}>
+              <SecondaryNavigation
+                label={t("singleUser.menu.navigationLabel")}
+                onCollapse={() => this.onCollapseUserMenu(!menuCollapsed)}
+                collapsed={menuCollapsed}
+              >
+                <NavLink
+                  to={`${url}`}
+                  icon="fas fa-info-circle"
+                  label={t("singleUser.menu.informationNavLink")}
+                  title={t("singleUser.menu.informationNavLink")}
+                />
+                <SubNavigation
+                  to={`${url}/settings/general`}
+                  label={t("singleUser.menu.settingsNavLink")}
+                  title={t("singleUser.menu.settingsNavLink")}
+                >
                   <EditUserNavLink user={user} editUrl={`${url}/settings/general`} />
                   <SetPasswordNavLink user={user} passwordUrl={`${url}/settings/password`} />
                   <SetPermissionsNavLink user={user} permissionsUrl={`${url}/settings/permissions`} />
                   <ExtensionPoint name="user.setting" props={extensionProps} renderAll={true} />
                 </SubNavigation>
-              </Section>
-            </Navigation>
+              </SecondaryNavigation>
+            </div>
           </div>
-        </div>
-      </Page>
+        </Page>
+      </MenuContext.Provider>
     );
   }
 }