init crater

resources/assets/sass/layouts/crater-sidebar.scss

@@ -0,0 +1,63 @@
+.sidebar-left {
+
+    .menu-group {
+        margin-bottom: 40px;
+
+        &:first-child {
+            margin-top: 29px;
+        }
+    }
+
+    .menu-item {
+        cursor: pointer;
+        padding: 10px 0px 11px 0px;
+        display: block;
+
+        .menu-text {
+            font-family: Poppins;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 14px;
+            line-height: 21px;
+            color: $ls-color-black;
+        }
+
+        .menu-icon {
+            margin-left: 25px;
+            color: $ls-color-gray--dark;
+            width: 30px;
+            margin-left: 25px;
+            display: inline-block;
+            font-size: inherit;
+            height: 1em;
+            overflow: visible;
+            vertical-align: -0.125em;
+        }
+
+    }
+
+    .active {
+        background-color: $ls-color-gray--very-light;
+        position: relative;
+
+        &::after {
+            position: absolute;
+            height: 100%;
+            content: '';
+            left: 0;
+            top: 0;
+            width: 3px;
+            background-color: $ls-color-primary;
+        }
+
+        .menu-text {
+            color: $ls-color-primary !important;
+        }
+
+        .menu-icon {
+            color: $ls-color-primary !important;
+        }
+
+    }
+
+}

resources/assets/sass/layouts/layout-icon-sidebar.scss

@@ -0,0 +1,33 @@
+.layout-icon-sidebar .sidebar-left {
+    width: 200px;
+
+    .side-nav {
+
+        .collapse-group .collapse-group-item .collapse-item-title {
+            text-align: center;
+
+            a {
+                padding: 15px;
+            }
+            a  i {
+                display: block;
+                width: 100%;
+                margin-bottom: 0.5em;
+                font-size: 30px;
+            }
+            .arrow{
+                position: absolute;
+                right: 21px;
+                top: 50%;
+                margin-top: -8px;
+            }
+        }
+        .collapse-group .collapse-group-item {
+            text-align: center;
+            
+            a {
+                padding: 15px;
+            }
+        }
+    }
+}

resources/assets/sass/layouts/layout.scss

@@ -0,0 +1,146 @@
+.site-header {
+    background-color: $ls-color-primary;
+    height: 60px;
+    left: 0;
+    padding: 12px 30px;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+
+.sidebar-left {
+    background: $ls-color-secondary;
+    height: 100%;
+    left: 0;
+    padding: 60px 0 10px;
+    position: fixed;
+    top: 0;
+    width: 240px;
+    z-index: 30;
+}
+
+.sidebar-body {
+    height: 100%;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        -webkit-appearance: none;
+    }
+
+    &::-webkit-scrollbar:vertical {
+        width: 8px;
+    }
+
+    &::-webkit-scrollbar:horizontal {
+        height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        border: 2px solid rgba(255, 255, 255, 0.0);
+        background-color: rgba(255, 255, 255, 0.3);
+    }
+
+    &::-webkit-scrollbar-track {
+        background-color: rgba(0,0,0,0);
+        border-radius: 8px;
+    }
+}
+
+.mobile-menu-overlay {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 29;
+    background: rgba(48, 75, 88, .5);
+    display: none;
+}
+
+.layout-default .main-content,
+.layout-icon-sidebar .main-content {
+    padding: 90px 30px 10px 270px;
+    min-height: calc(100% - 39px);
+}
+
+.site-footer {
+    background-color: $white;
+    color: #818a91;
+    font-size: 13px;
+    font-weight: normal;
+    padding: 10px 30px 10px 255px;
+
+    a {
+        color: $ls-color-black--light;
+    }
+}
+
+.page-header {
+    margin-bottom: 30px;
+    position: relative;
+
+    p {
+        font-size: 13px;
+    }
+
+    select {
+        border: none;
+    }
+
+    .breadcrumb {
+        background: none;
+        padding: 0;
+    }
+
+    .page-actions {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        -o-transform: translateY(-50%);
+        transform: translateY(-50%);
+        margin: auto;
+    }
+}
+
+.template-container {
+    height: 100%;
+}
+
+//Layout Horizontal
+
+@media(max-width: $small-breakpoint-below) {
+
+    .site-header {
+        padding: 12px 15px;
+    }
+
+    .sidebar-left {
+        left: -240px;
+        transition: left .3s ease;
+    }
+
+    .sidebar-open .sidebar-left {
+        left: 0;
+    }
+
+    .sidebar-open .mobile-menu-overlay {
+        display: block;
+    }
+
+    .layout-default .main-content,
+    .layout-icon-sidebar .main-content {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .site-footer {
+        padding-left: 15px;
+    }
+
+}
+
+