@@ -22,7 +22,7 @@ import { SidebarBackdropService } from '../sidebar-backdrop/sidebar-backdrop.ser
2222@Component ( {
2323selector :'c-sidebar' ,
2424exportAs :'cSidebar' ,
25- template :'<ng-content></ng-content>' ,
25+ template :'<ng-content></ng-content>'
2626} )
2727export class SidebarComponent implements OnChanges , OnDestroy , OnInit {
2828
@@ -58,6 +58,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
5858set narrow ( value :boolean ) {
5959this . _narrow = coerceBooleanProperty ( value ) ;
6060}
61+
6162get narrow ( ) {
6263return this . _narrow ;
6364}
@@ -70,6 +71,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
7071set overlaid ( value :boolean ) {
7172this . _overlaid = coerceBooleanProperty ( value ) ;
7273}
74+
7375get overlaid ( ) {
7476return this . _overlaid ;
7577}
@@ -92,6 +94,7 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
9294set unfoldable ( value :boolean ) {
9395this . _unfoldable = coerceBooleanProperty ( value ) ;
9496}
97+
9598get unfoldable ( ) {
9699return this . _unfoldable ;
97100}
@@ -101,9 +104,13 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
101104 */
102105 @Input ( )
103106set visible ( value :boolean ) {
104- this . _visible = coerceBooleanProperty ( value ) ;
105- this . visibleChange . emit ( this . _visible ) ;
107+ const visible = coerceBooleanProperty ( value ) ;
108+ if ( this . _visible !== visible ) {
109+ this . _visible = visible ;
110+ this . visibleChange . emit ( this . _visible ) ;
111+ }
106112}
113+
107114get visible ( ) {
108115return this . _visible ;
109116}
@@ -124,6 +131,8 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
124131newState . unfoldable = ! this . state . unfoldable ;
125132this . unfoldable = newState . unfoldable ;
126133}
134+ } else {
135+ this . visible = ( newState . visible ?? this . visible ) && ! this . overlaid ;
127136}
128137this . state = {
129138 ...this . state ,
@@ -155,12 +164,12 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
155164
156165 @HostBinding ( 'class' )
157166get getClasses ( ) :any {
158- const { mobile, unfoldable, visible} = this . sidebarState ;
167+ const { , unfoldable, visible} = this . sidebarState ;
159168return {
160169sidebar :true ,
161170'sidebar-fixed' :this . position === 'fixed' && ! mobile ,
162171'sidebar-narrow' :this . narrow && ! this . unfoldable ,
163- 'sidebar-narrow-unfoldable' :unfoldable ,
172+ 'sidebar-narrow-unfoldable' :this . unfoldable ,
164173'sidebar-overlaid' :this . overlaid ,
165174[ `sidebar-${ this . size } ] :! ! this . size ,
166175show :visible && this . onMobile ,
@@ -232,12 +241,13 @@ export class SidebarComponent implements OnChanges, OnDestroy, OnInit {
232241
233242this . layoutChangeSubscription = layoutChanges . subscribe ( ( result :BreakpointState ) => {
234243const isOnMobile = result . breakpoints [ onMobile ] ;
244+ const isUnfoldable = isOnMobile ?false :this . unfoldable ;
235245if ( this . onMobile !== isOnMobile ) {
236246this . onMobile = isOnMobile ;
237247this . sidebarService . toggle ( {
238248mobile :isOnMobile ,
239- unfoldable :isOnMobile ? false : this . unfoldable ,
240- visible :isOnMobile ? false : this . visible ,
249+ unfoldable :isUnfoldable ,
250+ visible :( ! isOnMobile ) || isUnfoldable ,
241251sidebar :this
242252} ) ;
243253}