In my Angular-11 application, I am using two different Layouts:
- Landing Page
- Main Page
I am using AdminLTE-3 Theme
The Landing Page has its own layout, and this does not have sidebar. The body class of its layout is different:
<body class="hold-transition layout-top-nav layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
<app-landing-topnavbar></app-landing-topnavbar>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
<app-landing-footernavbar></app-landing-footernavbar>
</div>
</body>Main Layout:
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
<app-headerbar></app-headerbar>
<app-sidebar></app-sidebar>
<div class="wrapper">
<router-outlet></router-outlet>
</div>
<app-footerbar></app-footerbar>
</div>
</body>This is the index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>iDriver</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<app-root></app-root>
</body>
</html>By default, the application should load the landing page. But when the user successfully logs in, it redirects to the main application which uses the main-layout
My observation is that when the user renders the landing page, the page shifts to the right as if it's having side, which shouldn't be. This should only be for the main page.
But when I copied the class in the body of the landing page layout:
<body class="hold-transition layout-top-nav layout-fixed layout-navbar-fixed layout-footer-fixed">
and use it to replace ordinary in the index.html, the landing page becomes okay.
How do I finally resolve this issue?
Thanks