Блог

Я совсем новичок в tailwind, и мне действительно нравится, как это работает. К сожалению, я застрял на проблеме, которую мне не удалось решить.

Технический стек, который я использую, это :

• laravel 7
• tailwind 1.8.13
• ванильный js

Вот мой html / (tailwin) css

 <header class="container mx-auto sticky top-0 z-20 bg-gray-900 pt-2 pl-2 pr-4" style="opacity:0.95;">
    <nav id="nav" class="flex items-center justify-between flex-wrap sm:pt-6 sm:pb-6 md:pt-6 md:pb-6 lg:pt-10 lg:pb-10">
        <div class=" flex-shrink-0 text-white mr-8">
            <a href="#">--------------</a>
        </div>
        <div class="block md:hidden">
            <button id="mobile-nav-trigger"
                class="flex items-center px-3 py-2 border rounded text-white border-black-400 hover:text-white hover:border-white">
                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <title>Menu</title>
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
                </svg>
            </button>
        </div>
        <div id="mobile-nav" class="hidden text-center text-white w-full flex-grow md:text-left md:pt-1 md:flex md:items-center md:w-auto">
            <div class="text-sm md:flex-grow">
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Pricing
                </a>
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Blog
                </a>
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    About
                </a>
            </div>
            <!--@guest-->
            <div class="text-sm">
                <a href="#"
                    class="block mt-4 md:inline-block md:mt-0 text-sm text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 mr-0 md:mr-4">
                    Log In
                </a>
                <a href="#"
                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-900 hover:bg-white mt-4 md:mt-0">
                    Sign Up
                </a>
            </div>
            <!--@else-->
            <div class="text-sm">
                <a href="#"
                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-gray-900 hover:bg-white mt-4 md:mt-0">
                    Button
                </a>
                <a href="#" 
                    class="block mt-4 md:inline-block md:mt-0 text-sm font-semibold text-white md:border-b-2 md:border-transparent md:hover:border-white md:hover:border-b-2 md:mr-4"
                    onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                    Logout
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                    {{ csrf_field() }}
                </form>
            </div>
            <!--@endguest-->
        </div>
    </nav>
</header>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        document.getElementById("mobile-nav-trigger").addEventListener("click", function(event){
            var menuLinks = document.getElementById('mobile-nav');
            if (menuLinks.style.display == "" || menuLinks.style.display == "none") {
                menuLinks.style.display = "block";
            } else {
                menuLinks.style.display = "none";
            }
        });
    });
</script>
  

Это работает хорошо, пока я не добавлю директивы laravel @blade, чтобы скрыть правую часть меню. Я попытался с

• @гость… @else … @endguest
• @auth … @else … @endauth
• @if …

Все, что я пытаюсь разделить меню, вызывает сбои в меню. Некоторое время меню развертывается сбоку, иногда оно вообще не развертывается, и я не понимаю почему. Он должен быть развернут ниже. Если вы можете помочь… Я был бы рад прочитать это.

вот jsfiddle (https://jsfiddle.net/ftyteca/q9fp4nvg/6 /)

Я думаю, что это проблема с вашим JavaScript. Сначала все работает нормально. Но это работает не так, как должно, после того, как я нажму mobile-nav-trigger кнопку.

можете ли вы попробовать это

 let hamburger = document.getElementById('mobile-nav-trigger');
let menuLinks = document.getElementById('mobile-nav');

hamburger.addEventListener('click', function () {
  menuLinks.classList.toggle('hidden');
});