Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdb-side-nav Questions

heath.frankel free asked 6 years ago

SideNav Sample Please refer to the sample above. We are planning to move our top navigation to side navigation. We won't have any top navigation, only side navigation. We have looked at the sample here at SiteNav Docs but we need a some more elements/options within the side nav. The questions are: 1) We need some menu items to be at the bottom of the SideNav. To achieve this we used flex layout as in the sample, but then it messes with the foreground. Is there any other way to achieve this? 2) We need to have a drop-down within SideNav. As you can see from the sample provided the drop down isn't working within the SideNav. How can we achieve this? 3) Rather than expandable accordion, we need a section with header to group together common actions on the side menu. We have tried to achieve similar in the sample provided (the section with "user.name" as heading), but it needs to be polished to look pretty. We were wondering if there is already a way implemented in MDBootstrap, i.e. a handful of cards to achieve this. 4) The sample puts all action items inside mdb-accordion-item. When we tried to use just regular anchors, it looks pretty ugly. Is there a class we need to add to regular anchors within SideNav, or does SideNav only support mdb-accordion at the moment. 5) We need top have a card within the top of the side nav which may contain some information about the logged in user along with action buttons. Is it possible to add a card within sidenav with a round profile icon, useranme, then settings and logout buttons? 6) How can we mark a child item as selected? So we would like to mark a selected item and only one selected item for the entire sidenav. Regards

Damian Gemza staff answered 6 years ago

Heath.frankel, Problem with cut off card would be eliminated with overflow: hidden style in .side-nav class. Please add below code into your styles.css file: 
.side-nav {

overflow: hidden;

}
About the problem with cut off dropdown - I'm unable to reproduce this problem with my example code. Below is the full code of app.component.html from my computer, please check the differences. 
<!-- SideNav slide-out button -->

<!-- <a (click)="sidenav.toggle()" class="btn btn-primary p-3 button-collapse"><i class="fa fa-bars"></i></a> -->

<!--/. SideNav slide-out button -->

<!-- Sidebar navigation -->

<mdb-side-nav #sidenav class="fixed side-nav-light white" [fixed]="true" [sidenavBreakpoint]="800">

<!-- Logo -->

<div class="d-flex flex-column"style="height: 100%;">

<div>

<div class="logo-wrapper waves-light">

<a href="#">

<img class="linkedehr-logo"src="../assets/linkedehr-logo-3.png" />

</a>

</div>

</div>

<mdb-card class="mx-auto">

<mdb-card-body>

<mdb-card-title>

<h4 class="black-text">

<span class="avatar">

<img height="40"src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"class="rounded-circle">

</span>

User

</h4>

</mdb-card-title>

<mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's content.

</mdb-card-text>

</mdb-card-body>

<button mdbBtn color="primary"size="sm"mdbWavesEffect>Account</button>

<button mdbBtn color="primary"size="sm"mdbWavesEffect>Settings</button>

</mdb-card>

<h5 class="grey-text ml-4 mt-4 mb-0 pb-0">user.name</h5>

<mdb-accordion class="collapsible collapsible-accordion" [multiple]="true"aria-multiselectable="false">

<!-- Simple link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-sign-out mr-2"></i> Logout

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

<!-- Simple link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-key grey-text mr-2"></i> Change Password

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

<a>Linkacz</a>

<div class="border border-top-0 border-left-0 border-right-0 mt-2"></div>

<div class="btn-group"mdbDropdown>

<button mdbDropdownToggle type="button"mdbBtncolor="primary"class="dropdown-toggle waves-light"mdbWavesEffect>

Basic dropdown

</button>

<div class="dropdown-menu">

<a class="dropdown-item"href="#">Action</a>

<a class="dropdown-item"href="#">Another action</a>

<a class="dropdown-item"href="#">Something else here</a>

<div class="divider dropdown-divider"></div>

<a class="dropdown-item"href="#">Separated link</a>

</div>

</div>

<mdb-accordion class="collapsible collapsible-accordion"style="height: 100%;" [multiple]="true"

aria-multiselectable="false">

<!-- Collapsible link -->

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect>Collapsible menu</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li>

<a href="#"class="waves-effect"mdbWavesEffect>Link 1</a>

</li>

<li>

<a href="#"class="waves-effect"mdbWavesEffect>Link 2</a>

</li>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

<!-- Simple link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-hand-pointer-o"></i> Simple link</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

<!-- Collapsible link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li>

<a href="#"class="waves-effect"mdbWavesEffect>Link 1</a>

</li>

<li>

<a href="#"class="waves-effect"mdbWavesEffect>Link 2</a>

</li>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

<!-- Simple link -->

<mdb-accordion-item class="no-collase">

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-hand-pointer-o"></i> Simple link

</mdb-accordion-item-head>

<mdb-accordion-item-body></mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

<mdb-accordion class="collapsible collapsible-accordion" [multiple]="false"aria-multiselectable="false">

<mdb-accordion-item>

<mdb-accordion-item-head mdbWavesEffect>

<i class="fa fa-user-circle"></i> username</mdb-accordion-item-head>

<mdb-accordion-item-body>

<ul>

<li>

<a class="waves"mdbWavesEffect>

<i class="fa fa-sign-out mr-2"></i>

<span>Logout</span>

</a>

</li>

<li>

<a class="waves"mdbWavesEffect>

<i class="fa fa-key grey-text mr-2"></i>

<span>Change Password</span>

</a>

</li>

</ul>

</mdb-accordion-item-body>

</mdb-accordion-item>

</mdb-accordion>

</div>

<!--/. Side navigation links -->

<div class="sidenav-bg mask-strong"></div>

</mdb-side-nav>

<div class="main-content">

<h1> Page Title</h1>

<p>

This is the main content

</p>

</div>

<!--/. Sidebar navigation -->
Best Regards, Damian

heath.frankel free answered 6 years ago

I have tried your code samples provided in answer 2 and 5 but the layout is cut off. See image here.

Damian Gemza staff answered 6 years ago

Dear heath.frankel, Let me answer your question in order in which you have asked it:
  1. What do you mean by saying that this mess with the foreground? What's wrong there? Flex is the best way to place items in your page layout.
2. There's no btn-group class and mdbDropdown directive on div which contains your dropdown. Update dropdown code in below way: 
<div class="btn-group" mdbDropdown>

<button mdbDropdownToggle type="button" mdbBtn color="primary" class="dropdown-toggle waves-light" mdbWavesEffect>

Basic dropdown

</button>




<div class="dropdown-menu">

<a class="dropdown-item"href="#">Action</a>

<a class="dropdown-item"href="#">Another action</a>

<a class="dropdown-item"href="#">Something else here</a>

<div class="divider dropdown-divider"></div>

<a class="dropdown-item" href="#">Separated link</a>

</div>

</div>
3. Try to use some cards to achieve your desired behavior. 4. The sidenav supports only mdb-accordion items at the moment. 5. This is possible - just add below code just below div which contains your logo: 
<mdb-card class="mx-auto" style="width: 90%">

<mdb-card-body>

<mdb-card-title>

<h4 class="black-text">

<span class="avatar">

<img height="40"src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg"class="rounded-circle">

</span>

User

</h4>

</mdb-card-title>

<mdb-card-text> Some quick example text to build on the card title and make up the bulk of the card's content.

</mdb-card-text>

</mdb-card-body>

<button mdbBtn color="primary" size="sm" mdbWavesEffect>Account</button>

<button mdbBtn color="primary" size="sm" mdbWavesEffect>Settings</button>

</mdb-card>
6. For now there's no possibility to mark items in Sidenav's accordion as active. Best Regards, Damian  

heath.frankel free commented 6 years ago

Thanks Damian Gemza for prompt response. About the question 1, when you add the flexbox casses "d-flex flex-column" the child items of the collapsible menu has white background. In the sample provided, expand the accordion "username" or "Collapsible menu" and note the foreground is hard to read as it's white. Now remove the classes "d-flex flex-column" and you'll see the difference.
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: Lenovo X1 Carbon
  • Browser: Chrome, IE 11+, Firefox
  • OS: Window 10
  • Provided sample code: No
  • Provided link: Yes
Tags
sidenav
About author
heath.frankel
46Support score
7Questions 2Answers 0Snippets