Improve styles for admin sidebar

Also add a little animation on arrow when menu opens

app/assets/stylesheets/admin.scss

@@ -435,11 +435,11 @@ code {
     [class^="icon-"] {
       color: #fff;
       display: inline-block;
-      font-size: rem-calc(24);
+      font-size: rem-calc(20);
       line-height: $line-height;
-      padding: $line-height / 2 $line-height / 4;
+      text-align: center;
-      padding-left: 0;
       vertical-align: middle;
+      width: $line-height * 1.5;
     }
   }
 
@@ -458,13 +458,20 @@ code {
       border-left: 2px solid $sidebar-active;
       font-weight: bold;
     }
+
+    &[aria-expanded="true"] {
+
+      > a::after {
+        transform: rotate(180deg);
+      }
+    }
   }
 
   li a {
     color: #fff;
     display: block;
-    line-height: rem-calc(48);
+    line-height: $line-height * 2;
-    padding-left: rem-calc(12);
+    padding-left: $line-height / 4;
     vertical-align: top;
 
     &:hover {
@@ -478,12 +485,13 @@ code {
 
     > a::after {
       border: 0;
-      content: "\61" !important;
+      content: "\f078";
-      font-family: "icons" !important;
+      font-family: "Font Awesome 5 Free";
+      font-weight: bold;
       height: auto;
-      position: absolute !important;
+      position: absolute;
-      right: 30px;
+      right: 24px;
-      top: 6px !important;
+      transition: 0.25s;
     }
   }
 

app/assets/stylesheets/layout.scss

@@ -446,18 +446,18 @@ a {
 }
 
 .menu-and-content {
-  $side-menu-min-width: 250px;
+  $side-menu-min-width: rem-calc(240);
 
   @include breakpoint(medium) {
     display: flex;
 
     > nav {
-      flex: 25%;
+      flex: 20%;
       min-width: $side-menu-min-width;
 
       + * {
-        flex: 75%;
+        flex: 80%;
-        padding: $line-height !important;
+        padding: $line-height;
       }
     }
 
@@ -478,7 +478,7 @@ a {
       z-index: 12;
 
       + * {
-        padding: $line-height !important;
+        padding: $line-height;
       }
     }