@soyfri/template 1.0.1 → 1.0.4

package/dist/assets/sass/core/layout/base/sidebar/_sidebar-panel.scss

@@ -0,0 +1,281 @@
+//
+// sidebar
+//
+
+// General mode
+.app-sidebar-panel {    
+    transition: $app-sidebar-panel-base-transition;
+    background-color: var(--#{$prefix}app-sidebar-panel-base-bg-color);
+    box-shadow: var(--#{$prefix}app-sidebar-panel-base-box-shadow);
+    border-left: var(--#{$prefix}app-sidebar-panel-base-border-start);
+    border-right: var(--#{$prefix}app-sidebar-panel-base-border-end);
+}
+
+// Utilities
+.app-sidebar-panel-minimize-d-flex,
+.app-sidebar-panel-sticky-d-flex,
+.app-sidebar-panel-collapse-d-flex,
+.app-sidebar-panel-minimize-mobile-d-flex,
+.app-sidebar-panel-collapse-mobile-d-flex {
+    display: none;    
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-sidebar-panel {        
+        display: flex;    
+        flex-shrink: 0;
+        width: var(--#{$prefix}app-sidebar-panel-width);        
+
+        @include property( z-index, $app-sidebar-panel-base-z-index);
+        @include property( margin-left, $app-sidebar-panel-base-gap-start);
+        @include property( margin-right, $app-sidebar-panel-base-gap-end);
+        @include property( margin-top, $app-sidebar-panel-base-gap-top);
+        @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom);
+    }    
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-panel-width: #{$app-sidebar-panel-base-width};
+        --#{$prefix}app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+
+        --#{$prefix}app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start};
+        --#{$prefix}app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end};
+        --#{$prefix}app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top};
+        --#{$prefix}app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-panel-minimize="on"] {
+        --#{$prefix}app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width};
+
+        --#{$prefix}app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start};
+        --#{$prefix}app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end};
+        --#{$prefix}app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top};
+        --#{$prefix}app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom};
+    }    
+
+    [data-kt-app-sidebar-panel-sticky="on"] {
+        --#{$prefix}app-sidebar-panel-width: #{$app-sidebar-panel-sticky-width};
+
+        --#{$prefix}app-sidebar-panel-gap-start: #{$app-sidebar-panel-sticky-gap-start};
+        --#{$prefix}app-sidebar-panel-gap-end: #{$app-sidebar-panel-sticky-gap-end};
+        --#{$prefix}app-sidebar-panel-gap-top: #{$app-sidebar-panel-sticky-gap-top};
+        --#{$prefix}app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-sticky-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-panel-collapse="on"] {
+        --#{$prefix}app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width};
+        --#{$prefix}app-sidebar-panel-width: 0px;        
+    }
+
+    // States
+    .app-sidebar-panel {
+        [data-kt-app-sidebar-panel-static="true"] & {
+            position: relative;
+        }
+
+        [data-kt-app-sidebar-panel-offcanvas="true"] & {
+            display: none;
+        }
+
+        [data-kt-app-sidebar-panel-fixed="true"] & {
+            @include property( z-index, $app-sidebar-panel-fixed-z-index);
+            position: fixed;
+            left: calc(var(--#{$prefix}app-sidebar-width) + var(--#{$prefix}app-sidebar-gap-start, 0px) + var(--#{$prefix}app-sidebar-gap-end, 0px));
+            top: 0;
+            bottom: 0;
+        }  
+
+        [data-kt-app-sidebar-panel-sticky="on"] & {
+            position: fixed;
+            left: calc(var(--#{$prefix}app-sidebar-width) + var(--#{$prefix}app-sidebar-gap-start, 0px) + var(--#{$prefix}app-sidebar-gap-end, 0px));
+            top: 0;
+            bottom: 0;
+            transition: $app-sidebar-panel-base-transition;
+
+            //box-shadow: var(--#{$prefix}app-sidebar-panel-sticky-box-shadow);
+            //border-left: var(--#{$prefix}app-sidebar-panel-sticky-border-start);
+            //border-right: var(--#{$prefix}app-sidebar-panel-sticky-border-end);
+
+            @include property( z-index, $app-sidebar-panel-sticky-z-index);
+            @include property( margin-left, $app-sidebar-panel-sticky-gap-start);
+            @include property( margin-right, $app-sidebar-panel-sticky-gap-end);
+            @include property( margin-top, $app-sidebar-panel-sticky-gap-top);
+            @include property( margin-bottom, $app-sidebar-panel-sticky-gap-bottom);
+        }
+
+        [data-kt-app-sidebar-panel-minimize="on"] & {
+            transition: $app-sidebar-panel-base-transition;
+
+            //background-color: var(--#{$prefix}app-sidebar-panel-minimize-bg-color);
+            //box-shadow: var(--#{$prefix}app-sidebar-panel-minimize-box-shadow);
+            //border-left: var(--#{$prefix}app-sidebar-panel-minimize-border-start);
+            //border-right: var(--#{$prefix}app-sidebar-panel-minimize-border-end);
+
+            @include property( margin-left, $app-sidebar-panel-minimize-gap-start);
+            @include property( margin-right, $app-sidebar-panel-minimize-gap-end);
+            @include property( margin-top, $app-sidebar-panel-minimize-gap-top);
+            @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom);
+        }
+
+        [data-kt-app-sidebar-panel-hoverable="true"] & {
+            .app-sidebar-panel-hoverable {
+                width: var(--#{$prefix}app-sidebar-panel-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-panel-hoverable="true"][data-kt-app-sidebar-panel-minimize="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-panel-base-transition;
+			width: var(--#{$prefix}app-sidebar-panel-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-panel-minimize-hover-box-shadow);
+        }
+
+        [data-kt-app-sidebar-panel-collapse="on"] & {
+            transition: $app-sidebar-panel-base-transition;
+            width: var(--#{$prefix}app-sidebar-panel-width-actual);
+            margin-left: calc( -1 * (var(--#{$prefix}app-sidebar-panel-width-actual) + var(--#{$prefix}app-sidebar-gap-start, 0px) + var(--#{$prefix}app-sidebar-gap-end, 0px)));
+        }
+    }
+
+    // Integration
+    .app-sidebar-panel {
+        // Header
+        [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"]:not([data-kt-app-sidebar-panel-push-header="true"]) & {
+            top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-sidebar-panel-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"]:not([data-kt-app-sidebar-panel-push-toolbar="true"]) & {
+            top: calc(var(--#{$prefix}app-header-height) + var(--#{$prefix}app-toolbar-height, 0));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-panel-minimize="on"] {
+        .app-sidebar-panel-minimize-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-panel-minimize-d-flex {
+            display: flex !important;    
+        }
+    }
+
+    [data-kt-app-sidebar-panel-sticky="on"] {
+        .app-sidebar-panel-sticky-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-panel-sticky-d-flex {
+            display: flex !important;    
+        }
+    }  
+
+    [data-kt-app-sidebar-panel-collapse="on"] {
+        .app-sidebar-panel-collapse-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-panel-collapse-d-flex {
+            display: flex !important;    
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-sidebar-panel {
+        display: none;
+        width: var(--#{$prefix}app-sidebar-panel-width);
+
+        @include property( z-index, $app-sidebar-panel-base-z-index-mobile);
+        @include property( margin-left, $app-sidebar-panel-base-gap-start-mobile);
+        @include property( margin-right, $app-sidebar-panel-base-gap-end-mobile);
+        @include property( margin-top, $app-sidebar-panel-base-gap-top-mobile);
+        @include property( margin-bottom, $app-sidebar-panel-base-gap-bottom-mobile);
+    }
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-panel-width: #{$app-sidebar-panel-base-width-mobile};
+        --#{$prefix}app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width-mobile};
+
+        --#{$prefix}app-sidebar-panel-gap-start: #{$app-sidebar-panel-base-gap-start-mobile};
+        --#{$prefix}app-sidebar-panel-gap-end: #{$app-sidebar-panel-base-gap-end-mobile};
+        --#{$prefix}app-sidebar-panel-gap-top: #{$app-sidebar-panel-base-gap-top-mobile};
+        --#{$prefix}app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-base-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+        --#{$prefix}app-sidebar-panel-width: #{$app-sidebar-panel-minimize-width-mobile};
+
+        --#{$prefix}app-sidebar-panel-gap-start: #{$app-sidebar-panel-minimize-gap-start-mobile};
+        --#{$prefix}app-sidebar-panel-gap-end: #{$app-sidebar-panel-minimize-gap-end-mobile};
+        --#{$prefix}app-sidebar-panel-gap-top: #{$app-sidebar-panel-minimize-gap-top-mobile};
+        --#{$prefix}app-sidebar-panel-gap-bottom: #{$app-sidebar-panel-minimize-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+        --#{$prefix}app-sidebar-panel-width-actual: #{$app-sidebar-panel-base-width-mobile};
+        --#{$prefix}app-sidebar-panel-width: 0px;
+    }
+
+    // States
+    .app-sidebar-panel {            
+        [data-kt-app-sidebar-panel-minimize-mobile="on"] & {
+            transition: $app-sidebar-panel-base-transition;
+
+            background-color: var(--#{$prefix}app-sidebar-panel-minimize-bg-color-mobile);
+            box-shadow: var(--#{$prefix}app-sidebar-panel-minimize-box-shadow-mobile);
+            border-left: var(--#{$prefix}app-sidebar-panel-minimize-border-start-mobile);
+            border-right: var(--#{$prefix}app-sidebar-panel-minimize-border-end-mobile);
+
+            @include property( margin-left, $app-sidebar-panel-minimize-gap-start-mobile);
+            @include property( margin-right, $app-sidebar-panel-minimize-gap-end-mobile);
+            @include property( margin-top, $app-sidebar-panel-minimize-gap-top-mobile);
+            @include property( margin-bottom, $app-sidebar-panel-minimize-gap-bottom-mobile);
+        }
+
+        [data-kt-app-sidebar-panel-hoverable-mobile="true"] & {
+            .app-sidebar-panel-hoverable {
+                width: var(--#{$prefix}app-sidebar-panel-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-panel-hoverable-mobile="true"][data-kt-app-sidebar-panel-minimize-mobile="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-panel-base-transition;
+			width: var(--#{$prefix}app-sidebar-panel-width-actual);
+
+            box-shadow: var(--#{$prefix}app-sidebar-panel-minimize-hover-box-shadow-mobile);
+        }
+
+        [data-kt-app-sidebar-panel-collapse-mobile="on"] & {
+            transition: $app-sidebar-panel-base-transition;
+            width: var(--#{$prefix}app-sidebar-panel-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-panel-width-actual));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-panel-minimize-mobile="on"] {
+        .app-sidebar-panel-minimize-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-panel-minimize-mobile-d-flex {
+            display: flex !important;    
+        }
+    }  
+
+    [data-kt-app-sidebar-panel-collapse-mobile="on"] {
+        .app-sidebar-panel-collapse-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-panel-collapse-mobile-d-flex {
+            display: flex !important;    
+        }
+    }
+}

package/dist/assets/sass/core/layout/base/sidebar/_sidebar-primary.scss

@@ -0,0 +1,230 @@
+//
+// sidebar Primary
+//
+
+// General mode
+.app-sidebar-primary {
+    transition: $app-sidebar-primary-base-transition;
+    position: relative;
+    flex-shrink: 0;
+    background-color: var(--#{$prefix}app-sidebar-primary-base-bg-color);
+    box-shadow: var(--#{$prefix}app-sidebar-primary-base-box-shadow);
+    border-left: var(--#{$prefix}app-sidebar-primary-base-border-start);
+    border-right: var(--#{$prefix}app-sidebar-primary-base-border-end);
+}
+
+// Utilities
+.app-sidebar-primary-collapse-d-flex,
+.app-sidebar-primary-minimize-d-flex,
+.app-sidebar-primary-collapse-mobile-d-flex,
+.app-sidebar-primary-minimize-mobile-d-flex {
+    display: none;
+}
+
+// Desktop mode
+@include media-breakpoint-up(lg) {
+    // Base
+    .app-sidebar-primary {       
+        @include property( z-index, $app-sidebar-primary-base-z-index);
+        @include property( margin-left, $app-sidebar-primary-base-gap-start);
+        @include property( margin-right, $app-sidebar-primary-base-gap-end);
+        @include property( margin-top, $app-sidebar-primary-base-gap-top);
+        @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom);
+    }    
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width};
+    }
+
+    [data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-primary-width: #{$app-sidebar-primary-base-width};
+
+        --#{$prefix}app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start};
+        --#{$prefix}app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end};
+        --#{$prefix}app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top};
+        --#{$prefix}app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom};
+    }
+
+    [data-kt-app-sidebar-primary-minimize="on"] {
+        --#{$prefix}app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width};
+
+        --#{$prefix}app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start};
+        --#{$prefix}app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end};
+        --#{$prefix}app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top};
+        --#{$prefix}app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom};
+    }   
+
+    [data-kt-app-sidebar-primary-collapse="on"] {        
+        --#{$prefix}app-sidebar-primary-width: 0px;
+    }    
+
+    // States
+    .app-sidebar-primary {
+        width: var(--#{$prefix}app-sidebar-primary-width);
+
+        [data-kt-app-sidebar-primary-collapse="on"] & {
+            transition: $app-sidebar-primary-base-transition;
+            width: var(--#{$prefix}app-sidebar-primary-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-primary-width-actual));
+        }
+
+        [data-kt-app-sidebar-primary-minimize="on"] & {
+            transition: $app-sidebar-primary-base-transition;
+
+            //background-color: var(--#{$prefix}app-sidebar-primary-minimize-bg-color);
+            //box-shadow: var(--#{$prefix}app-sidebar-primary-minimize-box-shadow);
+            //border-left: var(--#{$prefix}app-sidebar-primary-minimize-border-start);
+            //border-right: var(--#{$prefix}app-sidebar-primary-minimize-border-end);
+
+            @include property( margin-left, $app-sidebar-primary-minimize-gap-start);
+            @include property( margin-right, $app-sidebar-primary-minimize-gap-end);
+            @include property( margin-top, $app-sidebar-primary-minimize-gap-top);
+            @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom);
+        }
+
+        [data-kt-app-sidebar-primary-hoverable="true"] & {
+            .app-sidebar-primary-hoverable {
+                width: var(--#{$prefix}app-sidebar-primary-width-actual); 
+            }
+        }
+
+        // Hover minimized
+        [data-kt-app-sidebar-primary-hoverable="true"][data-kt-app-sidebar-primary-minimize="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-primary-base-transition;
+			width: var(--#{$prefix}app-sidebar-primary-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-primary-minimize-hover-box-shadow);
+        }
+    }
+
+    // Integration
+    .app-sidebar-primary {
+        // Header
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-sidebar-primary-below-header="true"] & {
+            top: var(--#{$prefix}app-header-height);
+        }
+
+        // Toolbar
+        [data-kt-app-sidebar-fixed="true"][data-kt-app-header-fixed="true"][data-kt-app-toolbar-fixed="true"][data-kt-app-sidebar-primary-below-toolbar="true"] & {
+            top: calc(var(--#{$prefix}app-header-height) + var(--#{$prefix}app-toolbar-height, 0));
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-primary-minimize="on"] {
+        .app-sidebar-primary-minimize-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-primary-minimize-d-flex {
+            display: flex !important;    
+        }
+    } 
+
+    [data-kt-app-sidebar-primary-collapse="on"] {
+        .app-sidebar-primary-collapse-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-primary-collapse-d-flex {
+            display: flex !important;    
+        }
+    }
+}
+
+// Tablet & mobile modes
+@include media-breakpoint-down(lg) {
+    // Base
+    .app-sidebar-primary {        
+        @include property( z-index, $app-sidebar-primary-base-z-index-mobile);
+        @include property( margin-left, $app-sidebar-primary-base-gap-start-mobile);
+        @include property( margin-right, $app-sidebar-primary-base-gap-end-mobile);
+        @include property( margin-top, $app-sidebar-primary-base-gap-top-mobile);
+        @include property( margin-bottom, $app-sidebar-primary-base-gap-bottom-mobile);
+    }    
+
+    // Vars
+    :root {
+        --#{$prefix}app-sidebar-primary-width-actual: #{$app-sidebar-primary-base-width-mobile};
+    }
+
+    [data-kt-app-sidebar-stacked="true"] {
+        --#{$prefix}app-sidebar-primary-width: #{$app-sidebar-primary-base-width-mobile};
+
+        --#{$prefix}app-sidebar-primary-gap-start: #{$app-sidebar-primary-base-gap-start-mobile};
+        --#{$prefix}app-sidebar-primary-gap-end: #{$app-sidebar-primary-base-gap-end-mobile};
+        --#{$prefix}app-sidebar-primary-gap-top: #{$app-sidebar-primary-base-gap-top-mobile};
+        --#{$prefix}app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-base-gap-bottom-mobile};
+    }
+
+    [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+        --#{$prefix}app-sidebar-primary-width: #{$app-sidebar-primary-minimize-width-mobile};
+
+        --#{$prefix}app-sidebar-primary-gap-start: #{$app-sidebar-primary-minimize-gap-start-mobile};
+        --#{$prefix}app-sidebar-primary-gap-end: #{$app-sidebar-primary-minimize-gap-end-mobile};
+        --#{$prefix}app-sidebar-primary-gap-top: #{$app-sidebar-primary-minimize-gap-top-mobile};
+        --#{$prefix}app-sidebar-primary-gap-bottom: #{$app-sidebar-primary-minimize-gap-bottom-mobile};
+    }   
+
+    [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+        --#{$prefix}app-sidebar-primary-width: 0px;
+    }
+
+    // States
+    .app-sidebar-primary {
+        width: var(--#{$prefix}app-sidebar-primary-width);
+
+        [data-kt-app-sidebar-primary-collapse-mobile="on"] & {
+            transition: $app-sidebar-primary-base-transition;
+            width: var(--#{$prefix}app-sidebar-primary-width-actual);
+            margin-left: calc( -1 * var(--#{$prefix}app-sidebar-primary-width-actual));
+        }
+
+        [data-kt-app-sidebar-primary-minimize-mobile="on"] & {
+            transition: $app-sidebar-primary-base-transition;
+
+            //background-color: var(--#{$prefix}app-sidebar-primary-minimize-bg-color-mobile);
+            //box-shadow: var(--#{$prefix}app-sidebar-primary-base-box-shadow-mobile);
+            //border-left: var(--#{$prefix}app-sidebar-primary-minimize-border-start-mobile);
+            //border-left: var(--#{$prefix}app-sidebar-primary-minimize-border-end-mobile);
+
+            @include property( margin-left, $app-sidebar-primary-minimize-gap-start-mobile);
+            @include property( margin-right, $app-sidebar-primary-minimize-gap-end-mobile);
+            @include property( margin-top, $app-sidebar-primary-minimize-gap-top-mobile);
+            @include property( margin-bottom, $app-sidebar-primary-minimize-gap-bottom-mobile);
+        }
+
+        [data-kt-app-sidebar-primary-hoverable-mobile="true"] & {
+            .app-sidebar-primary-hoverable {
+                width: var(--#{$prefix}app-sidebar-primary-width-actual); 
+            }
+        }
+
+        [data-kt-app-sidebar-primary-hoverable-mobile="true"][data-kt-app-sidebar-primary-minimize-mobile="on"] &:hover:not(.animating) {
+            transition: $app-sidebar-primary-base-transition;
+			width: var(--#{$prefix}app-sidebar-primary-width-actual);
+            box-shadow: var(--#{$prefix}app-sidebar-primary-minimize-hover-box-shadow-mobile);
+        }
+    }
+
+    // Utilities
+    [data-kt-app-sidebar-primary-minimize-mobile="on"] {
+        .app-sidebar-primary-minimize-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-primary-minimize-mobile-d-flex {
+            display: flex !important;    
+        }
+    } 
+
+    [data-kt-app-sidebar-primary-collapse-mobile="on"] {
+        .app-sidebar-primary-collapse-mobile-d-none {
+            display: none !important;    
+        }
+
+        .app-sidebar-primary-collapse-mobile-d-flex {
+            display: flex !important;    
+        }
+    }
+}