TLDR; What conditional variable should I be checking and what property should I be changing to have the title element react naturally when the word count is too high to fit the allotted space?
And what is the best practice for implementing this conditional change in VueJS? (v-if?)
I'm looking for some guidance in figuring out what I have to do with the sizing of a title element I have for an app I am working on. I currently have the title displaying as an H1 element in between a hamburger menu and search icon (as seen in the first picture below).
However, when you got to the next view, where it would display the new title, it's too long to fit the given space and blows up the whole header section.
I am working in VueJS and I'm just not sure what I should do about this situation. I know I should have some sort of variable case that changes the class that decides it's font-size, but what is the variable I should be checking? Should I be checking with a v-if and then changing just the font-size?
MyHeader.vue (shownList is the only prop in this component)
<template><div class="my-header"><div class="my-header_top-els"><img src="/svgs/menu.svg" /><div class="my-header_top-els_title"> {{ shownList }}</div><img src="/svgs/search.svg" /></div><div class="my-header_bottom-els"><div class="my-header_bottom-els_back-btn-included"><div class="back-title"><img src="/svgs/arrow-left.svg" class="back-icon" /><div class="t-nav-switch my-header_bottom-els_title">Back</div></div><div class="sort-title"><div class="t-nav-switch my-header_bottom-els_title">Sort Items</div><img src="/svgs/sort.svg"class="icon" /></div></div></div></template>Style
<style lang="sass" scoped>.my-header position: fixed top: 0 left: 0 right: 0 height: 9.25rem z-index: 1 display: flex flex-direction: column justify-content: center border: none border-bottom-left-radius: 1rem border-bottom-right-radius: 1rem background-color: #fffdf9 box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.25)&_top-els display: flex margin-top: 1rem margin-bottom: 1rem padding-left: 1.75rem padding-right: 1.75rem&_title margin: 0rem auto color: sienna text-transform: capitalize font-weight: 500 font-size: 3rem.my-header_bottom-els display: flex flex-direction: row justify-content: center align-items: center margin: 0 padding: 0&_line margin-left: 1rem margin-right: 1rem font-weight: bold color: sienna.my-header_bottom-els_back-btn-included display: flex justify-content: space-around align-items: center.location-title,.category-title,.sort-title,.back-title display: flex margin: 0 padding: 0 color: blue.sort-title color: avacado.category-title color: gold.icon margin-left: 0.5rem.back-title color: sienna.back-icon margin-right: 0.25rem</style>