tables, navigation, mobile scss

matsen-tool/src/app/_components/layout/two-column/two-column.component.html

@@ -1,5 +1,6 @@
-<div class="row ps-2">
-    <div class="col-2 spt-sidebar">
+<div class="row ps-2 position-relative">
+    <div id="btn-sidebar" (click)="toggleSidebar()" [class.nav-open]="navOpen"></div>
+    <div class="col-2 spt-sidebar" [class.nav-open]="navOpen">
         <ul class="nav flex-column">
             <li class="nav-item mb-3">
                 <a class="card" routerLink="/customer" routerLinkActive="active">

matsen-tool/src/app/_components/layout/two-column/two-column.component.ts

@@ -8,11 +8,17 @@ import {Location} from "@angular/common";
 })
 export class TwoColumnComponent {
 
+    public navOpen: boolean;
     constructor(private _location: Location) {
+        this.navOpen = false;
     }
 
     goBack() {
         this._location.back();
     }
 
+    toggleSidebar() {
+        this.navOpen = !this.navOpen;
+    }
+
 }

matsen-tool/src/assets/scss/_form.scss

@@ -9,7 +9,6 @@
     align-items: center;
     cursor: pointer;
     padding: 2px 0;
-    border-radius: 6px;
     @include transition();
     &:hover {
       background: $color-matsen;

matsen-tool/src/assets/scss/_sidebar.scss

@@ -1,9 +1,52 @@
+#btn-sidebar {
+  @media only screen and (min-width: 1200px) {
+    display: none;
+  }
+  position: absolute;
+  right: 28px;
+  top: 16px;
+  width: 34px;
+  height: 20px;
+  padding: 0;
+  cursor: pointer;
+  @include transition();
+  &:before, &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+  }
+  &:before {
+    height: 11px;
+    border-top: 2px solid rgb(43, 58, 68);
+    border-bottom: 2px solid rgb(43, 58, 68);
+  }
+  &:after {
+    top: 18px;
+    height: 2px;
+    background: rgb(43, 58, 68);
+  }
+  &.nav-open {
+    right: 288px;
+  }
+}
 .spt-sidebar {
   position: relative;
   padding: 0;
+  @include transition();
   @media only screen and (max-width: 1199px) {
-    //margin-left: calc(-100vw / 12 * 2);
-    display: none;
+    position: absolute;
+    right: -248px;
+    top: 0;
+    z-index: 100;
+    background: rgb(43, 58, 68);
+    width: 260px;
+    height: 100%;
+    &.nav-open {
+      right: 12px;
+    }
   }
   .card {
     background: transparent;
@@ -11,6 +54,9 @@
     border-bottom: 1px solid #fff;
     width: 100%;
     text-decoration: none;
+    &:hover {
+      background: #556169;
+    }
     .card-body {
       min-height: 50px;
       text-transform: uppercase;

matsen-tool/src/assets/scss/_table.scss

@@ -6,6 +6,7 @@
 
 table {
   width: 100%;
+
   img {
     width: 40px;
     height: auto;
@@ -22,11 +23,20 @@ th.mat-sort-header-sorted {
     padding-top: 8px;
     padding-bottom: 8px;
   }
+
+  .mat-mdc-row {
+    &:hover {
+      .mdc-data-table__cell {
+        background: #fbfbfb;
+      }
+    }
+  }
 }
 
 .mat-elevation-z8,
 .mat-mdc-elevation-specific.mat-elevation-z8 {
   box-shadow: none;
+
   th {
     background: #f2f2f2 !important;
     border-top: 1px solid #304049;
@@ -37,28 +47,35 @@ th.mat-sort-header-sorted {
 .mat-mdc-paginator {
   background: transparent !important;
   border-top: 1px solid #2b3a44;
+
   .mat-mdc-paginator-container {
     display: flex;
     justify-content: space-between;
   }
+
   .mat-mdc-paginator-page-size-label,
   .mat-mdc-paginator-range-label {
     color: #C1C1C1;
   }
+
   .mat-mdc-text-field-wrapper {
     border-radius: 0;
   }
+
   .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
   .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
   .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
     border: none;
   }
+
   .mat-mdc-header-cell {
     border: none;
   }
+
   .mat-mdc-cell {
     border-bottom: 1px solid #c1c1c1;
   }
+
   tbody {
     tr:first-child {
       td {
@@ -67,6 +84,7 @@ th.mat-sort-header-sorted {
     }
   }
 }
+
 app-paging > .mat-mdc-paginator:first-child {
   border-width: 4px;
 }