LF-4807 - Update main navigation styling

[Duncan-Brain]

Description

This PR adjusts the side menu styling according to figma.

• adjusts some css nesting for sharing color consts and organization. Basic CSS structure is now:

...
.listItem {
  // list default styles
  
   // listitem child items
  .listItemText {
    // listitem child default styles
    }
    // desktop styles 
    @include sm-breakpoint {
      // desktop default styles
      }
      &:hover {
        // desktop hover styles
      }
      &.active {
        // desktop active styles
        }
      }
    // mobile styles
    @include xs-breakpoint {
       // mobile default styles
  
      &:hover {
        // mobile hover styles (long click)
      }

      &.active {
        // mobile active styles
        }
      }
    }
  }

Notes:

• Adds the color blue to the admin actions menu
• Swaps the hover and active color for the main sidebar navigation it seems to have been originally done wrong

Jira link: @kathyavini was there a PR for this? I couldn't find it. Sorry I found it: https://lite-farm.atlassian.net/browse/LF-4807

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

• Passes test case
• UI components visually reviewed on desktop view
• UI components visually reviewed on mobile view
• Other (please explain):
  • went back and forth between beta and this branch to compare
  • long click on mobile to elicit the "mobile hover"

Checklist:

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• The precommit and linting ran successfully
• I have added or updated language tags for text that's part of the UI
• I have ordered translation keys alphabetically (optional: run pnpm i18n to help with this)
• I have added the GNU General Public License to all new files

[Duncan-Brain]

inactiveListItem styles now applied to base style.

[Duncan-Brain]

Rename css styles -- "container" seemed to generic to understand while working on it. This component function is called sideMenuContent so I labeled it as such for understanding while working on PR.

[Duncan-Brain]

Swapped the placement of the returns -- Rendering the exception is now done in the if statement instead of being the default.

[Duncan-Brain]

Same - Swapped the placement of the returns -- Rendering the exception is now done in the if statement instead of being the default.

[Duncan-Brain]

CSS classname rename -- sideMenu was too generic to follow while updating -- this is the drawer version of the side menu only.

[Duncan-Brain]

Nested under list now for specificity and shared color constants.

[Duncan-Brain]

Nested under listItem now for specificity and shared color constants.

[Duncan-Brain]

Nested under listItem now for specificity and shared color constants.

[kathyavini]

Thanks for catching the reversed hover-active on the original implementation of menu!

Did you connect with Loïc by chance on the lack of blue on the mobile view? I'm not sure if that's intentional or an oversight (looks like those screens for mobile are still in their original form) -- do you know? The other thing I'm not sure if it is an original thing or an addition at this stage is the sub-menu styling on Figma here. It looks like it needs to have a little vertical bar on the left end? We might want to double-check that with Loïc as well. With the new CSS grouping (🙏) I think adding a specific style there should be pretty easy though!

And not regarding the code at all, but I do want to check that we really want the active state blue to be SO blue -- it's so striking it makes it look like the primary colour of app (stronger than any green on page) and I kind of want to give that a double-check in dev-design 😅

Edit: I don't think any of that has to block merge though, right @Duncan-Brain ? We can add in a subsequent PR? Unless you think implementing blue on mobile or that little submenu bar would be incompatible with any of the code restructuring here?

[Duncan-Brain]

@kathyavini No I didn't connect with Loic on the hamburger menu blue color. I think the mobile menu was at least color differentiated so it seemed like a design choice.

Forgot about the vertical bar, will double check those styles and update tomorrow!

All you on the blue haha!

[Duncan-Brain]

Merged then! Will do follow up.

[kathyavini]

@Duncan-Brain alright, if you love the Windows-level blue I won't say anything 🤐

(Well, unless Sayaka or Denis or someone backs me up on this once this is on beta 😂)