How to refresh interface on navigation change

What exactly should update? Can you provide some screenshots with as-is and to-be?

I recommend using the function a!refreshVariable() within each of your sections. This is great for resetting the initial value of a variable when another variable changes, in your case the variable which changes would be local!activeNavSection. For example, lets say you have a variable for your workspace dropdown. You should set that variable to:

a!localVariables(
    local!activeNavSection: 1,
    local!selectedWorkspaceDropdown: a!refreshVariable(
        value: null,
        refreshOnVarChange: {local!activeNavSection}
    ),
    {}
)

a!localVariables(
  /* The selected navigation section */
  local!activeNavSection: 1,
  /* The navigation sections */
  local!navSections: {
    a!map(name: "Workspace", icon: "briefcase"),
    a!map(name: "Tasks",     icon: "tasks"),
    a!map(name: "Requests",  icon: "paper-plane"),
    a!map(name: "Calendar",  icon: "calendar"),
    a!map(name: "My Time",   icon: "clock-o"),
    a!map(name: "Expenses",  icon: "money")
  },
  /*Variable declaration for each nav section*/
  local!TasksDD,
  local!TasksTF,
  local!workspaceDD: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ),
  local!workspaceTF: a!refreshVariable(
    value: null,
    refreshOnVarChange: {local!TasksDD,local!TasksTF}
  ), 
  {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!forEach(
              items: local!navSections,
              expression: a!cardLayout(
                contents: a!sideBySideLayout(
                  items: {
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextIcon(
                          icon: fv!item.icon,
                          color: "SECONDARY",
                          size: "MEDIUM"
                        ),
                        align: "LEFT"
                      ),
                      width: "MINIMIZE"
                    ),
                    a!sideBySideItem(
                      item: a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: a!richTextItem(
                          text: fv!item.name,
                          color: "ACCENT",
                          size: "MEDIUM",
                          style: if(
                            fv!index = local!activeNavSection,
                            "STRONG",
                            "PLAIN"
                          )
                        )
                      )
                    )
                  },
                  alignVertical: "MIDDLE"
                ),
                link: a!dynamicLink(
                  value: fv!index,
                  saveInto: local!activeNavSection
                ),
                style: if(
                  fv!index = local!activeNavSection,
                  "ACCENT",
                  "NONE"
                ),
                showBorder: false,
                accessibilityText: if(
                  fv!index = local!activeNavSection,
                  fv!item.name & " " & "selected",
                  ""
                )
              )
            ),
            /* This card is used to set a minimum height on the column so that the *
               * divider takes up more screen space when there is minimal content.   *
               * Once content is added to the main column, this can be removed.      */
            a!cardLayout(
              height: "TALL",
              showWhen: not(a!isPageWidth("PHONE")),
              showBorder: false
            )
          },
          width: "NARROW"
        ),
        a!columnLayout(
          contents: {
            /* Conditionally display selected navigation section.       *
               * Sections are created individually here because they will *
               * have varying contents, so if you change the list in      *
               * local!navSections, you will need to make sure            *
               * the list of sections here is the correct length.         */
            choose(
              local!activeNavSection,
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!workspaceDD, 
                  textVal:local!workspaceTF
                )
              },
              {
                rule!Test_IF_SubRule(
                  dropdownVal: local!TasksDD, 
                  textVal:local!TasksTF
                )
              },
              /*rule!testPage1(),
              rule!testPage2(),*/
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              ),
              a!sectionLayout(
                label: index(
                  local!navSections.name,
                  local!activeNavSection,
                  ""
                ),
                contents: {}
              )
            )
          }
        )
      },
      spacing: "SPARSE",
      showDividers: true
    )
  }
)

Please check variable declaration from line 14 to 23 and line number 101 to 111 where I have called the sub rule. Below is the sub rule code

a!localVariables(
  local!arrayValue: { "x", "y", "z" },
  {
    a!dropdownField(
      label: "Select a value",
      choiceLabels: local!arrayValue,
      choiceValues: local!arrayValue,
      value: ri!dropdownVal,
      saveInto: ri!dropdownVal,
      placeholder: "Please select"
    ),
    a!textField(
      label: "",
      value: ri!textVal,
      saveInto: ri!textVal
    )
  }
)

I have given example for workspace navigation, try it out. Hope this help.