[Fix] Several ui fixes (#205)

* Fix sidebar

* Use squircle mask for header links

* Firefox mask-box-image fix

src/backend/views/components/sidebar.twig

@@ -5,7 +5,7 @@
     {{ svg('menu') }} Table of contents
   </div>
 
-  <aside class="docs-sidebar__content docs-sidebar__content--hidden">
+  <aside class="docs-sidebar__content docs-sidebar__content--invisible">
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
         <a class="docs-sidebar__section-title-wrapper"

src/frontend/js/modules/sidebar.js

@@ -33,6 +33,7 @@ export default class Sidebar {
       sidebarToggler: 'docs-sidebar__toggler',
       sidebarContent: 'docs-sidebar__content',
       sidebarContentHidden: 'docs-sidebar__content--hidden',
+      sidebarContentInvisible: 'docs-sidebar__content--invisible',
     };
   }
 
@@ -173,6 +174,6 @@ export default class Sidebar {
    * @returns {void}
    */
   ready() {
-    this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentHidden);
+    this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
   }
 }

src/frontend/styles/components/button.pcss

@@ -12,7 +12,6 @@
   cursor: pointer;
   transition-property: background-color;
   transition-duration: 0.1s;
-  border-radius: 8px;
 
   @apply --squircle;
 

src/frontend/styles/components/header.pcss

@@ -35,9 +35,10 @@
   &__menu-link {
     padding: 4px 10px;
     font-weight: 500;
-    border-radius: 8px;
     transition: background-color .13s;
 
+    @apply --squircle;
+
     &:hover {
       background-color: var(--color-link-hover);
     }

src/frontend/styles/components/sidebar.pcss

@@ -25,6 +25,10 @@
     &--hidden {
       display: none;
     }
+
+    &--invisible {
+      visibility: hidden;
+    }
   }
 
 
@@ -58,7 +62,7 @@
   }
 
   &__section:not(:first-child) {
-    margin-top: 20px;
+    margin-top: 19px;
   }
 
   &__section-title {

src/frontend/styles/vars.pcss

@@ -78,6 +78,8 @@
   }
 
   --squircle {
+    border-radius: 8px;
+    
     @supports(-webkit-mask-box-image: url('')){
       border-radius: 0;
       -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;