@open-rlb/ng-bootstrap 2.3.7 → 2.4.0

package/assets/scss/_variables.scss

@@ -11,7 +11,8 @@ $sidebar-menu-sub-item-color:                         #545a6d;
 $sidebar-menu-item-icon-color:                        #7f8387;
 $sidebar-menu-item-hover-color:                       #383c40;
 $sidebar-menu-item-active-color:                      #556ee6;
-$sidebar-width:                                       300px;
+$sidebar-width:                                       18.75rem;
+$sidebar-transition:                                  0.3s ease-in-out;
 $sidebar-collapsed-width:                             70px;
 $sidebar-width-sm:                                    160px;
 
@@ -24,7 +25,7 @@ $sidebar-dark-menu-item-hover-color:                  #ffffff;
 $sidebar-dark-menu-item-active-color:                 #ffffff;
 
 // Topbar - Default Light
-$header-height:                                       51px;
+$header-height:                                       3.75rem;
 $header-bg:                                           $white;
 $header-item-color:                                   #555b6d;
 
@@ -53,7 +54,7 @@ $rightbar-width:                                      280px;
 $display-none:                                        none;
 $display-block:                                       block;
 
-// Brand 
+// Brand
 $navbar-brand-box-width:                             250px;
 
 // Boxed layout width

package/assets/scss/custom/plugins/_responsive-table.scss

@@ -154,8 +154,8 @@ body[data-layout="horizontal"] {
   @media (min-width: 992px) {
     .fixed-solution {
       .sticky-table-header{
-        top: $header-height + 50px !important;;
+        top: $header-height + 3.125rem !important;;
       }
     }
   }
-}
+}

package/assets/scss/custom/structure/_topbar.scss

@@ -1,6 +1,6 @@
-// 
+//
 // _header.scss
-// 
+//
 
 #page-topbar {
     position: fixed;
@@ -51,7 +51,7 @@
 /* Search */
 
 .app-search {
-    padding: calc(#{$header-height - 38px} * 0.5) 0;
+    padding: calc(#{$header-height - 2.375rem} * 0.5) 0;
 
     .form-control {
         border: none;
@@ -292,4 +292,4 @@ body[data-layout="horizontal"] {
             margin-top: 15px;
         }
     }
-}
+}

package/assets/scss/rlb/app-layout.scss

@@ -1,68 +1,62 @@
+.rlb-app {
+  background-color: var(--bs-body-bg);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+}
+
+.rlb-main-wrapper {
+  display: flex;
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+}
+
 .rlb-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
   height: $header-height;
-  display: flex;
-  align-items: center;
-  z-index: 1001;
+  z-index: 1030;
 }
 
 .rlb-sidebar {
-  position: fixed;
-  margin-top: $header-height;
-  left: 0;
   width: $sidebar-width;
-  height: calc(100% - $header-height);
-  box-sizing: border-box;
-  z-index: 1001;
-  transition: width 0.3s ease-in-out;
+  flex-shrink: 0;
+  transition: width $sidebar-transition, transform $sidebar-transition;
+  background-color: var(--bs-tertiary-bg);
+  border-right: 1px solid var(--bs-border-color);
+  z-index: 1020;
+  position: relative;
+  overflow: visible !important;
 
   &.collapsed {
     width: 0;
+    border-right: none;
   }
 }
 
-.rlb-dropdown-menu {
-  z-index: $zindex-dropdown;
-}
-
-
 .rlb-content {
-  position: fixed;
-  left: 0;
-  width: calc(100%);
-  height: calc(100% - $header-height);
-  overflow-y: auto;
-  margin-top: $header-height;
-  box-sizing: border-box;
-  transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
-
-  &.rlb-sidebar-en {
-    left: $sidebar-width;
-    width: calc(100% - $sidebar-width);
-  }
+  overflow: auto;
+  background-color: var(--bs-body-bg);
+  width: 100%;
+}
 
-  &.expanded {
-    left: 0;
-    width: calc(100%);
-  }
+.rlb-dropdown-menu {
+  z-index: $zindex-dropdown;
 }
 
 .sidebar-toggle {
-  position: fixed;
-  top: calc($header-height + 15px);
-  left: $sidebar-width - 30px;
+  position: absolute;
+  top: 1rem;
+  left: $sidebar-width - 1.5rem;
+  z-index: 1035;
   transform: translateX(-50%);
-  width: 30px;
-  height: 30px;
+  width: 2rem;
+  height: 2rem;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  z-index: 9999;
   transition: left 0.3s ease-in-out, transform 0.2s ease, color 0.2s ease, border 0.2s ease;
 
   &:hover {
@@ -76,16 +70,10 @@
   }
 }
 
-.rlb-sidebar.collapsed .sidebar-toggle {
-  left: 0;
-}
-
 .sidebar-toggler-tooltip {
-
   --bs-tooltip-bg: var(--bs-body-bg);
   --bs-tooltip-color: var(--bs-body-color);
 
-
   --bs-tooltip-border-width: 1px;
   --bs-tooltip-border-color: rgba(0, 0, 0, 0.15);
 
@@ -96,26 +84,57 @@
   padding: 0.25rem 0.5rem;
 }
 
+.sidebar-toggler-tooltip {
+  pointer-events: none;
+}
+
+.rlb-sidebar.collapsed .sidebar-toggle {
+  left: 0;
+}
+
 @media (hover: none) {
   .tooltip {
     display: none !important;
   }
 }
 
-.sidebar-toggler-tooltip {
-  pointer-events: none;
-}
 
-/* ===== Mobile ===== */
 @media (max-width: 992px) {
+  .rlb-sidebar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    transform: translateX(-100%);
+    width: $sidebar-width !important;
+    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
+    overflow: visible !important;
+
+    &:not(.collapsed) {
+      transform: translateX(0);
+      .sidebar-toggle {
+        left: calc(100% - 20px);
+      }
+    }
+
+    &.collapsed {
+      .sidebar-toggle {
+        left: calc(100% + 5px);
+        transform: translateX(-50%);
+      }
+    }
+  }
+
   .navbar-collapse {
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background-color: var(--bs-body-bg);
-    border-top: 1px solid rgba(0, 0, 0, .1);
-    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15);
-    z-index: 1100;
+
+    border: 1px solid var(--bs-border-color);
+    border-top: none;
+
+    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
   }
 }

package/fesm2022/open-rlb-ng-bootstrap.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, booleanAttribute, Input, Host, Self, Optional, Directive, Injectable, EventEmitter, ContentChild, Output, ContentChildren, ViewChild, numberAttribute, Pipe, ChangeDetectionStrategy, DOCUMENT, Inject, HostBinding, ViewContainerRef, InjectionToken, ElementRef, HostListener, ViewChildren, NgModule } from '@angular/core';
+import { Component, booleanAttribute, Input, Host, Self, Optional, Directive, Injectable, EventEmitter, ContentChild, Output, ContentChildren, ViewChild, numberAttribute, Pipe, ChangeDetectionStrategy, DOCUMENT, Inject, HostBinding, HostListener, ViewContainerRef, InjectionToken, ElementRef, ViewChildren, NgModule } from '@angular/core';
 import { Collapse, Carousel, Dropdown, Modal, Toast, Offcanvas, ScrollSpy, Tooltip, Popover } from 'bootstrap';
 import * as i1 from '@angular/common';
 import { formatDate, CommonModule } from '@angular/common';
@@ -5453,24 +5453,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Sidebar component
  */
 class SidebarComponent {
+    onResize() {
+        this.checkBreakpoint();
+    }
     constructor() {
         this.isCollapsed = false;
         this.rounded = false;
     }
+    ngOnInit() {
+        this.checkBreakpoint();
+    }
     toggleSidebar() {
-        this.isCollapsed = !this.isCollapsed;
+        this.setCollapsed(!this.isCollapsed);
+    }
+    setCollapsed(collapsed) {
+        this.isCollapsed = collapsed;
         const sidebar = document.getElementById('sidebar');
         const content = document.querySelector('.rlb-content');
-        if (content) {
-            content.classList.toggle('expanded', this.isCollapsed);
-        }
-        if (sidebar) {
-            sidebar.classList.toggle('collapsed', this.isCollapsed);
-        }
+        content?.classList.toggle('expanded', collapsed);
+        sidebar?.classList.toggle('collapsed', collapsed);
+    }
+    checkBreakpoint() {
+        const shouldCollapse = window.innerWidth <= 992;
+        this.setCollapsed(shouldCollapse);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { rounded: "rounded" }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
-		<div class="vertical-menu" [class.d-none]="isCollapsed" [class.rounded-2]="rounded">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SidebarComponent, isStandalone: false, selector: "rlb-sidebar", inputs: { rounded: "rounded" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "sideMenu", first: true, predicate: ["sideMenu"], descendants: true }], ngImport: i0, template: `
+		<div class="vertical-menu" [class.rounded-2]="rounded">
 			<div id="sidebar-menu" class="w-100 h-100 overflow-y-auto">
 				<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
 					<ng-content select="rlb-sidebar-item"></ng-content>
@@ -5493,7 +5502,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{
                     selector: 'rlb-sidebar',
                     template: `
-		<div class="vertical-menu" [class.d-none]="isCollapsed" [class.rounded-2]="rounded">
+		<div class="vertical-menu" [class.rounded-2]="rounded">
 			<div id="sidebar-menu" class="w-100 h-100 overflow-y-auto">
 				<ul class="metismenu list-unstyled" id="side-menu" #sideMenu>
 					<ng-content select="rlb-sidebar-item"></ng-content>
@@ -5518,6 +5527,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }], rounded: [{
                 type: Input,
                 args: [{ alias: 'rounded', required: false }]
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
             }] } });
 
 class TabContentComponent {