Help with code

The following code is a mess(exclude the <div> tags where no content is placed).After including ‘requests.php’,the jquery code is not working.Also I can’t make the requests.php appear by making the main page intact

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="newstyle.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/font-awesome.min.css"> 
    <script>"bootstrap-4.0.0-dist/js/bootstrap.bundle.min.js"</script>
    <title>Document</title>
</head>
<body>
   <div id="mySidenav" class="sidenav">
      <p class="logo"><span>Garbage </span>Management</p>
      <a href="dashboard.html" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Dashboard</a>
      <a href="#" class="icon-a"><i class="fa fa-users icons"></i>&nbsp;&nbsp;Users</a>
      <a href="requests.php" class="icon-a"><i class="fa fa-list icons"></i>&nbsp;&nbsp;Lodge Requests</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Lodge Complaints</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Request history</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Complaint history</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Search</a>
      <a href="#" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Payments</a>
      <a href="signout.php?user=<?php echo $_SESSION['username']; ?>" class="icon-a"><i class="fa fa-dashboard icons"></i>&nbsp;&nbsp;Log out</a>
   </div>
   <div id="main">
      <div class="head">
        <div class="col-div-6">
            <span style="font-size: 30px; cursor: pointer;color: white;" class="nav"> &#9776; Dashboard</span> 
            <span style="font-size: 30px; cursor: pointer;color: white;" class="nav2"> &#9776; Dashboard</span>
        </div>
        <div class="col-div-6">
           <div class="profile"> 
            <p ><span>Welcome<?php echo isset($_SESSION["username"]) ? $_SESSION["username"] : "user"; ?></span></p>
           </div>
        </div>
        <div class="clearfix">

        </div>
        <div class="clearfix">

        </div>
        <br/><br/>
        <div class="col-div-8">
            <div class="box-8">
                <div class="content-box">
                    <p></p>
                </div>
            </div>
        </div>
        <div class="col-div-4">
            <div class="box-4">
                <div class="content-box">
                    
                </div>
            </div>
        </div>
        <div class="clearfix">

        </div>
      </div>
   </div>
<script src="scripts/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".nav").click(function(){
        $("#mySidenav").css('width','70px');
        $("#main").css('margin-left','70px');
        $(".logo").css('visibility','hidden');
        $(".logo span").css('visibility','visible');
        $(".logo span").css('margin-left','-10px');
        $(".icon-a").css('visibility','hidden');
        $(".icons").css('visibility','visible');
        $(".icons").css('margin-left','-8px');
        $(".nav").css('display','none');
        $(".nav2").css('display','block');
    });
    $(".nav2").click(function(){
        $("#mySidenav").css('width','300px');
        $("#main").css('margin-left','300px');
        $(".logo").css('visibility','visible');
        $(".logo span").css('visibility','visible');
        $(".icon-a").css('visibility','visible');
        $(".icons").css('visibility','visible');
        $(".nav").css('display','block');
        $(".nav2").css('display','none');
    });
    });
</script>   
</body>
</html>

So what does requests.php do?

Something I do when I ask questions is I trim the code down to the minimum necessary to show the problem. I often solve a problem myself when I do that.

I am concerned about that href. It might be correct but relative paths such as that usually do not work. People are often more likely to help when the amount of code is minimal.

I see many <i> tags with nothing in them. I assume you meant to put the text in each anchor in the italics.

I see &nbsp;&nbsp; within the text of anchors (links). I think the spacing is best done outside of the anchor but that might just be personal preference. I use &mdash;, &emsp; or &emsp;|&emsp; to separate anchors.