feat: APPS-2946 Create Two Column Layout component

[farosFreed]

Connected to APPS-2946

Component Created: TwoColLayoutWStickySidebar.vue

Stories: ~/stories/TwoColLayoutWStickySidebar.stories.js

Notes:

This component uses slots to place content within a 2 column layout. When on desktop sized screens, it places sidebar content in a sidebar column. When on mobile sized screens, it splits the sidebar content into 2 distinct groups and places it inbetween the main column content. The exact behavior has been documented visually with a drawio file and an svg exported from that file.

Originally I had planned to get the content of the sidebar slots and use JS to append it to a different div, but I found that was not necessary, as we can duplicate the slot names in the layout to duplicate the elements into both the sidebar and the primary columns. Then, we use the isMobile ref to determine which to render.

Checklist:

• [X] I checked that it is working locally in the dev server
• [X] I checked that it is working locally in the storybook
• [ ] I checked that it is working locally in the library-website-nuxt dev server
• [ ] I added a screenshot of it working
• [ ] UX has reviewed and approved this
• [ ] I assigned this PR to someone on the dev team to review
• [X] I used a conventional commit message
• [X] I assigned myself to this PR

[github-actions[bot]]

Percy Screenshots

In order to conserve our percy screenshot allowance, percy is not configured to run automatically. Please make sure the PR is ready and all other checks are passing, then start it manually:

1. Visit https://github.com/UCLALibrary/ucla-library-website-components/actions/workflows/percy.yml 2. Click the 'Run workflow' button in the blue bar. 3. Select the correct branch for this PR and click 'Run workflow' again to confirm.

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-614--ucla-library-storybook.netlify.app

[pghorpade]

:tada: This PR is included in version 3.21.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: