Гамбургер Navbar отрезают внизу гамбургера ⇐ CSS

[Anonymous]

Я пытаюсь реализовать гамбургер-меню в компоненте React + Tailwind, но нижний слой гамбургер-меню обрезается наполовину, поэтому нижняя строка не заполнена полностью. Я не понимаю, почему. Прилагаю скриншот проблемы.
Я также прилагаю изображение ниже.

Код: Выделить всё

import React, { useState } from 'react';

const Navbar: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);

const toggleMenu = () => {
setIsOpen(!isOpen);
};

return (


[url=/]
[img]/pizza-logo.png[/img]
            alt="Paolo's Pizza Logo"
className="h-12 w-12 rounded-full border-2 border-white"
/>

Paolo's Pizza and Ristorante

[/url]




strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M4 6h16M4 12h16m-7 6h7"
>



[list]
[*]
[url=#home]
Home
[/url]

[*]
[url=#menu]
Menu
[/url]

[*]
[url=#reservations]
Reservations
[/url]

[*]
[url=#about]
About Us
[/url]

[*]
[url=#contact]
Contact
[/url]

[/list]


{isOpen &&  (

[list]
[*]
[url=#home]
Home
[/url]

[*]
[url=#menu]
Menu
[/url]

[*]
[url=#reservations]
Reservations
[/url]

[*]
[url=#about]
About Us
[/url]

[*]
[url=#contact]
Contact
[/url]

[/list]

)}

);
};

export default Navbar;

Я ожидал, что меню-гамбургер будет выглядеть как обычно, и попробовал настроить различные служебные классы Tailwind, но мне не удалось заставить его работать.
Вот изображение неотображаемой части навигационной панели с изображением гамбургера

Подробнее здесь: https://stackoverflow.com/questions/790 ... -hamburger