Merge with dev

Author: shewa12

assets/core/scss/mixins/_badges.scss

@@ -10,6 +10,7 @@
   align-items: center;
   gap: $tutor-spacing-3;
   background-color: $tutor-actions-gray-secondary;
+  width: fit-content;
 
   img,
   svg {

assets/src/scss/frontend/dashboard/layout/_account.scss

@@ -2,12 +2,6 @@
 @use '@Core/scss/tokens' as *;
 
 .tutor-account-page-wrapper {
-  .tutor-account-header {
-    @include tutor-breakpoint-down(sm) {
-      display: none;
-    }
-  }
-
   .tutor-account-header {
     background-color: $tutor-surface-base;
     border-bottom: 1px solid $tutor-border-idle;

assets/src/scss/frontend/dashboard/layout/_header.scss

@@ -68,6 +68,10 @@
     @include tutor-flex(row, center);
   }
 
+  .tutor-avatar {
+    margin: 0 auto;
+  }
+
   &-user-avatar {
     @include tutor-button-reset();
     width: 32px;
@@ -90,16 +94,21 @@
   }
 
   &-user-popover {
-    width: 220px;
+    width: 230px;
     padding: $tutor-spacing-4;
+    z-index: calc($tutor-z-highest + 1) !important;
 
     &-profile {
       @include tutor-flex(column, center, flex-start);
       gap: $tutor-spacing-5;
       background-color: $tutor-surface-brand-tertiary;
       padding: $tutor-spacing-6 $tutor-spacing-5;
       border-radius: $tutor-radius-md;
-      margin-bottom: $tutor-spacing-4;
+      margin-bottom: $tutor-spacing-5;
+
+      .tutor-edit-profile-link {
+        color: $tutor-icon-idle;
+      }
     }
 
     &-menu {
@@ -146,4 +155,100 @@
       }
     }
   }
-}
+
+  @include tutor-breakpoint-down(sm) {
+    height: 60px;
+
+    &-user-avatar {
+      width: 22px;
+      height: 22px;
+    }
+
+    &-user-popover {
+      top: 0px !important;
+      left: 0px !important;
+      width: 100% !important;
+      max-width: 100% !important;
+      height: 100% !important;
+      max-height: 100% !important;
+      overflow-y: auto;
+      padding: $tutor-spacing-none;
+      @include tutor-flex(column);
+
+      &-profile {
+        padding: $tutor-spacing-none;
+        gap: $tutor-spacing-none;
+        margin-bottom: $tutor-spacing-6;
+
+        .tutor-profile-header-top {
+          width: 100%;
+          @include tutor-flex(row, center, space-between)
+        }
+
+        .tutor-user-profile-info {
+          width: 100%;
+          flex-direction: row;
+          gap: 10px;
+          background: $tutor-surface-l1;
+        }
+
+        .tutor-user-profile-meta {
+          align-items: flex-start;
+        }
+
+        .tutor-edit-profile-link {
+          align-self: center;
+          margin-inline-start: auto;
+        }
+
+        .tutor-avatar {
+          margin: unset;
+        }
+      }
+
+      &-menu-wrapper {
+        @include tutor-flex(column, stretch, space-between);
+        background: $tutor-surface-base;
+        height: 100vh;
+      }
+
+      &-menu {
+        gap: 10px;
+        padding: $tutor-spacing-6 $tutor-spacing-7;
+
+        li {
+          &:last-of-type {
+            display: none;
+            border-top: 1px solid $tutor-border-idle;
+            padding-top: $tutor-spacing-2;
+          }
+
+          a {
+            padding: $tutor-spacing-6 $tutor-spacing-5;
+            border: 1px solid $tutor-border-idle;
+
+            &.active {
+              background-color: unset;
+              color: unset;
+            }
+
+            &.focus {
+              background-color: $tutor-tab-sidebar-l2-active;
+              color: $tutor-text-brand;
+            }
+          }
+        }
+      }
+
+      .tutor-mobile-logout-wrapper {
+        margin-top: auto;
+
+        a {
+          width: 100%;
+          padding: $tutor-spacing-6 $tutor-spacing-5;
+          border: 1px solid $tutor-border-idle;
+        }
+      }
+    }
+  }
+}

assets/src/scss/frontend/dashboard/layout/_nav-mobile.scss

@@ -36,11 +36,18 @@
         @include tutor-flex(column, center);
         gap: $tutor-spacing-2;
 
-        &.active, 
+        &.active,
         &.active span {
           color: $tutor-text-brand;
         }
       }
+
+      img {
+        width: 16px;
+        height: 16px;
+        object-fit: cover;
+        border-radius: $tutor-radius-full;
+      }
     }
   }
 
@@ -67,7 +74,7 @@
           outline: none;
           box-shadow: none;
 
-          &.active, 
+          &.active,
           &.active span {
             color: $tutor-text-brand;
           }

templates/dashboard/account/settings/header.php

@@ -17,7 +17,7 @@
 use Tutor\Components\Constants\Size;
 use Tutor\Components\Constants\Variant;
 
-$back_url = UrlHelper::back();
+$back_url = UrlHelper::back( tutor_utils()->tutor_dashboard_url() );
 
 ?>
 <div class="tutor-profile-header">