    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;?php
include(&quot;db/cn.php&quot;);
if(isset($_SESSION[&#039;user_name&#039;]) &amp;&amp; isset($_SESSION[&#039;user_role&#039;])&amp;&amp; isset($_SESSION[&#039;outlet_name&#039;])
&amp;&amp; isset($_SESSION[&#039;outlet_address&#039;])) {
    $userName = $_SESSION[&#039;user_name&#039;];
    $userRole = $_SESSION[&#039;user_role&#039;];
	$outlet_address = $_SESSION[&#039;outlet_address&#039;];
	$outlet_name = $_SESSION[&#039;outlet_name&#039;];
}
//$cr_id = $_GET[&quot;cr_id&quot;];
@$supplier_name = $_GET[&quot;name_detail&quot;];
//echo $cr_nickname;
$rec =  mysqli_query($connection,&quot;select * from incash where name_detail = &#039;$supplier_name&#039;  &amp;&amp; login_user = &#039;$userName&#039; &amp;&amp; user_role =&#039;$userRole&#039; &quot;);
$row1 = mysqli_fetch_array($rec);
//echo $row1[&quot;order_id&quot;];
//@$order_id = $row1[&quot;order_id&quot;];


$date_time1 = date(&quot;Y-m-d&quot;);
$rec10 = mysqli_query($connection, &quot;SELECT name_detail, SUM(amount) AS total_amount 
                                    FROM incash 
                                    WHERE name_detail = &#039;$supplier_name&#039; 
                                    AND login_user = &#039;$userName&#039; 
                                    AND user_role = &#039;$userRole&#039;  
                                    GROUP BY name_detail&quot;);

if ($rec10) {
    $total_sales = 0;
    while ($row3 = mysqli_fetch_array($rec10)) {
        $total_sales = $row3[&#039;total_amount&#039;];
    }
    echo &quot;&quot;;
    if (mysqli_num_rows($rec10) == 0) {
        echo &quot;&quot;;
    }
} else {
    echo &quot;Error executing query: &quot; . mysqli_error($connection);
}
/*$date_time21 = date(&quot;Y-m-d&quot;);
$cash_out = mysqli_query($connection, &quot;SELECT SUM(supplier_amount) AS total_amount FROM purchases where user_name = &#039;$userName&#039; &amp;&amp; user_role = &#039;$userRole&#039; &amp;&amp; supplier_name = &#039;$supplier_name&#039; &amp;&amp; paid_by = &#039;cash&#039;  &quot;);
if ($cash_out) {
    $cash_outdata = mysqli_fetch_array($cash_out);
    if ($cash_outdata &amp;&amp; isset($cash_outdata[&#039;total_amount&#039;])) {
        $totalAmount = $cash_outdata[&#039;total_amount&#039;];
        echo &quot;&quot;;
    } else {
        echo &quot;&quot;;
    }
} else {
    echo &quot;Error executing query: &quot; . mysqli_error($connection);
}*/







if($_SERVER[&quot;REQUEST_METHOD&quot;] == &quot;POST&quot; &amp;&amp; isset($_POST[&quot;creditor_paid&quot;])){
$date_time = date(&quot;Y-m-d&quot;);
	$cr_name = $_POST[&quot;cr_name&quot;];
	$cr_address = $_POST[&quot;cr_address&quot;];
	$amount = $_POST[&quot;amount&quot;];
	
	 mysqli_query($connection,&quot;insert into credit_paid(cr_name,amount,date_time,user_name,user_role,outlet_name,outlet_address)
values(&#039;&quot;.$cr_name.&quot;&#039;,&#039;&quot;.$amount.&quot;&#039;,&#039;&quot;.$date_time.&quot;&#039;,&#039;&quot;.$userName.&quot;&#039;,&#039;&quot;.$userRole.&quot;&#039;,&#039;&quot;.$outlet_name.&quot;&#039;,&#039;&quot;.$outlet_address.&quot;&#039;)&quot;);

	

}
?&gt;

&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
    &lt;title&gt;Expence - Detail&lt;/title&gt;
    &lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/custom_css.css&quot; /&gt;
    &lt;!-- QRCode.js --&gt;
    &lt;script src=&quot;https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;style&gt;
#table-container-wrapper {
    max-height: 460px; /* Adjust the maximum height as needed */
    overflow-y: auto; /* Enable vertical scroll when content overflows */
}


@media (max-width: 880px) {
    .col-4 {
        width: 33.33% !important;
    }
    .fa-wifi {
        display: none !important;
    }
    .col-6 {
        width: 50% !important;
    }
}

@media (min-width: 880px) {
    .sidebar {
        width: 100%;
        /* Change sidebar width to 100% on mobile */
        max-width: 120px; /* Set maximum width for the sidebar */
    }
}

@media (min-width: 880px) {
    .main-content {
        margin-left: ; /* Width of the sidebar */
    }
}

/* Added new class to control overlay */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 999;
    display: none; /* Initially hidden */
}
    /* Custom styles for sidebar */
    .sidebar {
        width: 100px;
        background-color: #060606;
        position: fixed;
        bottom: 0;
        top: 60px;
        transition: transform 0.3s ease-in-out;
        transform: translateX(0);
        z-index: 1;
        height: 100%;
        border-radius: 0px;
		   transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
    }

    .sidebar.hide {
        transform: translateX(-100px);
        /* Move sidebar out of the viewport when it is hidden */
    }

    .sidebar .nav-item {
        padding: 10px 0;
        text-align: center;
        position: relative;
        font-size: 12px;
    }

    .sidebar .nav-link {
        color: #fff;
        position: relative;
        /* Ensure icon and text are positioned relative to the nav link */
        z-index: 2;
        /* Ensure the text and icon are above the hover background */
    }

    .sidebar .nav-link i {
        margin-bottom: 5px;
        /* Adjust the margin of the icon */
    }

    /* Custom styles for hover effect */
    .sidebar .nav-item:hover:after {
        background-color: #fff;
        content: &#039;&#039;;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        /* Ensure the hover background is below the text and icon */
    }

    .sidebar .nav-item:hover .nav-link {
        color: #0A5064;
    }

    /* Custom styles for divider */
    .sidebar .nav-item:after {
        content: &quot;&quot;;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
        transition: height 0.3s ease-in-out;
        /* Transition effect for smooth animation */
    }

    /* Custom styles for header */
    .header {
        background-color: #060606;
        color: #fff;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 2;
        height: 69px;
        box-shadow: #FFF 2px 0px 0px 0px;
        /* Ensure header appears above sidebar */
    }

    .header .navbar-toggler {
        color: #fff;
    }

    .header .navbar-toggler-icon {
        color: #fff;
        /* Set the color of the toggle button to white */
    }

    .header .navbar-toggler.white {
        color: #fff !important;
        /* Ensure the toggle button is white */
    }

    .header .navbar-brand {
        color: #fff;
        /* Set navbar brand text color to white */
    }

    .header .nav-item .nav-link {
        color: #fff;
        /* Set nav link text color to white */
    }

.main-content {
    margin-top: 50px; /* Height of fixed header */
    margin-left: 50px; /* Initially, set margin-left to 0 */
    padding-top: 30px; /* Height of fixed header */
    transition: margin-left 0.3s ease-in-out; /* Add transition for smoother animation */
}


    /* Custom styles for search bar */
    .search-container {
        display: flex;
        align-items: center;
       width:100%;
        margin: 2px auto;

        float:left;
	}

/* Updated hide class to apply to the overlay */
.sidebar.hide, .overlay.hide {
    transform: translateX(-100%);
}

    .search-input {
        width: 100%;
        padding: 10px 30px 10px 10px;
        /* Adjust padding to accommodate the icon */
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
    }

    .search-icon {
        position: relative;
        left: -25px;
        /* Adjust the position of the icon */
        color: #aaa;
    }

    .search-icon i {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .btn-dark {
        background: #0A5064;
        color: #fff;
        border: 1px solid #0A5064;
    }

    .btn-dark:hover {
        background: #fff;
        color: #0A5064;
        border: 1px solid #0A5064;
    }

    .bg-dark2 {
        background: #8A1218;
        color: #fff;
    }

    .modal-content {
        animation: modal-animation 0.5s;
    }

    @keyframes modal-animation {
        from {
            opacity: 0;
            transform: scale(0.8);
        }

        to {
            opacity: 1;
            transform: scale(1);
        }
    }	
		
		/* Basic styling */
    .tab {
        display: none;
        padding: 20px;
    }
    .active {
        display: block;
    }
    .tab-buttons {
        display: flex;
    }
    .tab-button {
        cursor: pointer;
        padding: 10px 10px;
        background-color: #ffff;
        border: 1px solid #881218;
        border-radius: 5px 5px 0 0;
        margin-right: 5px;
		color:#881218;
    }
    .tab-button.active {
        background-color: #881218;
		color:#fff;
    }

    /* Background colors for tab content */
    #tab1 {
        background-color: #fff;
		color:#881218;
		padding:20px;
    }
    #tab2 {
        color:#881218;
		background-color: #f7f4f4;
    }
    #tab3 {
		color:#881218;
        background-color: #f7f4f4;
    }
&lt;/style&gt;

&lt;body&gt; 

&lt;?php include(&quot;common/hd.php&quot;);?&gt;
&lt;!-- Sidebar --&gt;
&lt;?php include(&quot;common/sd.php&quot;); ?&gt;
&lt;div class=&quot;main-content&quot;&gt;
&lt;br /&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-9&quot;&gt;
&lt;h3 style=&quot;color:#212529;&quot;&gt;Expence Detail&lt;/h3&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-3&quot;&gt;
&lt;a href=&quot;expence.php&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot;&gt;&lt;i class=&quot;fa fa-arrow-left&quot;&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
&lt;!--&lt;button type=&quot;button&quot; class=&quot;btn btn-dark&quot; data-toggle=&quot;modal&quot; data-target=&quot;#addPurchaseModal&quot;&gt;
               &lt;i class=&quot;fa fa-dollar-sign&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;--&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-3  text-dark text-capitalize&quot; &gt;
&lt;span style=&quot;padding:10px; border-radius:7px; font-size:18px; border:1px solid #0A5064;&quot;&gt;&lt;?php echo $supplier_name; ?&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div class=&quot;col-sm-9&quot;&gt;&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;container&quot;&gt;
&lt;div class=&quot;tab-buttons&quot;&gt;
   &lt;!-- &lt;div class=&quot;tab-button &quot; onclick=&quot;openTab(event, &#039;tab1&#039;)&quot;&gt;&lt;/div&gt;--&gt;
    &lt;!--&lt;div class=&quot;tab-button &quot; onclick=&quot;openTab(event, &#039;tab&#039;)&quot;&gt;Detail&lt;/div&gt;--&gt;
    
&lt;/div&gt;
&lt;?php  

@$remain_credit = $total_sales - $totalAmount;

?&gt;
&lt;br /&gt;
&lt;div class=&quot;tab-container&quot;&gt;
   
    &lt;div id=&quot;&quot; class=&quot;&quot;&gt;
        &lt;h4&gt;Cash out&lt;/h4&gt;
        &lt;div class=&quot;container&quot;&gt;
           &lt;div class=&quot;row&quot;&gt;
              
    
            &lt;br /&gt;
            &lt;/div&gt;
            
           
          
             &lt;div class=&quot;col-sm-12&quot; id=&quot;table-container-wrapper&quot;&gt;
               &lt;table class=&quot;table table-stripped table-sm text-center&quot;&gt;
                &lt;tr style=&quot;background:#212529; color:#fff;&quot;&gt;
                
               &lt;td&gt;Date&lt;/td&gt;
                &lt;td&gt;Name&lt;/th&gt;
                &lt;td&gt;Amount&lt;/td&gt;
                &lt;td&gt;By&lt;/td&gt;
               
                &lt;/tr&gt;
               &lt;?php  
			   $rec3 = mysqli_query($connection,&quot;select * from incash where name_detail = &#039;$supplier_name&#039; &quot;);
			   while($row3 = mysqli_fetch_array($rec3)){
			   ?&gt;
              &lt;tr&gt;

              &lt;td&gt;&lt;?php echo $row3[&quot;date_time&quot;]; ?&gt;&lt;/td&gt;
              &lt;td class=&quot;text-capitalize&quot;&gt;&lt;?php echo $row3[&#039;name_detail&#039;];?&gt;&lt;/td&gt;
              &lt;td&gt;Rs. &lt;?php echo $row3[&#039;amount&#039;]; ?&gt;&lt;/td&gt;
              
              &lt;td style=&quot;text-transform:capitalize;&quot;&gt;&lt;?php echo $row3[&#039;login_user&#039;]; ?&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;?php }?&gt;
               &lt;/table&gt;
             &lt;/div&gt;
           &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--&lt;div id=&quot;tab3&quot; class=&quot;tab&quot;&gt;
        &lt;h4&gt;Cash Paid&lt;/h2&gt;
        &lt;div class=&quot;container &quot;&gt;
           &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-sm-4&quot; style=&quot;padding:20px;&quot;&gt;
            &lt;div class=&quot;col-sm-12&quot; style=&quot;padding:20px;box-shadow: 0px 0px 5px 3px #CCC; border-radius:10px;&quot;&gt;
             &lt;span class=&quot;mb-700 text-dark&quot; style=&quot;font-size:20px;&quot;&gt;Opening Drawer Amount&lt;/span&gt;&lt;br /&gt;
             &lt;span class=&quot;text-center&quot; style=&quot;font-size:36px; color:#8A1218;&quot;&gt;
			/-&lt;/span&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-sm-4&quot; style=&quot;padding:20px;&quot;&gt;
            &lt;div class=&quot;col-sm-12&quot; style=&quot;padding:20px;box-shadow: 0px 0px 5px 3px #CCC; border-radius:10px;&quot;&gt;
         
          
             &lt;span class=&quot;mb-700 text-dark&quot; style=&quot;font-size:20px;&quot;&gt;Credit Sale&lt;/span&gt;&lt;br /&gt;
             &lt;span class=&quot;text-center&quot; style=&quot;font-size:36px; color:#8A1218;&quot;&gt;
             &lt;?php echo isset($total_sales) ? &quot;Rs &quot;.$total_sales.&quot;.00&quot; : &quot;&quot;; ?&gt;
              /-&lt;/span&gt;
           
            
            &lt;/div&gt;
            &lt;/div&gt;
        
           
            &lt;div class=&quot;col-sm-4&quot; style=&quot;padding:20px;&quot; &gt;
            &lt;div class=&quot;col-sm-12&quot; style=&quot;padding:20px;box-shadow: 0px 0px 5px 3px #CCC; border-radius:10px;&quot;&gt;
             &lt;span class=&quot;mb-700 text-dark&quot; style=&quot;font-size:20px;&quot;&gt;Today Other Payment Sale&lt;/span&gt;&lt;br /&gt;
             &lt;span class=&quot;text-center&quot; style=&quot;font-size:36px; color:#8A1218;&quot;&gt;Rs 0.00/-&lt;/span&gt;
            &lt;/div&gt;
            &lt;/div&gt;
            
            &lt;/div&gt;
           
           &lt;br /&gt;
             &lt;div class=&quot;col-sm-12&quot;&gt;
               &lt;table class=&quot;table table-stripped text-center&quot;&gt;
                &lt;tr style=&quot;background:#881218; color:#fff;&quot;&gt;
                &lt;td&gt;ID&lt;/td&gt;
                &lt;td&gt;Date&lt;/td&gt;
                &lt;td&gt;Supplier&lt;/td&gt;
                &lt;td&gt;Amount&lt;/td&gt;
                &lt;td&gt;Paid By&lt;/td&gt;
                &lt;td&gt;Recieved By&lt;/td&gt;
                &lt;/tr&gt;
              &lt;?php 
			  
			  
			  $rec1 = mysqli_query($connection,&quot;select * from purchases where paid_by = &#039;cash&#039; &amp;&amp; supplier_name = &#039;$supplier_name&#039; &quot;);
			  while($row2 = mysqli_fetch_array($rec1)){
			  
			  ?&gt;
              &lt;tr&gt;
              &lt;td&gt;&lt;?php echo $row2[&quot;id&quot;]; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?php echo $row2[&quot;date_time&quot;];?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?php echo $row2[&quot;supplier_name&quot;];?&gt;&lt;/td&gt;
              &lt;td&gt;Rs &lt;?php echo $row2[&quot;supplier_amount&quot;]; ?&gt;&lt;/td&gt;
              &lt;td&gt;&lt;?php echo $row2[&quot;paid_by&quot;]; ?&gt;&lt;/td&gt;
              &lt;td&gt;Rs &lt;?php echo $row2[&quot;user_name&quot;];?&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;?php } ?&gt;
              &lt;/table&gt;
             &lt;/div&gt;
           &lt;/div&gt;
          &lt;/div&gt;--&gt;
    &lt;/div&gt;


&lt;div class=&quot;modal fade&quot; id=&quot;addPurchaseModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; 
            aria-labelledby=&quot;addPurchaseModalLabel&quot; aria-hidden=&quot;true&quot; style=&quot;margin-top:80px;&quot;&gt;
                &lt;div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
                    &lt;div class=&quot;modal-content&quot;&gt;
                        &lt;div class=&quot;modal-header&quot;&gt;
                            &lt;h5 class=&quot;modal-title text-capitalize&quot; id=&quot;addPurchaseModalLabel&quot;&gt;Add Puchase&lt;/h5&gt;
                            &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
                                &lt;span aria-hidden=&quot;true&quot;&gt;&amp;times;&lt;/span&gt;
                            &lt;/button&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;modal-body&quot;&gt;
                            &lt;!-- Form for adding purchase --&gt;
                            &lt;form method=&quot;post&quot; action=&quot;creditor_detail.php?customer_name=&lt;?php echo $customer_name; ?&gt;&quot; enctype=&quot;multipart/form-data&quot;&gt;
                            
                                &lt;input type=&quot;text&quot; name=&quot;cr_name&quot; placeholder=&quot;Description / Name&quot; class=&quot;form-control&quot; /&gt;
                                &lt;br /&gt;
                                &lt;input type=&quot;text&quot; name=&quot;amount&quot; placeholder=&quot;Amount&quot; class=&quot;form-control&quot; /&gt;
                               &lt;br /&gt;
                                &lt;input class=&quot;form-control&quot; type=&quot;date&quot; name=&quot;date_time&quot;  /&gt;
                                &lt;br /&gt;
                                &lt;button type=&quot;submit&quot; name=&quot;creditor_paid&quot;  class=&quot;btn btn-dark&quot;&gt;Enter&lt;/button&gt;
                            &lt;/form&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;

&lt;/div&gt;

   
&lt;/div&gt;    
&lt;/body&gt;

&lt;script&gt;
 // Function to switch between tabs
    function openTab(evt, tabName) {
        // Get all elements with class=&quot;tab&quot; and hide them
        var tabs = document.getElementsByClassName(&quot;tab&quot;);
        for (var i = 0; i &lt; tabs.length; i++) {
            tabs[i].style.display = &quot;none&quot;;
        }

        // Get all elements with class=&quot;tab-button&quot; and remove the class &quot;active&quot;
        var tabButtons = document.getElementsByClassName(&quot;tab-button&quot;);
        for (var i = 0; i &lt; tabButtons.length; i++) {
            tabButtons[i].classList.remove(&quot;active&quot;);
        }

        // Show the current tab, and add an &quot;active&quot; class to the button that opened the tab
        document.getElementById(tabName).style.display = &quot;block&quot;;
        evt.currentTarget.classList.add(&quot;active&quot;);
    }
	
	
document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
    var sidebar = document.getElementById(&quot;sidebar&quot;);
    var overlay = document.createElement(&quot;div&quot;);
    overlay.classList.add(&quot;overlay&quot;);
    document.body.appendChild(overlay);

    function toggleSidebar() {
        sidebar.classList.toggle(&quot;hide&quot;);
        overlay.classList.toggle(&quot;hide&quot;);

        var mainContent = document.querySelector(&quot;.main-content&quot;);
        if (sidebar.classList.contains(&quot;hide&quot;)) {
            mainContent.style.marginLeft = &quot;0&quot;;
        } else {
            mainContent.style.marginLeft = &quot;100px&quot;; // Width of the sidebar
        }
    }

    overlay.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Add toggle functionality to navbar toggler
    var navbarToggler = document.querySelector(&quot;.navbar-toggler&quot;);
    navbarToggler.addEventListener(&quot;click&quot;, function () {
        toggleSidebar();
    });

    // Automatically hide sidebar on all screen sizes
    // sidebar.classList.add(&quot;hide&quot;);
    // overlay.classList.add(&quot;hide&quot;);
    
    // Add class to body to prevent scrolling when sidebar is open
    // document.body.classList.add(&quot;noscroll&quot;);

    // Check if screen size is larger than a certain threshold (e.g., 768px for desktop screens)
    function checkScreenSize() {
        if (window.innerWidth &gt; 768) {
            sidebar.classList.remove(&quot;hide&quot;);
            overlay.classList.remove(&quot;hide&quot;);
        } else {
            sidebar.classList.add(&quot;hide&quot;);
            overlay.classList.add(&quot;hide&quot;);
        }
    }

    // Check screen size on initial load and whenever the window is resized
    checkScreenSize();
    window.addEventListener(&quot;resize&quot;, checkScreenSize);
});
 
	&lt;/script&gt;
&lt;!-- jQuery library --&gt;
&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- Popper JS --&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js&quot;&gt;&lt;/script&gt;

&lt;/html&gt;</code></pre>        </div>
    </div>