SideNav is Overlapping with the Dashboard Children Component
I’m experiencing an issue where my SideNav is overlapping with the Dashboard children component. Below are the relevant pieces of code:
Layout Component-

"use client";
import React from 'react';
import SideNav from './_components/SideNav';

const DashboardLayout = ({ children }) => {
  return (
    <div className="flex">
      <div className="w-64 h-full fixed">
        <SideNav />
      </div>
      <div className="flex-1 ml-64">
        {children}
      </div>
    </div>
  );
};

export default DashboardLayout;

SideNav Component

import { BarChart2, CirclePlus, LibraryBig, MessageCircle } from 'lucide-react'
import React from 'react'
import { Button } from "@/components/ui/button"
import ModalWithProgressBar from '@/app/_components/ModalWithProgressBar'

const SideNav = () => {
    
    const menuList = [
        {
            id: 1,
            name: 'My Forms',
            icons: LibraryBig,
            path: '/',
        },
        {
            id: 2,
            name: 'Responses',
            icons: MessageCircle,
            path: '/',
        },
        {
            id: 3,
            name: 'Analytics',
            icons: BarChart2,
            path: '/',
        },
        {
            id: 4,
            name: 'Upgrade',
            icons: CirclePlus,
            path: '/',
        }
    ]

    return (
        <div className='h-screen shadow-lg'>
            <div className='p-4'>
                {menuList.map((menu, index) => (
                    <h2 key={index} className='flex items-center p-4 gap-3 mb-3 hover:bg-slate-500 hover:rounded-sm hover:text:gray hover:cursor-pointer'>
                        <menu.icons />
                        {menu.name}
                    </h2>
                ))}
            </div>
            <div className='fixed bottom-10 gap-5 flex flex-col items-center ml-4'>
                <div className='flex flex-row-reverse items-center gap-2'>
                    <Button className='rounded-md'> <CirclePlus className='mr-2' />  Create a New Form</Button>
                </div>
                <ModalWithProgressBar/>
            </div>
        </div>
    )
}

export default SideNav;

Dashboard page-

"use client";
import { Button } from '@/components/ui/button';
import React from 'react';
const handleClick = () => {
  alert('Button Clicked');
};
const Dashboard = () => {
  return (
    <div className='p-10'>
      <h2 className='font-bold text-3xl flex items-center justify-between'>
        Dashboard 
      </h2>
      <Button className='cursor-pointer' onClick={handleClick}>Create a New Form</Button>
    </div>
  );
};

export default Dashboard;

Issue-
The SideNav component is overlapping with the children component, preventing the buttons in both the SideNav and Dashboard from being clickable.

Expected Behavior
The SideNav should remain fixed on the left side without overlapping the main content (children).

How can I fix the overlapping issue so that both the sidebar and the main content are correctly positioned and interactive elements remain clickable?
It looks like-