Responsiveness not working

[saadmomin]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:
I have a simple sidebar with some menu items and a header and a layout-column. When page is resized the sidebar does not collapse or open as per responsive behavior. Its fixed. I added a menu button to toggle sidebar which works fine. I also subscribed to themeservice and logged the change in screen width, which is also working. so why the sidebar should behave responsively.

Expected behavior:
Responsiveness should work

Steps to reproduce:


<nb-icon icon="menu-2-outline" (click)="changeSidebar()">
Phoebus List


<nb-menu [items]="items">


Page Content

Related code:

insert short code snippets here

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[saadmomin]

Hi. Can someone help please. This is urgent.

[yggg]

Hi @saadmomin! I can't see the issue out of the provided info.
Did you modify compactedBreakpoints and collapsedBreakpoints inputs of the sidebar component? By default it's:

compactedBreakpoints = ['xs', 'is', 'sm', 'md', 'lg'];
collapsedBreakpoints = ['xs', 'is'];

You can get breakpoints widths via getBreakpoints of NbMediaBreakpointsService service. By default it's:

  { name: 'xs', width: 0 },
  { name: 'is', width: 400 },
  { name: 'sm', width: 576 },
  { name: 'md', width: 768 },
  { name: 'lg', width: 992 },
  { name: 'xl', width: 1200 },
  { name: 'xxl', width: 1400 },
  { name: 'xxxl', width: 1600 },

Make sure viewport width is narrow enough to sidebar become compacted. You can subscribe to onMediaQueryChange of NbThemeService to see the current breakpoint.

[saadmomin]

Ohhh I did not know this. The documentation doesn't provide this info. I am currently doing this onMediaQueryChange subscription events. I will check this and update.

[saadmomin]

Hi, The sidebar is not collapsing, compacting or expanding on its own. See below image.

I have added below code to make it responsive, but shouldn't it be automatically responsive.

this.themeService.onMediaQueryChange().subscribe(value => {
      console.log(value);
      const currentWidth = value[1].width;
      if (currentWidth >= 1200) {
        this.inMobileView = false;
        this.sidebarService.expand();
      } else if (currentWidth > 400 && currentWidth < 992) {
        this.inMobileView = true;
        this.sidebarService.collapse();
      }
    });

If I remove the above code, it just does not work. below is my template

`

<div class="logo-img">
  <img class="logo" src="../assets/imgs/phoebus-logo.png">
</div>

<div class="header-user-icons">
  <nb-user size="large" name="Jonh Doe" title="Admin"
    picture="http://****/assets/imgs/user-avatar.jpg" [nbContextMenu]="userMenu"
    nbContextMenuTag="user-context-menu" onlyPicture>
  </nb-user>

</div>

`

[yggg]

Do you have a responsive property set on the sidebar? It's off by default.

<nb-sidebar responsive>
  ...
</nb-sidebar>

[rkohel]

A responsive property on the sidebar does not help.

[Johnyoat]

Do you have a responsive property set on the sidebar? It's off by default.

<nb-sidebar responsive>
  ...
</nb-sidebar>

Mine worked with this. Thanks

[baldemarnr]

Building on this ticket, I have this thing going on that I do believe it's a bug. I have responsive flag on as you can see, but once the menu is open it does not collapse back.

[naonvl]

i set the collapsedBreakpoints to md so when screensize is md sidebar disappear, but then when it's xs the sidebar appear, did it only works for 1 breakpoint?