I have a sidebar navigation on my web page. The sidebar is hidden until the menu button is clicked to display the sidebar navigation.

When the menu button is clicked, the sidebar navigation displays in an animated mode from the left side of the screen.

But I want a situation where the sidebar navigation will be visible in desktop view and hidden in mobile view.

Then in mobile view, when the menu is clicked, the sidebar should display in an animated mode just as in my HTML below.

HTML

<nav class="navbar navbar-expand-lg" id="top-nav" style=" background-color: #0a6879;font-size: 10pt;min-height: 40px;">
     <span style="font-size: 15pt; cursor: pointer;color: #fff;" onclick="openNav()">&#9776;Menu</span>
     <a class="navbar-brand" href="Index.aspx" style="font-weight:800;font-size:18pt;">Ballot</a>
      <ul class="navbar-nav" style="float: right;text-align: right;">
            <li class="nav-item active">
                <a class="nav-link active" href="#"><i class="fa fa-home" aria-hidden="true" style="margin: 0 7px"></i>Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#"><i class="fa fa-envira" aria-hidden="true" style="margin: 0 7px"></i>Login</a>
            </li>
           <li class="nav-item" style="background-color: #00C216; border-radius:10px; font-weight:800;">
                <a class="nav-link" href="ProductOrders.aspx">Register</a>
            </li>
        </ul>
 </nav>
<div id="mySideNav" class="side">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">Dashboard</a>
    <a href="#">Contact</a>
    <a href="#">Settings</a>
    <a href="#">Results</a>
</div>
<h3>Animated Side Navigation Bar Example</h3>
<p>Click on the Menu element above to open the side bar navigation Menu.</p>

Javascript

<script type="text/javascript">
    function openNav() {
        document.getElementById("mySideNav").style.width = "150px";
    }
 
    function closeNav() {
        document.getElementById("mySideNav").style.width = "0"
    }
</script>

CSS

.side {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    transition: 0.5s;
}
 
    .side a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 12pt;
        color: #818181;
        display: block;
        transition: 0.3s;
    }
 
        .side a:hover {
            color: #f1f1f1;
        }
 
@media screen and (max-height: 450px) {
    .side {
        padding-top: 15px;
    }
 
        .side a {
            font-size: 13pt;
        }
}
 
.side .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 17pt;
    margin-left: 50px;
}