Custom mobile menu

html

<div class="main-menu-wrapper">
    <div class="container">
      <div class="mobile-menu-wrapper">
        {# trigger mobile menu #}
        <span class="mob-calls__menu"><i></i></span>

        {# mobile & desctop menu #}
        <nav class="header__nav">
          <ul class="nav">
            <span class="nav__item-description">
              Quick Links:
            </span>
            <li class="nav__item">
              <a href="#" class="nav__point"><span>Search History Guide</span>
              </a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__point"><span>Blog</span></a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__point"><span>About</span></a>
            </li>
          </ul>
        </nav>

      </div>

    </div>
  </div>

js(need jquery)

//mobile main menu
$(document).on('click', '.mob-calls__menu', function() {
  $(this).closest('.mobile-menu-wrapper').toggleClass('is-open');
});
$(document).on('click', function(e) {
  var menu = $('.mobile-menu-wrapper');
  if(!menu.is(e.target) && menu.has(e.target).length === 0 && menu.is('.is-open')) {
    menu.removeClass('is-open');
  }
});

sass

/*main menu*/
.mobile-menu-wrapper
	+r(1023)
		position: absolute
		width: 100%
		max-width: 320px
		height: 100vh
		max-height: 100vh
		padding-top: 58px
		padding-right: 58px
		padding-left: 15px
		background-color: #015cc4
		top: 0
		left: 0
		z-index: 100
		transform: translateX(-100%)
		transition: transform .25s ease-in-out
		will-change: transform
		&.is-open
			transform: translateX(0%)
			.mob-calls__menu
				transform: translateX(0px)
				background-color: #013878
				i
					transform: rotate(180deg)
					&::after,
					&::before
						width: 50%
					&::before
						top: 0
						transform: translateX(11px) translateY(1px) rotate(45deg)
					&::after
						bottom: 0
						transform: translateX(11px) translateY(-1px) rotate(-45deg)
		.scroller
			overflow-y: auto
		.logo
			padding-top: 0
			padding-left: 30px
			margin-bottom: 20px
		.phone_nav
			width: 100%
			display: flex
			flex-flow: row wrap
		.header__nav
			border-top: 1px solid rgba(255,255,255,.3)
			padding: 15px 0
			max-height: calc(100vh - 180px)
			overflow-y: auto
		.header__phone
			border-top: 1px solid rgba(255,255,255,.3)
			display: block
			width: 100%
			order: 10
			a
				color: white
				display: block
				margin: 10px auto
				.icon
					color: white
		.nav__item
			display: block
			width: 100%
			.dropdown-menu
				position: static !important
				margin: 0
				transform: none !important
				width: 100% !important
				box-shadow: none
				padding: 0
				&::after,
				&::before
					content: none
			.dropdown-custom-inner
				column-count: 1
				background-color: transparent
				&::after
					content: none
			&:hover
				.nav__point
					background-color: transparent
					text-decoration: underline
			.dropdown-item
				padding-left: 10px
				color: #ffffff
		.nav__point
			color: white



.mob-calls__menu
	display: none
	+r(1023)
		display: block
		position: absolute
		width: 48px
		height: 48px
		background-color: #015cc4
		will-change: transform,background-color
		top: 0
		right: 0
		transition: transform .25s ease-in-out
		transform: translateX(48px)
	i
		display: block
		position: absolute
		height: 2px
		background: #fff
		top: 23px
		left: 15px
		right: 15px
		transition: transform .3s
		&::before,
		&::after
			content: ""
			display: block
			position: absolute
			width: 100%
			height: 2px
			background-color: #fff
			left: 0
		&::before
			top: -7px
			transform-origin: top right
			transition: transform .3s,width .3s,top .3s
		&::after
			bottom: -7px
			transform-origin: bottom right
			transition: transform .3s,width .3s,bottom .3s