{"id":16415883,"url":"https://github.com/harikvpy/ngx-mat-menu-layout","last_synced_at":"2026-05-03T19:33:27.204Z","repository":{"id":223781620,"uuid":"761533453","full_name":"harikvpy/ngx-mat-menu-layout","owner":"harikvpy","description":"An Angular component to build a responsive sidemenu layout UI.","archived":false,"fork":false,"pushed_at":"2024-08-01T04:09:34.000Z","size":302,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-15T03:55:45.789Z","etag":null,"topics":["angular","angular-material","layout","layout-engine","material","sidemenu"],"latest_commit_sha":null,"homepage":"https://github.com/harikvpy/ngx-mat-menu-layout/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/harikvpy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-22T02:17:07.000Z","updated_at":"2024-08-01T04:09:38.000Z","dependencies_parsed_at":"2024-02-22T03:31:42.900Z","dependency_job_id":"fcd4c02d-4197-4331-a9c2-7de2a3c5b761","html_url":"https://github.com/harikvpy/ngx-mat-menu-layout","commit_stats":null,"previous_names":["harikvpy/ngx-mat-menu-layout"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/harikvpy/ngx-mat-menu-layout","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harikvpy%2Fngx-mat-menu-layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harikvpy%2Fngx-mat-menu-layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harikvpy%2Fngx-mat-menu-layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harikvpy%2Fngx-mat-menu-layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/harikvpy","download_url":"https://codeload.github.com/harikvpy/ngx-mat-menu-layout/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/harikvpy%2Fngx-mat-menu-layout/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32582742,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","layout","layout-engine","material","sidemenu"],"created_at":"2024-10-11T07:07:38.643Z","updated_at":"2026-05-03T19:33:27.189Z","avatar_url":"https://github.com/harikvpy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxMatMenuLayout\n\nAn Angular package for implementing a responsive side menu user interface with\na toolbar. The package uses Angular Material 15+ and is compatible with\nAngular versions 15 and above.\n\nThe layout is responsive and hides the side menu when run on small screens.\nToolbar displays an app title at the start. Toolbar content can be customized\nby content projection.\n\n## How to use\nTo use this component, initialize it with the branding logo \u0026 text, application\ntitle and menu items (`NavItem[]`).\n\n```\n    \u003cngx-mat-side-menu-layout\n      brandingImage=\"assets/angular.png\"\n      brandingText=\"SMALLPEARL\"\n      appTitle=\"SUPERCRM\"\n      [menuItems]=\"menuItems\"\n      [menuPaneFooterContent]=\"versionInfoFooter\"\n      [toolbarTitleContent]=\"toolbarTitle\"\n    \u003e\u003c/ngx-mat-side-menu-layout\u003e\n    \u003cng-template #versionInfoFooter\u003e\n      \u003cdiv style=\"text-align: center; font-size: 0.8em;\"\u003e\n        \u003cselect name=\"language\" id=\"language\"\u003e\n          \u003coption value=\"en\"\u003eEnglish\u003c/option\u003e\n          \u003coption value=\"zh\"\u003e中文\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cbr /\u003e\n        \u003csmall\u003e2.3.102\u003c/small\u003e\n      \u003c/div\u003e\n    \u003c/ng-template\u003e\n    \u003cng-template #toolbarEndContent\u003e\n      \u003cbutton mat-icon-button (click)=\"onNotificationsToggle()\"\u003e\n        \u003cmat-icon\u003enotifications\u003c/mat-icon\u003e\n      \u003c/button\u003e\n      \u003cbutton\n        mat-icon-button\n        class=\"user-button\"\n        [matMenuTriggerFor]=\"userProfileMenu\"\n      \u003e\n        \u003cimg src=\"assets/avatar.jpg\" alt=\"\" /\u003e\n      \u003c/button\u003e\n      \u003cmat-menu #userProfileMenu=\"matMenu\"\u003e\n        \u003cbutton mat-menu-item (click)=\"onUpdateProfile()\"\u003e\n          \u003cmat-icon\u003eface\u003c/mat-icon\u003e\n          \u003cspan\u003eProfile\u003c/span\u003e\n        \u003c/button\u003e\n        \u003cbutton mat-menu-item (click)=\"onChangePassword()\"\u003e\n          \u003cmat-icon\u003epassword\u003c/mat-icon\u003e\n          \u003cspan\u003eChange password\u003c/span\u003e\n        \u003c/button\u003e\n        \u003cbutton mat-menu-item (click)=\"onSignOut()\"\u003e\n          \u003cmat-icon\u003elogout\u003c/mat-icon\u003e\n          \u003cspan\u003eSign out\u003c/span\u003e\n        \u003c/button\u003e\n      \u003c/mat-menu\u003e\n    \u003c/ng-template\u003e\n```\n\nDefine the menu items as an array of `NavItem` objects and set it as the value\nfor the property `menuItems`.\n\nAnd voila, you will have a beautiful side menu layout with a toolbar on top.\nThe layout is responsive and on small screens will auto hide. You can display\nthe navigation menu, by using the hamburger button at the start of the toolbar.\n\nSee the sample application for implementation.\n\n## Reference\n### Inputs\n| Name | Type | Description |\n|------|------|-------|\n| showBackButton | boolean | A boolean property that controls if a Back button should be displayed at the top of the side menu. This is useful for secondary menus (note that this is NOT a submenu) from where a navigation path to the parent menu ought to be provided. |\n| defaultBackButtonHref | string | The href for the back button is typically automatically determined. If there's no back history, the back button (if specified) will use this href. |\n| backButtonText | string | The back button text. Defaults to 'BACK' |\n| brandingImage | string | Branding logo (32x32) that will be displayed on the top of the menu pane. |\n| brandingText | string | Branding text that is displayed next to the logo on the top of the menu pane. |\n| menuItems | NavItem[] | Menu items which is an array of `NavItem` objects. |\n| appTitle | string | Application title. |\n| menuPaneFooterContent | `TemplateRef\u003cany\u003e` | NgTemplate for the footer displayed below side menu. This will be passed to the `qq-mat-menu-pane`. |\n| toolbarEndContent | `TemplateRef\u003cany\u003e` | NgTemplate for the content displayed at the end of the top toolbar. |\n| infoPaneContent | `TemplateRef\u003cany\u003e` | NgTemplate for the content displayed in the information pane at the end of the page. |\n| toolbarTitleContent | `TemplateRef\u003cany\u003e` | NgTemplate for the toolbar title. If specified, `appTitle` will be ignored. |\n| infoPaneMinWidth | number | Minimum width of the info pane at the end of the page (right on LTR text). |\n| infoPaneMaxWidth | number | Maximum width of the info pane at the end of the page (right on LTR text). |\n| contentContainerClass | string | If specified, the CSS class that is applied to the content container div. This allows global styling of the container class (possibly padding, margin, color, etc) that will be applied to all the compoents corresponding to each menu item's link. |\n| menuTitle | string | A title for the menu pane. Typically used in secondary side-menu layout pages. Defaults to an empty string. |\n\n### CSS\n\nThe navigation menu theme can be customized by using CSS variables. There are\na bunch of them that control the colors of different elements of the layout.\nThe following table lists them and their purpose.\n\nThe sample project in the library, uses angular material theme to set values\nfor these variables.\n\n| Variable | Description |\n|----------|-------------|\n| --qq-sidenav-bg-color | Sidenav menu pane background color |\n| --qq-sidenav-fg-color | Sidenav menu pane foreground color |\n| --qq-toolbar-bg-color | Toolbar background color |\n| --qq-toolbar-fg-color | Toolbar foreground color |\n| --qq-sidenav-border-color | Sidemenu border color |\n| --qq-toolbar-border-color | Toolbar border color |\n| --qq-menu-item-fg-color | Menu item foreground color |\n| --qq-menu-item-bg-color | Menu item background color |\n| --qq-highlighted-menu-item-fg-color | Highlighted menu item foreground color |\n| --qq-highlighted-menu-item-bg-color | Highlighted menu item background color |\n\n### Info pane\n\nThe component supports an information pane on the end of the pag. But it's\nhidden by default and has to be explicitly shown. One way to do that would be\nto query the `infoPane` member of `QQMatSideMenuLayoutComponent`\nwhich is an instance of the `MatSideNav` component. You can toggle its\nvisibility by calling its `toggle()` method. An approach could be to show a\nbutton at the end of the toolbar and then call `infoPane.toggle()` when the\nbutton is selected.\n\n```\n  export class AppHomeComponent implements OnInit {\n    @ViewChild(QQMatSideMenuLayoutComponent)\n    sideMenuLayout: QQMatSideMenuLayoutComponent;\n\n    ngOnInit(): void {}\n\n    ...\n    onNotificationsToggle() {\n      if (this.sideMenuLayout) {\n        this.sideMenuLayout.infoPane.toggle();\n      }\n    }\n    ...\n  }\n```\n\n### NavItem\n\nThis is the interface that is used to define the side menu items and pass it\nas the value for the `menuItems` property. It is defined as:-\n\n```\nexport interface NavItem {\n  text: string;\n  icon: string;\n  iconType?: 'mat' | 'bi' | 'fa';\n  disabled?: boolean;\n  route?: string;\n  children?: NavItem[];\n  backButton?: boolean;\n  backHref?: string;\n}\n```\nMembers are described in the following table:\n\n| Member | Description |\n|-------|----|\n| text | The menu item text |\n| icon | Icon displayed along with the text |\n| iconType | One of {'mat'|'bi'|'fa'}. If not specified, defaults to 'mat' |\n| disabled | Indicates that the menu item is disabled |\n| route | The relative URL to navigate when the item is selected |\n| children | If this item is a container for child menu items, set this to an array of `NavItem` objects |\n| backButton | Used internally |\n| backHref | Used internally |\n\n## Dependencies\n* Angular 15+\n* Angular Material 15+\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharikvpy%2Fngx-mat-menu-layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fharikvpy%2Fngx-mat-menu-layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fharikvpy%2Fngx-mat-menu-layout/lists"}