tailwind css sidebar is not fixed - reactjs

Question

I want to know how to make this sidebar fixed but I don't want to make the navbar and the content below it fixed.
And how I make this responsive means I want to add a hamburger icon to make it responsive on mobile screen devices.
Please help me.
I removed all the SVG icons due to the word limit.
This is the whole code.
// library components
import React from 'react'
import { Link, NavLink } from 'react-router-dom'
const Sidebar = () => {
return (
<div className="relative flex flex-no-wrap">
{/* Sidebar starts */}
{/* Remove class [ hidden ] and replace [ sm:block ] with [ block ] */}
<div className="w-64 absolute sm:relative bg-gray-800 shadow md:h-screen flex-col justify-between hidden sm:flex pb-12">
<div className="px-8">
<div className="h-16 w-full flex items-center">
<h1>Brand Name</h1>
</div>
<ul className="mt-12">
<li className="flex w-full justify-between text-gray-300 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Dashboard</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Products</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Deliverables</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Invoices</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Inventory</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center">
<div className="flex items-center">
<span className="text-sm ml-2">Settings</span>
</div>
</li>
</ul>
</div>
</div>
{/*Mobile responsive sidebar*/}
<div className="w-64 z-20 absolute bg-gray-800 shadow md:h-full flex-col justify-between sm:hidden pb-12 transition duration-150 ease-in-out" id="mobile-nav">
<div className="h-10 w-10 bg-gray-800 absolute right-0 mt-16 -mr-10 flex items-center shadow rounded-tr rounded-br justify-center cursor-pointer" id="mobile-toggler" onclick="sidebarHandler()">
</div>
<div className="px-8">
<div className="h-16 w-full flex items-center">
</div>
<ul className="mt-12">
<li className="flex w-full justify-between text-gray-300 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Dashboard</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Products</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Performance</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Deliverables</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Invoices</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center mb-6">
<div className="flex items-center">
<span className="text-sm ml-2">Inventory</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-gray-500 cursor-pointer items-center">
<div className="flex items-center">
<span className="text-sm ml-2">Settings</span>
</div>
</li>
</ul>
</div>
</div>
{/* Sidebar ends */}
<div className="w-full">
{/* Navigation starts */}
<nav className="h-16 flex items-center lg:items-stretch justify-end lg:justify-between bg-white shadow relative z-10">
<div className="hidden lg:flex w-full pr-6">
<div className="w-1/2 h-full hidden lg:flex items-center pl-6 pr-24">
<div className="relative w-full">
<div className="text-gray-500 absolute ml-4 inset-0 m-auto w-4 h-4">
</div>
<input className="border border-gray-100 focus:outline-none focus:border-indigo-700 rounded w-full text-sm text-gray-500 bg-gray-100 pl-12 py-2" type="text" placeholder="Search" />
</div>
</div>
<div className="w-1/2 hidden lg:flex">
<div className="w-full flex items-center pl-8 justify-end">
<div className="h-full w-20 flex items-center justify-center border-r border-l">
<div className="relative cursor-pointer text-gray-600">
<div className="w-2 h-2 rounded-full bg-red-400 border border-white absolute inset-0 mt-1 mr-1 m-auto" />
</div>
</div>
<div className="h-full w-20 flex items-center justify-center border-r mr-4 cursor-pointer text-gray-600">
</div>
<div className="flex items-center relative cursor-pointer" onclick="dropdownHandler(this)">
<div className="rounded-full">
<ul className="p-2 w-full border-r bg-white absolute rounded left-0 shadow mt-12 sm:mt-16 hidden">
<li className="flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center">
<div className="flex items-center">
<span className="text-sm ml-2">My Profile</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center mt-2">
<div className="flex items-center">
<span className="text-sm ml-2">Sign out</span>
</div>
</li>
</ul>
<div className="relative">
<img className="rounded-full h-10 w-10 object-cover" src="https://tuk-cdn.s3.amazonaws.com/assets/components/sidebar_layout/sl_1.png" alt="avatar" />
<div className="w-2 h-2 rounded-full bg-green-400 border border-white absolute inset-0 mb-0 mr-0 m-auto" />
</div>
</div>
<p className="text-gray-800 text-sm mx-3">Jane Doe</p>
<div className="cursor-pointer text-gray-600">
</div>
</div>
</div>
</div>
</div>
<div className="text-gray-600 mr-8 visible lg:hidden relative" onclick="dropdownHandler(this)">
<ul className="p-2 w-40 border-r bg-white absolute rounded right-0 shadow mt-12 hidden">
<li className="flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center">
<div className="flex items-center">
<span className="text-sm ml-2">My Profile</span>
</div>
</li>
<li className="flex w-full justify-between text-gray-600 hover:text-indigo-700 cursor-pointer items-center mt-2">
<div className="flex items-center">
<span className="text-sm ml-2">Sign out</span>
</div>
</li>
</ul>
</div>
</nav>
{/* Navigation ends */}
{/* Remove class [ h-64 ] when adding a card block */}
<div className="container mx-auto py-10 h-64 md:w-4/5 w-11/12 px-6">
{/* Remove class [ border-dashed border-2 border-gray-300 ] to remove dotted border */}
<div className="w-full h-full rounded border-dashed border-2 border-gray-300">{/* Place your content here */}</div>
</div>
</div>
</div>
);
}
export default Sidebar