CODEWITHSUNDEEP
htmlcssangularangular-material
J4N
J4N

Reputation: 20733

How to put a hamburger menu in a textbox like google maps?

I am new to web app development and I am trying to insert a hamburger-menu icon into an HTML textbox element using angular material drawer. I am hoping to find Something similar to this: enter image description here

In angular material.

So far I've this:

<mat-drawer-container class="example-container" style="height: 100%;">
  <mat-drawer>
    <app-menu></app-menu>
  </mat-drawer>
  <agm-map id="map" [latitude]="lat" [zoom]="zoom" [longitude]="lng" [zoomControl]="false" [streetViewControl]="false">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>
  <mat-form-field id="searchBox">
    <input matInput placeholder="Search something">
  </mat-form-field>

</mat-drawer-container>

I'd like the same kind of control as Google's HTML textbox input element that contains a hamburger button, and I want to do this using Angular Material.

I know how to trigger the display of the drawer, but I don't know how to add this hamburger menu here?

Upvotes: 1

Views: 505

Answers (2)

Lucio
Lucio

Reputation: 1

If you are using Angular Material, there's a way to indicate a prefix and a suffix in an input. Using matPrefix and matSuffix should work as you want, you can even add your components.

For example:

<mat-form-field>
    <span matPrefix>+1 &nbsp;</span>
    <input type="tel" matInput placeholder="Telephone"> 
    <mat-icon matSuffix>mode_edit</mat-icon>
 </mat-form-field>

You can see this in THIS StackBlitz. Hope it helps

Upvotes: 0

Akhi Akl
Akhi Akl

Reputation: 3941

you can make a flex container to create something like this.

<div style="display:flex">
    <button class="menu-button" mat-icon-button>
    <mat-icon>menu</mat-icon>
  </button>
    <input matInput placeholder="search">
  <button class="phone-button" mat-icon-button>
    <mat-icon>microphone</mat-icon>
  </button>
  <div class="rounded-person"></div>
</div>

Upvotes: 0

Related Questions