Hide nebular menu when close on tablet view

Question

i'm using nebular, and i create custom menu like this

but when i collase the menu it looks like this.

i'm looking for how to make the menu on tablet view like on mobile, the menu is hidden. How can i achieve that?

here's my menu code

    <nb-list style="padding: 0px;">
        <nb-list-item *ngFor="let topik of let topik of topikData" style="padding: 0px;">
            <nb-accordion class="topikAccordion" style="width: 100%;background: #3366ff !important;">
                <nb-accordion-item [expanded]="true">
                    <nb-accordion-item-header [ngClass]="{'topicActive': topik.slug == topicSlug}">
                        {{ topik.name }}
                    </nb-accordion-item-header>
                    <nb-accordion-item-body *ngFor="let lesson of topik.lessons">
                        <nb-list-item style="padding-left: 30px;cursor: pointer;font-weight: 600;font-size:0.8rem;transition:.3s all ease;"
                            [ngClass]="{'active': lesson.code == lessonCode}"
                            (click)="onClick(topik.slug, lesson.code, lesson.type)">
                            <nb-icon *ngIf="lesson.type == 'text'" style="margin-right: 10px;" icon="video-outline">
                            </nb-icon>
                            <nb-icon *ngIf="lesson.type == 'pdf'" style="margin-right: 10px;" icon="file-outline">
                            </nb-icon>
                            <nb-icon *ngIf="lesson.type == 'quiz'" style="margin-right: 10px;"
                                icon="message-square-outline"></nb-icon>
                            {{lesson.name}}
                        </nb-list-item>
                    </nb-accordion-item-body>
                </nb-accordion-item>
            </nb-accordion>
        </nb-list-item>
    </nb-list>

Answer 1

If you are using sidebar you can set state='collapsed' and responsive='false'

you can also set breakpoints for the menu

collapsedBreakpoints="'xs', 'is','sm', 'md'" compactedBreakpoints="'lg','xl','xxl','xxxl'"

I am using the following to show/hide a menu...

<nb-sidebar tag="right" right state='collapsed' class="right-sidebar" fixed end>

you can find these details on the api page of the nebular component. https://akveo.github.io/nebular/docs/components/sidebar/api#nbsidebarcomponent