We can now take a look at creating our left-hand side panel. A great resource for HTML elements, CSS styling, and animations is the W3Schools website (https://www.w3schools.com/). The how-to section of the documentation provides a huge library of samples, including slideshows, modal boxes, progress bars, and responsive tables to name just a few. We will use a sample from the side navigation section, called Sidenav Push Content. This example shows how to create a side navigation screen that pushes the main content of the page over as it expands, instead of creating an overlay. We will start with some HTML added to our app.component.html file, as follows:

<div id="mySidenav" class="sidenav"> 
  <a href="#">About</a> 
  <a href="#">Services</a> 
  <a href="#">Clients</a> 
  <a href="#">Contact</a> 
</div> 

Here, we have described a <div> element with an id of mySideNav, and a CSS class of sidenav. This <div> element contains four sub-links. To turn this into an attractive side navigation bar, we will now need to edit our app.component.css file to add a few styles, as follows:

/* The side navigation menu */ 
.sidenav { 
    height: 100%; /* 100% Full-height */ 
    width: 250px; /* 0 width - change this with JavaScript */ 
    position: fixed; /* Stay in place */ 
    z-index: 1; /* Stay on top */ 
    top: 55px; 
    left: 0; 
    background-color: #111; /* Black*/ 
    overflow-x: hidden; /* Disable horizontal scroll */ 
    padding-top: 60px; /* Place content 60px from the top */ 
    transition: 0.3s;    
} 
 
/* The navigation menu links */ 
.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s 
} 
 
/* When you mouse over the navigation links, change their color */ 
.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

With these few CSS styles in place, our side navigation panel starts to take shape, as can be seen in the following screenshot:

Here, we have a nicely styled side navigation bar. Unfortunately, our main page content has disappeared behind this side navigation bar, meaning that we will need to apply a surrounding <div> element and some styles to ensure that the left-hand panel pushes our main panel content over to the right. Our main panel content then becomes:

<div id="main" class="main-content-panel"> 
    <div class="row"> 
        <div class="col-sm-1"> 
            <button> 
                <span class="fa fa-chevron-left"> </span> 
            </button> 
        </div> 
        <div class="col-sm-11"> 
            <div class="row-content-header">{{title}}</div> 
        </div> 
    </div> 
    <div class="main-content"> 
        <button class="btn btn-primary"> 
            detail 
        </button> 
    </div> 
</div> 

Here, we have wrapped our main content in a <div> element with an id of "main", and a class of "main-content-panel". This <div> element is then broken down into a row that consists of two columns, of sizes 1 and 11. This row houses our show/hide side panel button, and the {{title}} element. Beneath this header row is our main content, which simply includes a single button named detail. Our corresponding CSS for this section of HTML is as follows:

#main { 
    margin-left: 250px; 
    transition: .3s; 
} 
 
#main-body { 
    transition: .3s; 
} 
 
.main-content { 
    padding: 20px; 
} 
 
.row-content-header { 
    padding: 5px; 
    font-size: 20px; 
} 

There are two key styles here that affect our page content. The first is the margin-left: 250px element of the #main style. This margin-left value is the CSS property that pushes our main content over to the right when the left-hand panel is visible. This property matches the corresponding side panel value of .sidenav { width: 250px; }. In other words, the side panel has a width of 250px, and the main panel has a left margin of 250px. These two values combined show the left-hand panel, and also push the main panel over to the right. We will adjust these two values from 250px to 0px in order to show or hide the left-hand panel.

The second key style is the transition: .3s; property, which defines how long it takes to animate both the side panel collapsing and expanding, and the main panel being pushed to the right, or expanding to fill the screen. With these styles in place, we can now attach some code to kick off an animated page transition. To get this to work, we need to register a click handler in the HTML, and then implement the click handler in our app.component.ts file.

Firstly, let's examine the button click Document Object Model (DOM) event in the app.component.html file:

<button (click)="showHideSideClicked()"> 
    <span class="fa fa-chevron-left"> </span> 
</button> 

Here, we have defined a function named showHideSideClicked, which will be called whenever we click on the show/hide button. Our changes to the app.component.ts file are as follows:

export class AppComponent  
{ 
    title = "Select an option :"; 
    isSideNavVisible = true; 
    showHideSideClicked() { 
        if (this.isSideNavVisible) { 
            document.getElementById('main') 
                .style.marginLeft = "0px"; 
            document.getElementById('mySidenav') 
                .style.width = "0px"; 
            this.isSideNavVisible = false; 
        } else { 
            document.getElementById('main') 
                .style.marginLeft = "250px"; 
            document.getElementById('mySidenav') 
                .style.width = "250px"; 
            this.isSideNavVisible = true; 
        } 
    } 
} 

Here, we have added a property to the AppComponent class, named isSideNavVisible, and set it to true by default. This property is keeping track of whether the side navigation bar is visible or not. We have then implemented the showHideSideClicked function. If the side navigation bar is visible, we set the marginLeft style of the main panel to 0px, and also set the width of the mySideNav element to 0px. This essentially collapses the side panel, and makes the main panel fill the whole screen. If the side navigation bar is collapsed, we do the opposite, and also set the isSideNavVisible property at the same time. Running our application at this stage shows and hides the left-hand panel quite nicely, using the transition: .3s property to apply a visually appealing animation.