Dynamic response to screen sizes about shiny.fluent HOT 2 CLOSED

Hello @shahreyar-abeer, thanks for reaching out!

shiny.fluent is a package that supplies users with Fluent UI components, how those components can be arranged is a matter outside of scope of this package and won't be added in the future.

There are many ways to arrange components in Shiny apps and this one uses CSS Grid Layout. This app was designed to have a navbar of fixed width as you can see in style.scss file (line 14). To make navbar respond to changing width of window you could use such .grid-container class:

.grid-container {
  display: grid;
  grid-template-columns: 20% 80%;
  grid-template-rows: 54px 1fr 140px;
  grid-template-areas:
    "header header"
    "sidenav main"
    "footer footer";
  height: 100vh;
}

This would make navbar take 20% of the screen and it would scale as you change size of the window.

I highly encourage you to play with our examples to find out how they were built. I hope they give you some insight into how to build beautiful, responsive Shiny apps!

from shiny.fluent.

Okay, thanks for your quick response and sharing some insights as well!
It's been a pleasure playing with shiny.fluent!

from shiny.fluent.