fix(Unit Plan): Zoom to and highlight previous step

src/assets/wise5/themes/default/navigation/navigation.component.html

@@ -8,7 +8,7 @@
         [nodeId]="id"
         type="card"
         class="w-full sm:w-{{ navItemIsExpanded[id] ? 'full' : '1/2' }}"
-      ></nav-item>
+      />
     }
   </div>
 </div>

src/assets/wise5/vle/nav-item/nav-item.component.html

@@ -1,4 +1,5 @@
 @if (nodeStatus.isVisible) {
+  <div id="nav-item-{{ nodeId }}"></div>
   @switch (type) {
     @case ('card') {
       <mat-card class="nav-item" [ngClass]="{ expanded: expanded }">
@@ -52,9 +53,7 @@
               i18n-matTooltip
               matTooltip="{{ nodeStatus.progress.completionPct }}% completed"
               matTooltipPosition="above"
-            ></mat-progress-bar>
-          }
-          @if (isGroup) {
+            />
             <span class="mat-caption secondary-text" i18n>
               {{ nodeStatus.progress.completedItems }}/{{ nodeStatus.progress.totalItems }} items
             </span>
@@ -85,7 +84,7 @@
         tabindex="0"
         i18n-title
         title="Go to {{ nodeTitle }}"
-        [ngClass]="{ group: isGroup }"
+        [ngClass]="{ group: isGroup, 'selected-bg-bg': isPrevStep }"
       >
         <span class="flex flex-row items-center gap-2">
           <node-icon matListAvatar [nodeId]="nodeId" [icon]="nodeStatus.icon" size="24" />

src/assets/wise5/vle/nav-item/nav-item.component.ts

@@ -57,6 +57,10 @@ export class NavItemComponent {
     this.isCurrentNode = this.currentNode.id === this.nodeId;
     if (this.isGroup && this.isCurrentNode) {
       this.setExpanded();
+      this.zoomToElement();
+    }
+    if (this.dataService.previousStep) {
+      this.isPrevStep = this.nodeId === this.dataService.previousStep.id;
     }
     this.subscriptions.add(this.projectService.projectParsed$.subscribe(() => this.setNodeTitle()));
     this.subscriptions.add(
@@ -127,7 +131,9 @@ export class NavItemComponent {
   }
 
   private zoomToElement(): void {
-    // TODO: implement me
+    setTimeout(() => {
+      document.getElementById(`nav-item-${this.nodeId}`).scrollIntoView({ behavior: 'smooth' });
+    }, 500);
   }
 
   protected itemClicked(): void {

src/messages.xlf

@@ -13800,7 +13800,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">53,54</context>
+          <context context-type="linenumber">54,55</context>
         </context-group>
       </trans-unit>
       <trans-unit id="247091205793546074" datatype="html">
@@ -14981,7 +14981,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">87,88</context>
+          <context context-type="linenumber">86,87</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6853281750146333865" datatype="html">
@@ -22517,14 +22517,14 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Expand or collapse lesson content</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">13,17</context>
+          <context context-type="linenumber">14,18</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3419551734015470626" datatype="html">
         <source> <x id="INTERPOLATION" equiv-text="{{ nodeStatus.progress.completedItems }}"/>/<x id="INTERPOLATION_1" equiv-text="{{ nodeStatus.progress.totalItems }}"/> items </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">59,60</context>
+          <context context-type="linenumber">58,59</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/student-account-menu/student-account-menu.component.html</context>
@@ -22535,14 +22535,14 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Lesson is locked</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">70,73</context>
+          <context context-type="linenumber">69,72</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3869393913986306957" datatype="html">
         <source>Item is locked</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/nav-item/nav-item.component.html</context>
-          <context context-type="linenumber">100,103</context>
+          <context context-type="linenumber">99,102</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1692980694443272897" datatype="html">