Kundesone/resources/views/components/sidebar.blade.php

<div class="sidebar-area">
    <aside class="bg-dark-green-color">
        <div class="image-box d-flex justify-content-between frame">
            <img src="{{ asset('images/logo-white.png') }}" alt="Site Logo">
            <div class="dev-toggle-sidebar dev-close"><img src="https://kundesone.no/images/icons/Frame.png" alt=""></div>
        </div>
        
        <style>
          .side-bar-links ul li  .bg-light-color .color-light{
                    color: #383f33 !important;
            }
            .sidebar_icon{
                font-size: 20px !important;
                    color: white !important;
            }
            .bg-light-color .sidebar_icon{
              color: #383F33 !important;
}
.frame .dev-toggle-sidebar img {
    width: 26px;
    height: 26px;
    vertical-align: top !important;
    border-radius: 50%;
}
        </style>
        
        <div class="side-bar-links">
            <ul>
                <li>
                    <a href="{{ route('index') }}"
                        class="side-bar-link bg-light-color d-flex align-items-center justify-content-between aw-a-inbox">
                        <div class="link-left-content align-items-center d-flex">
                        <i class="fa fa-envelope-o sidebar_icon" aria-hidden="true"></i>
                            <h6 class="color-light">Inbox</h6>
                        </div>
                        <div class="link-right-content">
                            <img src="{{ asset('images/icons/chevron-right-dark.png') }}" alt="chevron right">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{{ route('waiting') }}"
                        class="side-bar-link  d-flex align-items-center justify-content-between aw-a-waiting">
                        <div class="link-left-content align-items-center d-flex">
                        <i class="fa fa-clock-o sidebar_icon" aria-hidden="true"></i>
                            <h6 class="color-light">Waiting</h6>
                        </div>
                        <div class="link-right-content">
                            <img src="{{ asset('images/icons/chevron-right-light.png') }}" alt="chevron right">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="{{ route('all.tickets') }}"
                        class="side-bar-link  d-flex align-items-center justify-content-between aw-a-all">
                        <div class="link-left-content align-items-center d-flex">
                        <i class="fa fa-ticket sidebar_icon" aria-hidden="true"></i>
                            <h6 class="color-light">Chats</h6>
                        </div>
                        <div class="link-right-content">
                            <img src="{{ asset('images/icons/chevron-right-light.png') }}" alt="chevron right">
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#" class="side-bar-link  d-flex align-items-center justify-content-between aw-a-stats">
                        <div class="link-left-content align-items-center d-flex">
                        <i class="fa fa-bar-chart sidebar_icon" aria-hidden="true"></i>
                            <h6 class="color-light">Statistics</h6>
                        </div>
                        <div class="link-right-content">
                            <img src="{{ asset('images/icons/chevron-right-light.png') }}" alt="chevron right">
                        </div>
                    </a>
                </li>

                <li class="side-bar-link">
                    <div class="link-divider bg-light-color"></div>
                </li>


                <li class="channels-widgets-wrapper side-bar-link bg-light-color d-flex align-items-center justify-content-between">

                    <div class="link-left-content align-items-center d-flex">
                    <i class="fa fa-envelope-o sidebar_icon" aria-hidden="true"></i>
                        <h6 class="color-dark-green">Channels</h6>
                    </div>
                    <div class="link-right-content">
                        <i><img src="{{ asset('images/icons/chevron-right 7.png') }}" alt="chevron down"></i>
                    </div>
                    <div class="menu">
                        <div class="dropdown-items ">

                            <a href="{{ route('index') }}"
                                class="single-item d-flex justify-content-center align-items-center active">
                                <img src="{{ asset('images/icons/chat-round-dots-svgrepo-com (1) 1 (1).png') }}"
                                    alt="Chat Icon"><span class="dropdown-item-label color-light active">CHAT</span>
                            </a>
                            <a href="{{ route('inbox') }}"
                                class="single-item d-flex justify-content-center align-items-center"><img
                                    src="{{ asset('images/icons/message-square-dots-svgrepo-com 1.png') }}" alt="Chat Icon"><span
                                    class="dropdown-item-label color-light">INBOX</span></a>
                            <a href="#" style="width: 133px;"
                                class="single-item d-flex justify-content-center align-items-center"><img
                                    src="{{ asset('images/icons/help-square-svgrepo-com 1.png') }}" alt="Chat Icon"><span
                                    class="dropdown-item-label color-light">HELP CENTER</span>
                            </a>
                            <p style="width: 108px;"
                                class="single-item d-flex justify-content-center align-items-center"><img
                                    src="{{ asset('images/icons/help-square-svgrepo-com 1.png') }}" alt="Chat Icon"><span
                                    class="dropdown-item-label color-light">FORUM</span></p>
                        </div>
                    </div>

                </li>
                
            </ul>
        </div>

        <div class="profile-nav-row d-flex side-bar-link">

            <div class="profile-nav-box">
                @if(!is_null(Auth::user()->profile_image))
                <div class="img-box"><a href="{{route('profile')}}"><img style="height: 42px; width: 42px; border-radius: 50%" src="{{ url('' . Auth::user()->profile_image) }}" alt="User Image"></a></div>
                @else
                <div class="img-box"><img style="height: 42px; width: 42px; border-radius: 50%" src="{{ asset('dummy-image.jpg') }}" alt="User Image"></div>
                @endif
            </div>
            <div class="user-info-box d-flex  justify-content-between">
                <div class="info">
                    <a style="text-decoration: none; color: white;" href="{{route('profile')}}"><p class="color-light side-bar-user-name">{{Auth::user()->name}}</p></a>
                </div>
                <div class="icon align-self-center">
                    <img src="{{ asset('images/icons/chevron-down 3.png') }}" alt="Chevron Down Icon">
                </div>

            </div>

        </div>

    </aside>
</div>