How can I hide button on mobile media query and show them onclick?

Question

I have dropdown button which I want to hide when on mobile layout. On mobile layout there should be 1 main button, and on click of this button should trigger display of dropdown button. As of now on mobile overlay the main button is overlapped by dropdown button. How can I achieve this functionality?

Here is my scss code

@media (min-width: 700px) {
  .bot {
    display: none;
  }
}

@if (max-width: 700px) {
  .tools {
    display: block;
  }
} @else {
  .tools {
    display: none;
  }
}

  .toolss {

    background-color: $-white;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding-bottom: 65px;


    .tools {
      background: white;
      border: 0;
      border-bottom: 1px dark-gray-shade-light;
      border-radius: none;
      border-top: 1px dark-gray-shade-light;
      height: auto;

    }
    }

  .tools {
    background-color: white;
    display: block;


    @media (max-width: 700px) {
      display: block;
    }
}}

Here is my html code

<ng-container>
    <button class="bot" (click)="fill()">Data 
    </button>
    <div class="toolss">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>

Answer 1

DEMO

SASS

.hide-dropdown{
   display: block;
}

@media(max-width: 700px) {
    .hide-dropdown{
        display: none;
    }
}

.hide-button {
    display: none
}

@media(max-width: 700px) {
    .hide-button {
        display: block;
    }
}

HTML

<ng-container>
    <button class="bot hide-button" (click)="fill()">Data 
    </button>
    <div class="toolss" [ngClass]="{'hide-dropdown': !isClicked}">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>
</ng-container>

TS

isClicked: boolean = false;

fill() {
    this.isClicked = true;
}