The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (12)

Deleted comment
 
Deleted comment

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.



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


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.

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.