Make HTML in header the same as a BCROS

[steveburtch]

Description

• Sync header JS with other common header for other projects
• Sync header style with other projects
• implement header with tech stack we decided on

Details (filled out as part of ticket 17986)

start from header here: https://github.com/bcgov/registries-search/blob/main/search-ui/src/sbc-common-components/components/SbcHeader.vue

HTML

• remove sbc-product-selector
• remove 'whats new' menu (add this in later)
• remove 'notifications' menu (add this in later)
• remove browser-version-alert (add this in later)
• remove mobile-device-alert (add this in later)
• rewrite top level grid structure with tailwind classes
  • max width of inner container: 1360px
  • alignment of logo / bcregistries title / menus
• styles
  • background colour: #036
  • bottom border: #fcba19
  • font family: BCSans,Verdana,Arial,sans-serif
• create account btn
• login menu
  • make/use common menu component
  • v-menu to tailwind/headless menu
    • top level alignment/styling
    • v-menu activator button (v-btn/v-icon -> tailwind/headless)
    • menu body
      • v-card / v-card-title -> tailwind/headless
      • v-divider -> tailwind/headless
      • v-list/v-list-item -> tailwind
• account menu (make standalone comp?)
  • top level alignment/styling
  • v-menu to tailwind/headless menu
  • v-menu activator button (v-btn/v-icon/v-avatar -> tailwind/headless)
  • menu body
    • v-card alignment/styling -> tailwind
    • multiple v-lists separated by v-divider
      • user profile (v-list/item/title/subtitle, v-avatar)
      • account settings (v-list/item/subheader)
      • switch account (v-list/item/subheader/subtitle, v-icon)
      • create account (v-list/item)

[steveburtch]

Hey team! Please add your planning poker estimate with Zenhub @kialj876 @hfekete @patrickpeinanw

[kialj876]

@forgeuxGH5 @gunanagar FYI the buttons won't do anything until the JS ticket is finished. This one is purely just for the way it looks so the auth values are hardcoded in. To see the logged out version click 'log out' in the dropdown. To see the logged in version again you can click the 'log in' drop down and select any value

[forgeuxGH5]

Looks pretty good - I'm getting a font load error - can't load BC Sans
Also FYI - you have the correct usage of "log in" - the current version of the component is actually wrong... so don't change this :-)
Zenhub isn't letting me upload images for some reason or I'd post a screenshot for the above^

[forgeuxGH5]

@gunanagar are you testing the AA accessibility requirements for this?

[kialj876]

we have a separate ticket to complete accessibility in grooming fyi #17802

[gunanagar]

[gunanagar]

Looks good.