Hide header in angular metronic Original dahboard
Hello
i'm using Metronic dahsboard Original (the angular version)
i want to hide the header for the desktop view so i get more space as i only need the side bar and the app-content containner
if i comment all the <app-header id="kt_app_header"> it will work but it not show sidebar_mobile_toggle in mobile version
i hope you can help me
thank you
Replies (5)
Certainly, to hide the header in the Angular Metronic Original dashboard for the desktop view while keeping the sidebar and app-content container, you can follow these steps:
1. Locate the configuration file responsible for the sidebar settings. In the Metronic Original Angular dashboard, the configuration files are often found in a directory like `/angular/demo1/src/app/_metronic/layout/core/configs/`.
2. Open the configuration file named `dark-sidebar.config.ts` or similar.
3. Inside the configuration file, search for the configuration key `app.sidebar.default.collapse.desktop.enabled`.
4. Set the value of this configuration key to `false`.
5. Save the changes to the configuration file.
6. After making this change, the header should be hidden in the desktop view, leaving only the sidebar and app-content container visible.
Remember to rebuild and reload your Angular application to apply the changes. This configuration change should provide you with more space on the desktop view, while the mobile version should still display the `sidebar_mobile_toggle`.
Hi Faizal
i'm sorry for the delay , i was working on some other part ..
i try your answer it's help me a lot
thank you
Hi Zakaria Snoussi,
No problem at all! I'm glad to hear that it helped. If you have any more questions or need further assistance, feel free to ask.
You can follow these steps:
Identify the HTML code responsible for rendering the header in your Angular component template files. This is likely located in a file such as app.component.html.
Instead of completely removing the <app-header> element, you can conditionally hide it based on the screen size or viewport width fnaf using Angular's built-in directives like *ngIf.
Determine the viewport width breakpoints at which you want the header to be hidden. You can use CSS media queries for this purpose
The subject is quite appealing and well-written. Find the configuration file that holds the settings for the sidebar. The configuration files are typically located in a location like ~/angular/demo1/src/app/_metronic/layou in the Metronic Original Angular dashboard. I used the tool basketbros as directed to get the desired results.
