Fixed bug on logout and refactored it into a separate partial component

resources/assets/js/common.js

@@ -26,7 +26,7 @@ if (import.meta.env.VITE_SENTRY_DSN_PUBLIC) {
 	});
 
 	const handleLogoutBtnClick = function () {
-		$("#log-out").click(function (e) {
+		$(document).on("click", "#log-out", function (e) {
 			e.preventDefault();
 			$("#logout-form").submit();
 		});

resources/assets/sass/common/navbar.scss

@@ -27,4 +27,10 @@
 .nav-link {
   align-content: center;
   height: 100%;
+}
+
+.user-menu {
+  .dropdown-toggle::after {
+    display: none;
+  }
 }

resources/views/loggedin-environment/partials/header-controls.blade.php

@@ -33,37 +33,7 @@ class="fa fa-chevron-left"></i></a>
                 <a class="nav-link"
                    href="{{ route('my-contributions') }}"> {{ __('my-history.my_contributions') }} </a>
             </li>
-            <li class="nav-item dropdown user user-menu">
-                <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true"
-                   aria-expanded="false">
-                    @if (Auth::user()->avatar)
-                        <img loading="lazy" src="{{ Auth::user()->avatar }}" class="user-image" alt="User Image">
-                    @endif
-                    <span class="hidden-xs">{{ Auth::user()->nickname }}</span>
-                    <i class="fas fa-caret-down"></i>
-                </a>
-                <div class="dropdown-menu dropdown-menu-right py-2" aria-labelledby="userMenu">
-                    <!-- User image -->
-                    <div class="dropdown-item user-header text-center">
-                        @if (Auth::user()->avatar)
-                            <img loading="lazy" src="{{ Auth::user()->avatar }}" class="img-circle" alt="User Image">
-                        @endif
-                        <p>
-                            {{ Auth::user()->name }} {{ Auth::user()->nickname }}
-                            <small>Member since {{ Auth::user()->created_at }}</small>
-                        </p>
-                    </div>
-                    <a class="dropdown-item text-center"
-                       href="{{ route('my-account') }}"> {{ __('menu.my_account') }} </a>
-                    <div class="dropdown-divider"></div>
-                    <a id="log-out" href="{{ route('logout') }}"
-                       class="dropdown-item text-center">{{ __('menu.sign_out') }}</a>
-                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                        @csrf
-                    </form>
-                </div>
-                @include('partials.language-selector')
-            </li>
+            @include('partials.user-actions-header-dropdown')
         </ul>
     </div>
 </nav>

resources/views/partials/login-menu-options.blade.php

@@ -2,38 +2,7 @@
     <li class="nav-item">
         <a class="nav-link" href="{{ route('my-dashboard') }}"> {{ __("menu.dashboard") }} </a>
     </li>
-
-    <li class="nav-item dropdown user user-menu">
-        <a class="nav-link" href="#" class="dropdown-toggle" data-toggle="dropdown">
-            @if (Auth::user()->avatar)
-                <img loading="lazy" src="{{ Auth::user()->avatar}}" class="user-image" alt="User Image">
-            @endif
-            <span class="hidden-xs">{{Auth::user()->nickname}}</span>
-            <i class="fas fa-caret-down"></i>
-        </a>
-        <ul class="dropdown-menu">
-            <!-- User image -->
-            <li class="user-header">
-                @if (Auth::user()->avatar)
-                    <img loading="lazy" src="{{Auth::user()->avatar}}" class="img-circle">
-                @endif
-                <p>
-                    {{ Auth::user()->name }} {{ Auth::user()->nickname }}
-                    <small>Member since {{ Auth::user()->created_at }}</small>
-                </p>
-            </li>
-
-            <li class="user-footer">
-                <div class="pull-right">
-                    <a id="log-out" href="{{ route('logout') }}"
-                       class="btn btn-default btn-flat">{{ __("menu.sign_out")}}</a>
-                    <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
-                        @csrf
-                    </form>
-                </div>
-            </li>
-        </ul>
-    </li>
+    @include('partials.user-actions-header-dropdown')
 @else
     <li class="nav-item">
         <a class="nav-link" href="{{ isset($redirectLoginURL) ? $redirectLoginURL : route("login") }}">{{ __("menu.login")}}</a>

resources/views/partials/user-actions-header-dropdown.blade.php

@@ -0,0 +1,21 @@
+<li class="nav-item dropdown user user-menu">
+    <a class="nav-link dropdown-toggle" href="#" id="userMenu" data-toggle="dropdown" aria-haspopup="true"
+       aria-expanded="false">
+        @if (Auth::user()->avatar)
+            <img loading="lazy" src="{{ Auth::user()->avatar }}" class="user-image" alt="User Image">
+        @endif
+        <span class="hidden-xs">{{ Auth::user()->nickname }}</span>
+        <i class="fas fa-caret-down"></i>
+    </a>
+    <div class="dropdown-menu dropdown-menu-right py-2" aria-labelledby="userMenu">
+        <a class="dropdown-item text-center"
+           href="{{ route('my-account') }}"> {{ __('menu.my_account') }} </a>
+        <div class="dropdown-divider"></div>
+        <a id="log-out" href="javascript:void(0);"
+           class="dropdown-item text-center">{{ __('menu.sign_out') }}</a>
+        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
+            @csrf
+        </form>
+    </div>
+    @include('partials.language-selector')
+</li>