Added list sorting styles, Yet to add functionality

resources/assets/icons/add.svg

@@ -1,4 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-    <path d="M0 0h24v24H0z" fill="none"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 13.3h-5.7V19h-2.6v-5.7H5v-2.6h5.7V5h2.6v5.7H19z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

resources/assets/icons/sort-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.034l6.57-6.554h-4.927V2.966h-3.286V14.48H5.43z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

resources/assets/icons/sort-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.966L5.43 9.52h4.927v11.514h3.286V9.52h4.927z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

resources/assets/sass/_grid.scss

@@ -197,6 +197,9 @@ div[class^="col-"] img {
   display: grid;
   grid-column-gap: $-l;
   grid-row-gap: $-l;
+  &.half {
+    grid-template-columns: 1fr 1fr;
+  }
   &.third {
     grid-template-columns: 1fr 1fr 1fr;
   }
@@ -956,6 +959,9 @@ div[class^="col-"] img {
     margin-left: auto;
     margin-right: auto;
   }
+  &.v-center {
+    align-items: center;
+  }
 }
 
 @each $sizeLetter, $size in $spacing {

resources/assets/sass/styles.scss

@@ -255,3 +255,36 @@ $btt-size: 40px;
   height:100%;
   z-index: 150;
 }
+
+.list-sort-container {
+  display: inline-block;
+  .list-sort {
+    display: inline-grid;
+    margin-left: $-s;
+    grid-template-columns: 120px 40px;
+    border: 2px solid #DDD;
+    border-radius: 4px;
+  }
+  .list-sort-label {
+    font-weight: bold;
+    display: inline-block;
+    color: #888;
+  }
+  .list-sort-type {
+    text-align: left;
+  }
+  .list-sort-type, .list-sort-dir {
+    padding: $-xs $-s;
+    cursor: pointer;
+  }
+  .list-sort-dir {
+    border-left: 2px solid #DDD;
+    fill: #888;
+    .svg-icon {
+      transition: transform ease-in-out 120ms;
+    }
+    &:hover .svg-icon {
+      transform: rotate(180deg);
+    }
+  }
+}

resources/views/books/list.blade.php

@@ -1,6 +1,28 @@
 
 <div class="content-wrap card {{ $booksViewType === 'list' ? 'thin' : '' }}">
-    <h1 class="list-heading">{{ trans('entities.books') }}</h1>
+    <div class="grid halves v-center">
+        <h1 class="list-heading">{{ trans('entities.books') }}</h1>
+        <div class="text-right">
+
+            <div class="list-sort-container">
+                <div class="list-sort-label">Sort</div>
+                <div class="list-sort">
+                    <div class="list-sort-type dropdown-container" dropdown>
+                        <div dropdown-toggle>Name</div>
+                        <ul>
+                            <li><a href="#">Name</a></li>
+                            <li><a href="#">Created Date</a></li>
+                            <li><a href="#">Popularity</a></li>
+                        </ul>
+                    </div>
+                    <div class="list-sort-dir">
+                        @icon('sort-up')
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
     @if(count($books) > 0)
         @if($booksViewType === 'list')
             <div class="entity-list">