Columns

Working with SvelteKit is a pretty sweet deal, especially thanks to its simplicity in handling reactivity. All you need is a $: statement, and you're good to roll. One of the recent upgrades in Tizli is adding two columns for the desktop view in the planning section, which really helps us utilize the screen space better. It determines the layout by measuring if the device or screen width is larger than a typical mobile device with its menu tucked away. If it is, you get a single column; if it's smaller, it switches to a two-column layout.

The decision about whether to hide or display the left navigation menu is also based on the screen width, using the same responsive targets as when deciding on the column layout. Even though there might be a few different iterations of this approach, once you get your hands on it, everything falls into place and it just feels intuitive and easy to use.