Show listings of a path

app/styles/_colors.scss

@@ -10,6 +10,9 @@ $light-grey-1: #b5c3d1;
     a {
       color: $light-grey-1;
       text-decoration: none;
+      &:hover {
+        color: #fff;
+      }
     }
   }
 

app/styles/_layout.scss

@@ -24,21 +24,6 @@
     flex: 0 0 16rem;
     overflow: auto;
     padding: 2rem;
-
-    nav {
-      margin-top: 6rem;
-      margin-bottom: 6rem;
-
-      ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-      a {
-        display: block;
-        padding: 0.2rem 0;
-      }
-    }
   }
 
   > main {

app/styles/app.scss

@@ -11,5 +11,6 @@ body {
   padding: 0;
 }
 
+@import "components/categories-nav";
 @import "components/directory-listing";
 @import "components/item-icon";

app/styles/components/_categories-nav.scss

@@ -0,0 +1,18 @@
+#app-container {
+  > aside {
+    nav {
+      margin-top: 6rem;
+      margin-bottom: 6rem;
+
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 0.2rem 0;
+      }
+    }
+  }
+}

app/styles/components/_directory-listing.scss

@@ -11,9 +11,17 @@
     tbody {
       tr {
         border-bottom: 1px solid #ececec;
-      }
-      tr:first-of-type {
-        border-top: 1px solid #ececec;
+
+        &:first-of-type {
+          border-top: 1px solid #ececec;
+        }
+
+        &:hover {
+          td {
+            opacity: 0.7;
+            cursor: pointer;
+          }
+        }
       }
       td {
         padding: 1rem 1.5rem;

app/styles/components/_item-icon.scss

@@ -1,4 +1,5 @@
 .item-icon {
+  text-align: center;
 
   img {
     height: 1.2rem;