Drawer: Images > Navigation Drawer - 2pts

[jakedcolbert]

• update top image in the drawer to match element customized in Images > Navigation bar in scripture app builder

[chrisvire]

Q: How should we deal with different resolutions of devices?

Scripture App Builder will have navigation drawer images in multiple resolutions:

[jakedcolbert]

Research on <img> tag handling multi resolutions

[chrisvire]

Take a look:

https://www.w3schools.com/Css/css_rwd_images.asp

• at the end it shows using media queries or <picture> element
• see that they have an <img> as a fallback for browsers that don't support <picture>
• https://caniuse.com/picture shows browser support for elements

https://www.w3schools.com/html/html_responsive.asp

General article about responsive icons

• https://uxmag.com/articles/responsive-icons-and-logos-for-the-responsive-web

[chrisvire]

Navigation Drawer images will be in:

images/nav_drawer.png images/nav_drawer@2x.png

You can try something like this:

            <picture>
                <source src="images/nav_drawer.png" srcset="images/nav_drawer@2x.png 2x" />
                <img src="images/nav_drawer.png" alt="Drawer Header" style="width:auto;" />
            </picture>