Merge pull request #2720 from themeum/fix/nav-mobile

💅 Update kids mode nav style

Author: b-l-i-n-d

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

@@ -39,13 +39,18 @@
         &.active,
         &.active span {
           color: $tutor-text-brand;
+          font-weight: $tutor-font-weight-medium;
         }
 
         &:hover,
         &:focus {
           background-color: transparent;
           color: $tutor-text-brand;
         }
+
+        .tutor-dashboard-nav-mobile-icon {
+          @include tutor-flex-center;
+        }
       }
     }
   }

assets/src/scss/frontend/kids/_dashboard.scss

@@ -3,6 +3,27 @@
 @use './mixins' as *;
 
 [data-tutor-ui='kids'] {
+  .tutor-dashboard-nav-mobile-list {
+    .tutor-dashboard-nav-mobile-icon {
+      padding: $tutor-spacing-2;
+    }
+
+    .tutor-dashboard-nav-mobile-text {
+      color: $tutor-text-primary;
+      font-weight: $tutor-font-weight-medium;
+    }
+
+    .active {
+      .tutor-dashboard-nav-mobile-icon {
+        @include tutor-kids-shadow(false, $tutor-border-brand, $tutor-radius-full, sm);
+        background-color: $tutor-surface-brand-tertiary;
+      }
+      .tutor-dashboard-nav-mobile-text {
+        font-weight: $tutor-font-weight-semibold;
+      }
+    }
+  }
+
   .tutor-card {
     @include tutor-kids-shadow(false, $tutor-border-idle, $tutor-radius-5xl, sm);
   }

templates/dashboard/components/sidebar-nav-mobile.php

@@ -53,27 +53,31 @@
 			?>
 			<li>
 				<a class="<?php echo esc_attr( $active_class ); ?>" href="<?php echo esc_url( $menu_link ?? '#' ); ?>">
-					<?php
-					SvgIcon::make()
-						->name( ( $is_active_menu && ! tutor_utils()->is_kids_mode() ) ? $active_icon_name : $menu_icon_name )
-						->size( Size::SIZE_20 )
-						->render();
-					?>
-					<span class="tutor-tiny"><?php echo esc_html( $menu_title ); ?></span>
+					<span class="tutor-dashboard-nav-mobile-icon">
+						<?php
+						SvgIcon::make()
+							->name( ( $is_active_menu && ! tutor_utils()->is_kids_mode() ) ? $active_icon_name : $menu_icon_name )
+							->size( Size::SIZE_20 )
+							->render();
+						?>
+					</span>
+					<span class="tutor-tiny tutor-dashboard-nav-mobile-text"><?php echo esc_html( $menu_title ); ?></span>
 				</a>
 			</li>
 			<?php
 		}
 		?>
 		<li>
 			<a href="<?php echo esc_url( Dashboard::get_account_page_url( 'profile' ) ); ?>">
-				<?php
-				Avatar::make()
-					->user( get_current_user_id() )
-					->size( Size::SIZE_20 )
-					->render();
-				?>
-				<span class="tutor-tiny"><?php esc_html_e( 'Profile', 'tutor' ); ?></span>
+				<div class="tutor-dashboard-nav-mobile-icon">
+					<?php
+					Avatar::make()
+						->user( get_current_user_id() )
+						->size( Size::SIZE_20 )
+						->render();
+					?>
+				</div>
+				<span class="tutor-tiny tutor-dashboard-nav-mobile-text"><?php esc_html_e( 'Profile', 'tutor' ); ?></span>
 			</a>
 		</li>
 		<?php
@@ -87,8 +91,10 @@
 					:aria-expanded="open ? 'true' : 'false'"
 					aria-haspopup="true"
 				>
-					<?php SvgIcon::make()->name( Icon::THREE_DOTS_VERTICAL )->size( 16 )->render(); ?>
-					<span class="tutor-tiny"><?php esc_html_e( 'More', 'tutor' ); ?></span>
+					<span class="tutor-dashboard-nav-mobile-icon">
+						<?php SvgIcon::make()->name( Icon::ELLIPSES )->size( 20 )->render(); ?>
+					</span>
+					<span class="tutor-tiny tutor-dashboard-nav-mobile-text"><?php esc_html_e( 'More', 'tutor' ); ?></span>
 				</button>
 				<!-- Popover panel -->
 				<div