Мобильная версияI have implemented a toggled side nav. The problem is that when the screen is initially set to 100%, the navigation menu occupies the entire height of the screen. However, when zoomed out to 80%, it appears perfect.
On 100% :
On 75%:
So, what how can I make the CSS, to look at 80% view port UI ? Or how can I change the CSS to attain that 80% zoom view ?
Below is the SCSS code
.index-main-layout { display: flex; flex-direction: row; width: 100%; height: 100%; .layout-side-nav { transition: all 0.5s ease; width: 200px; min-width: 272px; background-color: #1d3666; overflow: auto; } .layout-side-nav::-webkit-scrollbar { display: none; } .side-nav-closed { width: 100px; min-width: 50px; } } .main-layout-sidenav { position: relative; .sidenav-header { padding: 1rem; .sidenav-header-item { display: flex; align-items: center; gap: 1rem; .biodata-logo { .biodata-logo-img { width: 40px; border-radius: 50%; max-width: 40px; min-width: 40px; } } .user-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; .user-icon-img { width: 40px; max-width: 40px; min-width: 40px; border-radius: 10px; } .user-notification-badge { position: absolute; top: 0; right: -3px; height: 10px; width: 10px; border-radius: 50%; background-color: #e35953; border: 2px solid white; } } .user-icon-hidden { display: none; } .toggle-btn { margin-left: auto; .nav-toggle-btn { display: flex; flex-wrap: nowrap; .nav-toggle-btn-img { width: 8px; } &:hover { cursor: pointer; } } .toggled-nav { transform: rotate(180deg); } } } } .sidenav-menu { width: 100%; display: flex; flex-direction: column; padding: 0rem 0rem 1rem 0rem; .navlink-menu { padding: 0.6rem; padding-left: 1.5rem; .sidenav-menu-item { width: 100%; text-wrap: nowrap; display: flex; align-items: center; gap: 1rem; text-decoration: none; color: white; .nav-menu-icon { width: 25px; height: 25px; } } &:hover { cursor: pointer; color: #edeef8 !important; border: none !important; background-color: rgba(255, 255, 255, 0.2); } } .active { cursor: pointer; color: #edeef8 !important; border: none !important; background-color: rgba(255, 255, 255, 0.2); } } .sidenav-menu-hidden { .navlink-menu { .navmenu-title { display: none; } text-decoration: none !important; } } .sidenav-add-data-btn { position: absolute; padding: 1rem; bottom: -0.5%; width: 100%; } .sidenav-add-data-btn { button { display: flex; align-items: center; justify-content: center; background-color: #2559d6; color: #ffffff; gap: 1rem; font-weight: 500; width: 100%; text-wrap: nowrap; .add-icon { display: flex; align-items: center; justify-content: center; } &:hover { opacity: 0.8; background-color: #2559d6; } } } } .layout-outlet-nav { width: 100%; height: 100%; }
Источник: https://stackoverflow.com/questions/780 ... oom-levels
