Drawer Menu

drawer is visible for the screens smaller than 768px.

menu

                
                    <header class="flx flx-min-center flx-maj-start pd-s bg-off-primary">
                        <nav id="nav-big" class="flx flx-min-center">
                            <p class="txt-primary mg-right-s">profile</p>
                            <p class="txt-primary mg-right-s">feed</p>
                            <p class="txt-primary mg-right-s">order</p
                            <p class="txt-primary">messages</p>
                        </nav>
                        <div class="pos-relative">
                            <span id="btn-ham" class="material-icons icon-primary">
                                menu
                            </span>
                            <nav id="nav-small"
                                class="flx flx-column flx-min-center bg-off-primary pd-s pos-absolute z-10 tl-0">
                                <button id="btn-close-small" class="btn-txt bg-off-primary pd-xs">
                                    <span> class="material-icons mg-btm-s">close</span>
                                </button>
                                <p class="txt-primary txt-md txt-cap mg-btm-xs">profile</p>
                                <p class="txt-primary txt-md txt-cap mg-btm-xs">feed</p>
                                <p class="txt-primary txt-md txt-cap mg-btm-xs">order</p>
                                <p class="txt-primary txt-md txt-cap mg-btm-xs">messages</p>
                            </nav>
                        </div>
                    </header>
                
            

drawer css

                
                    #btn-ham {
                        display: none;
                    }
                    
                    #nav-small {
                        display: none;
                    }                    
                
            

drawer js

                
                    const hamBtn = document.querySelector('#btn-ham')
                    const navSmall = document.querySelector('#nav-small')
                    const smallNavCloseBtn = document.querySelector('#btn-close-small')


                    hamBtn.addEventListener('click', () => {
                        navSmall.style.display = 'flex'
                    })

                    smallNavCloseBtn.addEventListener('click', () => {
                        navSmall.style.display = 'none'
                    })