theme-dy/resources/views/themedy/inc/nav.blade.php

@php
    $logo = setting('site_logo', '');
    $brand = setting('site_brand', '');
    $title = isset($title) ? $title : setting('site_homepage_title', '');
@endphp
<style>
    #result {
        margin-top: 20px;
        background-color: #333333;
        list-style-type: none;
        width: 500px;
        position: absolute;
        top: 32px;
        z-index: 100;
        padding-left: 0;
    }

    .column {
        float: left;
        padding: 5px;
    }

    .left {
        text-align: center;
        width: 20%;
    }

    .right {
        width: 80%;
    }

    .rowsearch:after {
        content: "";
        display: table;
        clear: both;
    }

    #result .rowsearch {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #result .rowsearch p {
        margin-bottom: 1px;
    }

    .rowsearch:hover {
        background-color: #2d2d2d;
    }
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #341d1d;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    .dropdown-menu li:hover {
        background: #0a5c6f;
    }

    .dropdown-menu li {
        padding-left: 10px;
    }
</style>
<header id="header" class="wrapper">

    <div class="header-content">
        <div class="content">
            <div class="brand">
                <a href="/" class="logo" title="{{ $title }}">
                    @if ($logo)
                        {!! $logo !!}
                    @else
                        {!! $brand !!}
                    @endif
                </a>

            </div>
            <div class="nav-search">
                <div class="nav-search">
                    <form action="/" class="search-dh">
                        <div class="search-box"><input class="search-input ac_wd txtKeywords" type="text" name="search" autocomplete="off"
                                                       value="{{ request('search') }}" id="search"
                                                       placeholder="Tìm kiếm...">

                            <button class="search-btn search-go" type="submit"><i class="icon-search"></i></button>
                            <button class="cancel-btn" type="button">Hủy</button>
                        </div>
                        <div class="" id="result"></div>
                    </form>
                </div>

            </div>
            <div class="nav">
                <ul class="nav-menu-items">
                    @foreach ($menu as $item)
                        @if (count($item['children']))
                            <li class="nav-menu-item dropdown">
                                <a href="{{$item['link']}}" title="{{$item['name']}} ">
                                    <span class="nav-menu-item-name">{{$item['name']}} </span>
                                </a>
                                <ul class="dropdown-menu dropdown-content">
                                    @foreach ($item['children'] as $children)
                                    <li>
                                        <a class="dropdown-item" href="{{$children['link']}}"
                                           title="{{$children['name']}}">{{$children['name']}}</a>
                                    </li>
                                    @endforeach
                                </ul>
                            </li>
                        @else
                            <li class="nav-menu-item">
                                <a href="{{$item['link']}}" title="{{$item['name']}}">
                                    <span class="nav-menu-item-name">{{$item['name']}}</span>
                                </a>
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
            <div class="header-module">
                <ul class="nav-menu-items">
                    <li class="nav-menu-item nav-menu-search"><i class="icon-search"></i></li>
                </ul>
            </div>

        </div>
    </div>
</header>
<script type="text/javascript">
    $('#search').on('keyup',function(){
        $("#result").html('');
        $value = $(this).val();
        if(!$value){
            $("#result").html('');
            return;
        }
        $.ajax({
            type: 'get',
            url: '{{ URL::to('search') }}',
            data: {
                'search': $value
            },
            success:function(data){
                $("#result").html('')
                $.each(data, function(key, value){
                    $('#result').append('<a href="'+value.slug+'"><div class="rowsearch"> <div class="column left"> <img src="'+value.image+'" width="50" /> </div> <div class="column right"><p> '+value.title+' ' + '</p><p> '+value.original_title+'| '+value.year+' </p></div> </div></a>' )
                });
            }
        });
    })
    document.body.addEventListener("click", function (event) {
        $("#result").html('');
    });
    $.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
<script>
    $(".nav-menu-search").click(function () {
        $(".nav-search").addClass("block")
    });
    $(document).scroll(function () {
        var H = $(document).scrollTop();
        if (H > 20) {
            $(".header-content").addClass("header-bg")
        } else {
            $(".header-content").removeClass("header-bg")
        }
        if (H > 110) {
            $(".header-content").addClass("header-bg");
// 		$(".search-dh").append($(".search-box"));
            $(".nav-menu-search").click(function () {
                $(".nav-search").addClass("block")
            })
        } else {
            $(".header-content").removeClass("header-bg");
// 		$(".search-main").append($(".search-box"))
        }
    });
</script>