update small-menu

assets/css/app.scss

@@ -167,35 +167,35 @@ pre[class*="language-"] {
 }
 
 .small-menu {
+    $radius: 8px;
+
     background: $color-small-menu-background;
     padding: 5px;
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 2000;
+    border-top-right-radius: $radius + 5;
+    border-top-left-radius: $radius + 5;
 
     .navigation {
         padding-top: 0;
-        display: none;
-        margin-top: 10px;
+        margin-bottom: 10px;
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.8s ease-in-out;
 
         li {
-            $radius: 8px;
-
             &:first-child, &:first-child a {
                 border-top-right-radius: $radius;
                 border-top-left-radius: $radius;
             }
-
-            &:last-child, &:last-child a {
-                border-bottom-right-radius: $radius;
-                border-bottom-left-radius: $radius;
-            }
         }
     }
 
     &.is-open .navigation {
-        display: block;
+        max-height: 800px;
+        transition: max-height 0.8s ease-in-out;
     }
 
     .logo-svg {

templates/module/_navigation.html.twig

@@ -55,10 +55,6 @@
     </div>
 </div>
 <div class="small-menu hidden-large hidden-medium visible-small">
-    <a href="{{ safe_path('blog_menu_posts') }}">
-        {{ include('module/_logo.html.twig') }}
-    </a>
-
     <nav class="navigation">
         {% if menu %}
             <ul>
@@ -86,6 +82,10 @@
         {% endif %}
     </nav>
 
+    <a href="{{ safe_path('blog_menu_posts') }}">
+        {{ include('module/_logo.html.twig') }}
+    </a>
+
     <button class="menu-opener" aria-label="Menu">
         <svg width="50" height="46" viewBox="0 0 100 100">
             <path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058" />