Display menu icon in Angular Material when sidebar collapses

I have set up a sidenav that collapses when the window is smaller than 1280px using this code: 

md-is-locked-open="$mdMedia('gt-md')"
. However, I would like to add a menu icon (Hamburger button) that appears when the sidenav collapses, allowing users to click on it and display the menu. I haven't written any JavaScript for this yet.

The current behavior is similar to the left Sidenav in Angular Material's demo.

<div id="menu-icon">
            <svg ng-click="showMenu()" fill="#FFFFFF" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0h24v24H0z" fill="none" />
                <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
            </svg>
        </div>
        <md-sidenav ng-cloak id="main-layout-sidebar" class="md-sidenav-left md-whiteframe-z2" layout="column" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

            <div ng-cloak class="user-options">
                <div class="content">
                    <div id="user-icon">
                        <md-icon class="picture" md-font-set="material-icons"> account_circle </md-icon>
                    </div>
                    <div id="user-info">
                        <p id="username">{{username}}</p>
                        <md-button ng-click="logout()">Cerrar sesión </md-button>
                    </div>
                </div>
            </div>
            <md-list ng-cloak class="menu">
                <md-list-item ng-repeat="(name, uiref) in items" ng-class="{ active: $state.includes({{uiref}}) }">
                    <a ui-sref={{uiref}}>
                        <md-button class="sidebar-button">
                            {{name}}
                        </md-button>
                    </a>
                </md-list-item>
            </md-list>
        </md-sidenav>

I am looking for guidance on how to achieve this desired behavior. Any suggestions?

javascripthtmlcssangularjsangular-material

Answer №1

If you want to accomplish this task, you have the option of using either jQuery or following the Angular approach.

Using jQuery:

Javascript

$scope.isSidenavOpen = false;  
$scope.$watch('isSidenavOpen', function(isSidenavOpen) {
    if(isSidenavOpen){
        $('#yourButton').fadeIn();
    } else {
        $('#yourButton').fadeOut();
    }
});

HTML

<button id='yourButton'></button>

Angular approach:

Javascript

$scope.isSidenavOpen = false;

HTML

<button id='yourButton' ng-hide='isSidenavOpen'></button>

I haven't tested this code personally, but it is expected to function correctly. From what I recall, ng-hide does not require the addition of $watch. I hope this information proves helpful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unleash the full potential of React and material-ui with the Raised Button feature - find out how to effortlessly keep all

This snippet showcases the code for my custom Buttons component: import React from 'react'; import RaisedButton from 'material-ui/RaisedButton'; const style = { button: { margin: 2, padding: 0, minWidth: 1, }, }; cons ...

javascriptreactjsmaterial-ui

Utilize jQuery script on every single element

Is there a way to implement a jquery function on elements that are dynamically loaded via ajax? <span class="h">Test</span><br /><br /> <span class="h">Test</span><br /><br /> <span class="h">Test</ ...

javascriptjqueryajaxclick

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

Issues arise in the alignment of the tab order when utilizing a combination of the stripe card

Experiencing an issue with tab index not working properly when using Vue.js and having a stripe card-element inside the Vue main element. Below is the code snippet: <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js ...

javascriptvue.jstabsstripe-payments

Is it possible to obtain a Node.js backend code build? If so, what is the process of acquiring a Node.js build using npm?

I am currently working on a Node.js API service application and I wish to keep my code confidential from the client. I am looking for guidance on how to create a build similar to React or Ionic in Node.js. Any suggestions on how I can achieve this would ...

javascriptnode.jsnpm

Ways to obtain an attribute through random selection

Figuring out how to retrieve the type attribute from the first input element: document.getElementById('button').addEventListener('click', function() { var type = document.querySelectorAll('input')[0].type; document.getE ...

javascripthtmlattributes

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

Unable to create a flawless circle using Canvas

No matter how hard I try, drawing a perfect circle seems impossible for me. Every time I attempt it, all I manage to create is an ellipse. Check out this code snippet I put together as an example: function canvasClicked(number) { var c = "canvas" + nu ...

javascripthtmlcsscanvas

Is it possible to add or remove a class at the top of a div

Is there a way to create a fading effect for a class based on when a specific div enters the window? I am looking to implement this functionality, how can I achieve this? $(window).scroll(function() { var registerTop = $('.register').offset ...

javascript

What steps do I need to take to ensure my Bootstrap Carousel spans the entire width of the webpage?

I'm currently attempting to expand my bootstrap carousel to cover the entire width of the page as I believe it will provide the best visual impact. However, despite looking up solutions and trying various methods, nothing has seemed to work so far. If ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieve text fading effects with JavaScript for a dynamic user experience in an ASP.Net C# application

In my WebForm ASP.Net application, I have implemented a feature where I change the text on the web page. To draw user attention to this change, I want to fade out the old text completely, replace it with new text, and then fade in the new text. Currently, ...

javascriptc#cssasp.netwebforms

Can Bootswatch be installed using a package manager?

I have recently launched a small asp.net core website. Right now, all JS/CSS imports are from NPM and I am using webpack to bundle them together. Instead of sticking with the standard bootstrap template, I wanted to switch to bootswatch paper, but unfortu ...

csstwitter-bootstrap-3npmbootswatch

Understanding the Concept of Callback Functions in MDN

I'm wondering about the definition of a callback function, particularly in the context of MDN documentation such as array.filter. How can I differentiate between a synchronous and asynchronous callback function? ...

javascript

Displaying text underneath an image

Hey everyone, I'm currently working on getting some text to show up below an image using Bootstrap 3. Here's what I have so far: <div class="row"> <div class="col-xs-12 col-sm-6 col-md-3"><img alt="my image" class="img-about" ...

htmltwitter-bootstrapcss

Creating a slanted polygon div that adjusts to different screen sizes: a step-by-step

Looking to create a slanted and responsive div similar to the example image provided. Any assistance would be greatly appreciated. ...

htmlcssbootstrap-4

The Samsung Tablet is experiencing issues with numeric validation functionality

My numeric validation code is not working on Samsung tablets, although it works perfectly on other devices and browsers. $("#routingNum").keypress(function (e) { if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > ...

javascript

Are you harnessing the power of ng-view for your highly dynamic content?

I'm currently in the process of developing a website that offers users the ability to search for various products, such as laptops. Below is the code snippet from my main index div: <div class="content" id="main"> <div id="search-wrap" ...

angularjsangularjs-scope

How do you go about installing the most recent version of a module through Private NPM?

When using a private npm registry, I have noticed that some common commands do not seem to be functioning properly: npm install without specifying a specific @version :: issue npm outdated :: issue npm update :: issue npm view <private-packag ...

javascriptnode.jsnpmrepositorysemantic-versioning

The blend of Combination and Advanced Timeline triggers a "ReferenceError: Highcharts is not defined" error

Replication Steps First, download HIGHCHARTS 4.1.9 from http://www.highcharts.com/download Next, open the file index.html Then, click on Combinations > Advanced timeline An error message is displayed in Firebug and the chart does not appear: Referenc ...

javascripthighcharts

Changing the height of the parent div in Angular 2 to match the height of the child div that holds an image

When I make an HTTP call to fetch a block of HTML from an external source, the structure of the retrieved HTML looks like this: <div class="container"> <div class="wrapper"> <div class="image"> <img src="img_url> ...

jquerycssangular