add bg-primary classes

resources/sass/components/nav.scss

@@ -1,117 +1,14 @@
 
-//nav {
-//    background-color: $mediumDark;
-//    height: 100vh;
-//    width: 15rem;
-//    flex-shrink: 0;
-//    display: flex;
-//    flex-direction: column;
-//    box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
-//    transition: width $transition-delay;
-//
-//    &.small {
-//        width: 5.5rem;
-//    }
-//
-//    hr {
-//        width: 90%;
-//        border-radius: 1px;
-//        border: 1px solid $dark;
-//    }
-//
-//    .nav-item {
-//        display: flex;
-//        align-items: center;
-//        text-decoration: none;
-//        color: $light;
-//        padding-top: 1rem;
-//        padding-bottom: 1rem;
-//
-//        span {
-//            overflow: hidden;
-//        }
-//
-//        svg {
-//            margin: 0 1rem;
-//            width: 3rem;
-//            transition: fill 0.2s;
-//            fill: $light;
-//        }
-//
-//        &:hover {
-//            color: $dark;
-//            background-color: $light;
-//            transition: color 0.2s, background-color 0.2s;
-//
-//            svg {
-//                fill: $dark;
-//                transition: fill 0.2s;
-//            }
-//        }
-//
-//        //&:visited {
-//        //    color: $dark;
-//        //}
-//    }
-//}
-//
-//.site-logo {
-//    width: 3rem;
-//    fill: $light;
-//    transition: fill 0.2s;
-//
-//    &:hover {
-//        fill: $dark;
-//        transition: fill 0.2s;
-//    }
-//}
-//
-//.navhidden {
-//    width: 0;
-//}
-//
-//
-//.site-logo-main {
-//    @extend .site-logo;
-//    display: block;
-//    margin: 1rem;
-//    width: 13rem;
-//    transition: width $transition-delay;
-//
-//    svg {
-//
-//        width: 100%;
-//    }
-//
-//    &.small {
-//        //padding-bottom: 10rem;
-//        width: 3.5rem;
-//    }
-//}
-//
-//.nav-toggle {
-//    @extend .site-logo;
-//    align-self: center;
-//
-//    svg {
-//        transition: transform $transition-delay;
-//    }
-//
-//    svg.small {
-//            transform: rotate(-180deg);
-//    }
-//}
-
 nav {
     @apply w-48;
     transition: width 0.3s;
 
     svg {
-        @apply fill-current text-orange-600 w-12 p-2;
+        @apply fill-current text-primary-600 w-12 p-2;
         transition: color 0.3s;
 
         &:hover {
-            @apply text-orange-800;
+            @apply text-primary-800;
         }
     }
 
@@ -133,16 +30,16 @@ nav {
             transition: width 0.3s;
 
             &:hover {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
 
         &:hover {
-            @apply bg-orange-500;
+            @apply bg-primary-500;
 
             span,
             svg {
-                @apply text-orange-800;
+                @apply text-primary-800;
             }
         }
     }