@extends('layouts.app')
@section('title')
    Navbar
@endsection
@section('content')
    <x-page-title title="Components" subtitle="Navbars" />

    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg navbar-dark bg-grd-info rounded">
                <div class="container-fluid"><a class="navbar-brand" href="javascript:;">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"
                        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent1">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
                            <li class="nav-item"><a class="nav-link active d-flex align-items-center gap-1"
                                    aria-current="page" href="#"><span
                                        class="material-icons-outlined fs-5">home</span>Home</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">help_outline</span>About</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">favorite_border</span>Favorite</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span class="material-icons-outlined fs-5">event</span>Events</a>
                            </li>
                            <li class="nav-item dropdown"><a
                                    class="nav-link dropdown-toggle d-flex align-items-center gap-1" href="javascript:;"
                                    data-bs-toggle="dropdown">
                                    <span class="material-icons-outlined fs-5">feedback</span>Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="d-flex nav-search">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="Search">
                                <button class="btn btn-primary d-flex" type="submit"><span
                                        class="material-icons-outlined">search</span></button>
                            </div>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg navbar-dark bg-grd-success rounded">
                <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent2" aria-controls="navbarSupportedContent2"
                        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent2">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
                            <li class="nav-item"><a class="nav-link active d-flex align-items-center gap-1"
                                    aria-current="page" href="#"><span
                                        class="material-icons-outlined fs-5">home</span>Home</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">help_outline</span>About</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">favorite_border</span>Favorite</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span class="material-icons-outlined fs-5">event</span>Events</a>
                            </li>
                            <li class="nav-item dropdown"><a
                                    class="nav-link dropdown-toggle d-flex align-items-center gap-1" href="javascript:;"
                                    data-bs-toggle="dropdown">
                                    <span class="material-icons-outlined fs-5">feedback</span>Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-light px-4" type="submit"><i class='bx bx-cart'></i> Buy Now</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg navbar-dark bg-grd-danger rounded">
                <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3"
                        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent3">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
                            <li class="nav-item"><a class="nav-link active d-flex align-items-center gap-1"
                                    aria-current="page" href="#"><span
                                        class="material-icons-outlined fs-5">home</span>Home</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">help_outline</span>About</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">favorite_border</span>Favorite</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span class="material-icons-outlined fs-5">event</span>Events</a>
                            </li>
                            <li class="nav-item dropdown"><a
                                    class="nav-link dropdown-toggle d-flex align-items-center gap-1" href="javascript:;"
                                    data-bs-toggle="dropdown">
                                    <span class="material-icons-outlined fs-5">feedback</span>Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-dark me-3 radius-30 px-4" type="submit"><i class='bx bx-lock'></i>
                                Login</button>
                            <button class="btn btn-light radius-30 px-4" type="submit"><i class='bi bi-house-door'></i>
                                Register</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg navbar-dark bg-grd-primary rounded">
                <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent4" aria-controls="navbarSupportedContent4"
                        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent4">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
                            <li class="nav-item"><a class="nav-link active d-flex align-items-center gap-1"
                                    aria-current="page" href="#"><span
                                        class="material-icons-outlined fs-5">home</span>Home</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">help_outline</span>About</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">favorite_border</span>Favorite</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span class="material-icons-outlined fs-5">event</span>Events</a>
                            </li>
                            <li class="nav-item dropdown"><a
                                    class="nav-link dropdown-toggle d-flex align-items-center gap-1" href="javascript:;"
                                    data-bs-toggle="dropdown">
                                    <span class="material-icons-outlined fs-5">feedback</span>Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                            <li class="nav-item"> <a class="nav-link" href="javascript:;"><i
                                        class='bi bi-facebook fs-4 text-white'></i></a>
                            </li>
                            <li class="nav-item"> <a class="nav-link" href="javascript:;"><i
                                        class='bi bi-twitter fs-4 text-white'></i></a>
                            </li>
                            <li class="nav-item"> <a class="nav-link" href="javascript:;"><i
                                        class='bi bi-linkedin fs-4 text-white'></i></a>
                            </li>
                            <li class="nav-item"> <a class="nav-link" href="javascript:;"><i
                                        class='bi bi-instagram fs-4 text-white'></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <nav class="navbar navbar-expand-lg navbar-dark bg-orange rounded">
                <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent5" aria-controls="navbarSupportedContent5"
                        aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent5">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
                            <li class="nav-item"><a class="nav-link active d-flex align-items-center gap-1"
                                    aria-current="page" href="#"><span
                                        class="material-icons-outlined fs-5">home</span>Home</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">help_outline</span>About</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span
                                        class="material-icons-outlined fs-5">favorite_border</span>Favorite</a>
                            </li>
                            <li class="nav-item"><a class="nav-link d-flex align-items-center gap-1"
                                    href="javascript:;"><span class="material-icons-outlined fs-5">event</span>Events</a>
                            </li>
                            <li class="nav-item dropdown"><a
                                    class="nav-link dropdown-toggle d-flex align-items-center gap-1" href="javascript:;"
                                    data-bs-toggle="dropdown">
                                    <span class="material-icons-outlined fs-5">feedback</span>Services</a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:;">Action</a>
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Another action</a>
                                    </li>
                                    <li>
                                        <hr class="dropdown-divider">
                                    </li>
                                    <li><a class="dropdown-item" href="javascript:;">Something else here</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <form class="d-flex">
                            <button class="btn btn-dark me-3 radius-30 px-4" type="submit"><i class='bx bx-lock'></i>
                                Login</button>
                            <button class="btn btn-light radius-30 px-4" type="submit"><i
                                    class='bx bx-calendar-event'></i> Start For Free</button>
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>
@endsection
@push('script')
    <!--plugins-->
    <script src="{{ URL::asset('build/plugins/perfect-scrollbar/js/perfect-scrollbar.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/metismenu/metisMenu.min.js') }}"></script>
    <script src="{{ URL::asset('build/plugins/simplebar/js/simplebar.min.js') }}"></script>
    <script src="{{ URL::asset('build/js/main.js') }}"></script>
@endpush