@if(Auth::check())
<ul class="  float-right p-0 col-12 p scrollable-menu dropdown-menu-right" style="border-radius: 30% 0%;
     margin:auto; background: white; height:60%;max-height: 400px;min-height:300px; box-shadow: 0px 0px 5px indianred;
      overflow-x: hidden; overflow-y: scroll;">
        <li  class="dropdown-item border rounded"  style=" text-align: center; background: orange;
        position: -webkit-sticky; position: sticky;top: 0;">Notifications (5)</li>
        <li  class="dropdown-item border rounded" >
            <a class ="mr-1" style="color:green;" href="#">Mark read</a>
            <span>|<span>
            <a class ="ml-1" style="color:red;" href="#">View All</a>
        </li>
        <li style="background-color:#e9ebee;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification1</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

            <li style="background-color:#e9ebee;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification2</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>
            <li style="background-color:#e9ebee;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href='.$notification->data["link"].'>
                    <p class="" style="font-size:1p4x;">notification3</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>
            <li style="background-color:#e9ebee;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
            <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification4</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>
            <li style="background-color:#e9ebee;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
            <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification5</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

            <li style="background-color:white;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification6</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>


            <li style="background-color:white;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification7</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

            <li style="background-color:white;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification8</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

            <li style="background-color:white;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification9</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

            <li style="background-color:white;disply:block; margin:auto;padding-top:10px;line-height:5px;"
            class="dropdown-item border rounded d-flex justify-content-start  mt-1" >
                <a style="color:black;" href=''>
                    <p class="" style="font-size:1p4x;">notification10</p>
                    <p class="" style="font-size:10px;">description</p>
                </a>
            </li>

</ul>
@endif