123movies-seo/resources/views/components/nav.blade.php

<header class="header">
    <div class="header__bottom">
        <div class="container-fluid p-0">
            <nav class="navbar navbar-expand-xl align-items-center p-0">
                <a class="site-logo site-title"  href="{{route('home')}}">
                    <svg style="width: 150px; height:37px">
                        <use href="#svg-logo"></use>
                    </svg>
                    {{-- <img src="{{asset('images/logo.svg')}}" width="150" height="37" alt="site-logo"> --}}

                    <span class="logo-icon"><i class="flaticon-fire"></i></span>
                </a>
                <button class="navbar-toggler ml-auto" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="menu-toggle"></span>
                </button>
                <div class="navbar-collapse collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav main-menu ms-xl-5 mx-auto">
                        <li><a href="{{route('home')}}">Home</a></li>
                        <li><a href="{{route('movies')}}">Movies</a></li>
                        <li><a href="{{route('shows')}}">Series</a></li>
                        <li class="menu_has_children">
                            <a href="javascript:void(0);">Genres</a>
                            <span><i>
                                <svg class="si">
                                    <use href="#si-caret-down"></use>
                                </svg>
                            </i></span>
                            <ul class="sub-menu">
                                @foreach(Helpers::getMovieGenreList() as $genre)
                                <li><a href="{{route('movies.genre', ['genre' => $genre->slug])}}">{{$genre->name}}</a></li>
                                @endforeach
                            </ul>
                        </li>

                    </ul>
                    <div class="nav-right d-flex ml-auto flex-wrap gap-4">
                        <button class="nav-right__search-btn">{{-- <i class="fas fa-search"></i> --}}
                            <i>
                                <svg class="si">
                                    <use href="#si-search"></use>
                                </svg>
                            </i>
                        </button>
                        <a href="javascript:void(0);">
                            <i>
                                <svg class="si">
                                    <use href="#si-sign-in-alt"></use>
                                </svg>
                            </i>
                            Login</a>
                        <a href="javascript:void(0);"><i>
                            <svg class="si">
                                <use href="#si-user-plus"></use>
                            </svg>
                        </i> Registration</a>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>
<div class="header-search-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <form class="header-search-form" action="{{ route('search') }}">
                    <input name="search" type="text" placeholder="Search here...." id="search" autocomplete="off">
                    <button type="submit">
                        {{-- <i class="fas fa-search"></i> --}}
                        <svg class="si">
                            <use href="#si-search"></use>
                        </svg>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>