Source: componenets/layouts/Sidebar.js

import React from 'react';
import Link from 'next/link'; 
/**
 * Component for the sidebar menu.
 * 
 * @module Sidebar
 * @returns {JSX.Element} The JSX element representing the Sidebar component.
 */
const Sidebar = () => {


  return (
    <div className="bg-gray-900 text-white p-4 flex flex-col justify-between">
      <div>
        <h2 className="text-lg font-semibold mb-4">Menu</h2>
        <ul>
          <li className="mb-2">
            {/**
            * Navigate to the posts page using the posts endpoint.
            * 
            * This link uses the posts endpoint to navigate to the page using next.js client-side rendering.
            * The page then serves mock data from a JSON server.
            */}
            <Link href="/posts" className="text-gray-300 hover:text-white">
              API Integration
            </Link>
          </li>
        </ul>
      </div>
      <div className="flex justify-center items-center">
        {/* Documentation Button */}
        <a
          href="/docs/global.html"
          className="bg-gray-700 text-white px-4 py-2 rounded-md mr-2 hover:bg-gray-600"
          target="_blank"
          rel="noopener noreferrer"
        >
          Documentation
        </a>
      </div>
      <div className="text-gray-400">&copy; 2024 Todo List App</div>
    </div>
  );
};

export default Sidebar;