Angular Material sidebar small version with dropdown menus

I am currently using Angular 5 in conjunction with Material design. My application features a side navigation menu with an angular material navigation drawer mini variant, where the items are hidden, leaving only the icons when collapsed (see image).

My goal is to add submenus for certain menu items.

When the menu is collapsed, a popover would appear displaying the links to the submenus: menu popover

When the menu is expanded, an arrow would allow the user to expand the submenu under the menu: menu expanded with children

I have explored various solutions, but none have matched this specific functionality. Here are some links I have come across: Angular Material Tree

Dynamic nested menu using Angular Material

Bootstrap popover, although I am hoping to find a similar solution within Angular Material.

There is also a similar question posted here

Does anyone have any ideas on how to achieve this functionality?

Thank you in advance for your assistance,

Begoña

angulartypescriptbootstrap-4material-designangular-material

Answer №1

Instead of leaving this answer as a comment due to text-size limits and visibility concerns, I'll share it here.

Unfortunately, there is currently no official native solution provided by Material for this issue.

However, I have discovered a clever workaround that I will outline below:

  1. Create a standard Material menu in your app (refer to the last example on stackblitz) and use this live example to handle an isExpanded value with corresponding icon/text exclusion.

  2. Utilize the ngClass directive to conditionally add a custom class based on the isExpanded value, setting the width to a custom value of N px !important.

    Use of !important is necessary to override default values.

  3. Implement a pop-over using a library like this or this. Customization of CSS for positioning and color values is essential.

    For editing and overriding library tags and class properties, utilize the ::ng-deep prefix (e.g., 

    ::ng-deep ngb-popover-window { /* custom styles */ }
    ).

    Overriding the Material sidenav with CSS is the only option, but it can be tricky and risk disrupting the app layout.

    Alternatively, consider adjusting the menu width on hover to display a second column with sub-section links...

    For reference, you can explore a similar concept here.

  4. When creating the menu content, duplicate your code to accommodate different behaviors based on the isExpanded value, allowing for easier management of a treeview and pop-over submenu view.

SOURCE: Currently implementing this approach

I hope this proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the mapbox source features in real-time

Currently, I am mapping out orders on a map with layers and symbols that have different statuses. When the status of an order changes, I want to update the color of the symbol accordingly. The layer configuration looks like this: map.addLayer({ id: &q ...

javascriptreactjstypescriptmapboxmapbox-gl-js

"Enhancing User Experience by Enabling Full Clickability on List Items

I am working on a hamburger menu with a dropdown feature, and I want the entire dropdown menu to be clickable instead of just the text. Below is my current code which only allows clicking on the text. cshtml <nav class="navbar fixed-top navbar-dark bg ...

htmlasp.net-mvcrazorbootstrap-4

The Intersection Observer API is caught in a never-ending cycle of rendering

I am experimenting with the intersection observer API in order to selectively display elements in a CSS grid as the user scrolls, but I seem to have run into a problem of encountering an endless rendering loop. Below is the code snippet I am working with. ...

reactjstypescriptchakra-uireact-intersection-observer

Angular 14 presents an issue where the injectable 'PlatformLocation' requires compilation with the JIT compiler; however, the '@angular/compiler' module is currently missing

I've encountered the following error and have tried multiple solutions, but none of them have been successful: Error: The injectable 'PlatformLocation' requires JIT compilation with '@angular/compiler', which is not available. ...

javascriptangulartypescriptwebpackjit

Trouble arises when implementing a nested flex layout in Angular Material shorthand

I'm having trouble identifying the issue with this particular layout. My goal is to maintain a Single Page Application layout where the "deepest" component only becomes scrollable if the viewport height is too small, as indicated in the snippet by us ...

cssangularjslayoutflexboxangular-material

Unlock the contents of a directory using a .htaccess file

My directory setup looks something like this: www.examplelink.com/angular/dist/my-app. I need to reach this directory when going to the link : www.examplelink.com/angular. What would be the best way to achieve this using htaccess? ...

angular.htaccesscpanel

"Everything seems to be in order with `ng serve`, but `ionic serve`

My current project involves using Ionic version 6.19.0, but it has recently run into some unexpected compiling issues. Every time I attempt to execute 'ionic serve,' I encounter an Error: spawn UNKNOWN. Here is the content of my package.json fil ...

node.jsangularionic-frameworknpm

Build an object using a deeply nested JSON structure

I am working with a JSON object received from my server in Angular and I want to create a custom object based on this data. { "showsHall": [ { "movies": [ "5b428ceb9d5b8e4228d14225", "5b428d229d5b8e4 ...

javascriptjsontypescript

Angular2 and ReactiveX: Innovative Pagination Strategies

Currently, I am diving into the world of ReactiveX. To make things easier to understand, I have removed error checking, logging, and other unnecessary bits. One of my services returns a collection of objects in JSON format: getPanels() { return this. ...

paginationtypescriptangularrxjsreactivex

How to test Angular HttpClient in protractor end-to-end testing

Upon loading my application, an http call is made to the backend which causes my e2e test to fail in CI pipelines where no backend is available. I attempted to handle the error using the rxjs catchError operator on the http call. Additionally, I tried wr ...

angularprotractore2e-testing

Creating a search field in Bootstrap 4 that emulates material design, facing challenges with transition animations

I tried to create a material design search field using Bootstrap form input. While I was able to make it work, I noticed a small issue with the focus state. When I click inside the field, the underline animation runs smoothly. However, when I click outside ...

htmlcsstwitter-bootstrapbootstrap-4

Using Angular 2 to Showcase JSON Array Data with Component Selector

I am struggling to showcase a specific array value, taxes, using the component selector without any success. At the moment, the component selector is displaying all values in the template/model. My goal is to only display the taxes value of the model. use ...

angular

How can I exclude the last parameter from a function type in Typescript?

If I have a function type like this: type FunctionType = (a: number, b: string, c: boolean) => void How can I create a new type with the last parameter removed? type NewFunctionType = OmitLastParameter<FunctionType> Desired type for NewFunctionT ...

typescript

"Utilizing jQuery and Bootstrap 4 in TypeScript, attempting to close modal window using jQuery is not functioning

Trying to make use of jquery to close a bootstrap modal within an angular project using typescript code. The following is the code: function call in html: (click)="populaterfpfromsaved(i, createSaved, createProp)" createSaved and createProp are local ...

javascriptjqueryangulartypescriptbootstrap-modal

Assigning an argument of type `any` to a parameter of type `Observable<IComboboxItem[]>` can be considered risky

I have a piece of code that retrieves data from the backend server. Here is the code snippet: @Injectable() export class DictionariesDatasourceFacadeService { public invoiceTemplate: IDataSource<IComboboxItem>; public replacedLegalEntity: IData ...

javascriptangulartypescript

Tips for attaching an event listener to a div element that is accessed by reference in a React and TypeScript environment

I am attempting to attach an event listener to the div element using a ref. In my code, I have added a ref called div_ref to the Wrapper div and accessed that div_ref in the enableDragEventListeners method to add event listeners to it on component mount. ...

reactjstypescript

Creating an external stylesheet and including it in a component: A beginner's guide

Hello, I am looking to create an external CSS file and link it to a component. I have provided the code below, but I am encountering errors which are mentioned further down. Please review the code and let me know where I may have made a mistake and provide ...

angular

Angular 7 flex layout ensures that the table fills its parent container completely without overstretching it

Hello, I'm encountering a problem with the sample found on StackBlitz. My goal is to confine the table to one page and have the remaining height filled after the header. If the table exceeds this height, I would prefer it to be hidden. However, based ...

angularangular-flex-layout

Misunderstanding between Typescript and ElasticSearch Node Client

Working with: NodeJS v16.16.0 "@elastic/elasticsearch": "8.7.0", I am tasked with creating a function that can handle various bulk operations in NodeJS using Elasticsearch. The main objective is to ensure that the input for this funct ...

node.jstypescriptelasticsearch

Are multiple click events needed for identical buttons?

In my component, there is an HTML structure like this: <div id="catalogo" class="container"> <div class="row"> <div *ngFor="let artista of artistas" class="col-sm" style="mar ...

angulartypescript