Sidenav customization

Topic: Sidenav customization

Savic priority asked 2 years ago

Dear MDB Team,

Would you mind helping customizing sidenav to get specific look and behavior? Here are some mockups.

NOTE: Logo should be centered with sidenav item icon.

enter image description here

NOTE: Logo should be centered with sidenav item icon.

enter image description here

NOTE: Logo should be centered with sidenav item (icon + orange selection stripe)

enter image description here

Best regards, Novak

Add comment

Rafał Seifert free answered 2 years ago

0 0 Best answer

<p>Hello. We've prepared a sample sidenav with HTML structure and hard-coded styles. You can change dimensions and create classes for your needs. Using <code>.sidenav-link.active</code> CSS selector you can set your desired border style.</p>

<p>Template:</p>

<pre class="prettyprint"><code><mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav="mdbSidenav"
    slim="true"
    [slimCollapsed]="true"
    [backdrop]="false"
    [focusTrap]="false"
    [position]="'absolute'"
    [hidden]="false"
    [width]="300"
  >
    <div class="d-flex justify-content-between" style="height: 150px">
      <div
        class="d-flex left-side justify-content-center align-items-start pt-3"
        style="background-color: #1d6571; min-width: 80px"
      >
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp"
          alt="Avatar"
          class="rounded-circle img-fluid"
          style="max-width: 50px"
        />
      </div>
      <div class="text-white p-3" style="background-color: #025462; min-width: 220px">
        <h5>PARTNER CENTER</h5>
        <p class="small">OPAL Associates Holding AG</p>
      </div>
    </div>
    <ul class="sidenav-menu p-0">
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0 active"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-chart-area fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Dashboard</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-user fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Account</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-key fa-fw text-white fa-lg"></i>
          </div>
          <div class="h-100 d-flex align-items-center flex-fill" style="background-color: #025462">
            <span class="text-white ms-3">License and Installation</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-download fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Software</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-question-circle fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Documentation</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-cog fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Administration</span>
          </div></a
        >
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <div class="mdb-page-content page-intro bg-light">
      <div class="text-center py-5">
        
        <button class="btn btn-primary m-5" (click)="sidenav.toggle()">
          <i class="fas fa-bars"></i>
        </button>
        <button class="btn btn-primary m-5" (click)="sidenav.toggleSlim()">
          <i class="fas fa-bars"></i>
        </button>
        
      </div>
    </div>
  </mdb-sidenav-content>
</mdb-sidenav-layout>
</code></pre>

<p>CSS classes for styling border:</p>

<pre class="prettyprint"><code>.sidenav-link.active {
  border-right: 5px solid yellow !important;
}

.sidenav-link:hover {
  opacity: 75%;
  border-right: 5px solid white;
  transition: border 0s;
}
</code></pre>

<p>We hope it helps. If you have any further questions, feel free to ask.</p>

Please insert min. 20 characters.

Hello. We've prepared a sample sidenav with HTML structure and hard-coded styles. You can change dimensions and create classes for your needs. Using .sidenav-link.active CSS selector you can set your desired border style.

Template:

<mdb-sidenav-layout>
  <mdb-sidenav
    #sidenav="mdbSidenav"
    slim="true"
    [slimCollapsed]="true"
    [backdrop]="false"
    [focusTrap]="false"
    [position]="'absolute'"
    [hidden]="false"
    [width]="300"
  >
    <div class="d-flex justify-content-between" style="height: 150px">
      <div
        class="d-flex left-side justify-content-center align-items-start pt-3"
        style="background-color: #1d6571; min-width: 80px"
      >
        <img
          src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(26).webp"
          alt="Avatar"
          class="rounded-circle img-fluid"
          style="max-width: 50px"
        />
      </div>
      <div class="text-white p-3" style="background-color: #025462; min-width: 220px">
        <h5>PARTNER CENTER</h5>
        <p class="small">OPAL Associates Holding AG</p>
      </div>
    </div>
    <ul class="sidenav-menu p-0">
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0 active"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-chart-area fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Dashboard</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-user fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Account</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-key fa-fw text-white fa-lg"></i>
          </div>
          <div class="h-100 d-flex align-items-center flex-fill" style="background-color: #025462">
            <span class="text-white ms-3">License and Installation</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-download fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Software</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-question-circle fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Documentation</span>
          </div></a
        >
      </mdb-sidenav-item>
      <mdb-sidenav-item>
        <a class="sidenav-link p-0 rounded-0"
          ><div
            class="left-side h-100 d-flex justify-content-center align-items-center"
            style="background-color: #1d6571; min-width: 80px"
          >
            <i class="fas fa-cog fa-fw text-white fa-lg"></i>
          </div>
          <div
            class="right-side h-100 d-flex align-items-center"
            style="background-color: #025462; min-width: 220px"
          >
            <span class="text-white ms-3">Administration</span>
          </div></a
        >
      </mdb-sidenav-item>
    </ul>
  </mdb-sidenav>
  <mdb-sidenav-content #sidenavContent>
    <div class="mdb-page-content page-intro bg-light">
      <div class="text-center py-5">
        <!-- Toggler -->
        <button class="btn btn-primary m-5" (click)="sidenav.toggle()">
          <i class="fas fa-bars"></i>
        </button>
        <button class="btn btn-primary m-5" (click)="sidenav.toggleSlim()">
          <i class="fas fa-bars"></i>
        </button>
        <!-- Toggler -->
      </div>
    </div>
  </mdb-sidenav-content>
</mdb-sidenav-layout>

CSS classes for styling border:

.sidenav-link.active {
  border-right: 5px solid yellow !important;
}

.sidenav-link:hover {
  opacity: 75%;
  border-right: 5px solid white;
  transition: border 0s;
}

We hope it helps. If you have any further questions, feel free to ask.

Savic priority commented 2 years ago

Hi Seifert,

thank you for the answer. Your tips did help me indeed. With some styles/layout modifications, related component improvements and moving those styles in scss, I have reach my goal.

I did have one issue with the width when the sidenav mode is slim, when setting minimal with less then 77px (I assume that this comes from your sidenav component, possibly hardcoded in the component class). When setting minimal width of left part of sidenav item that is less then 77px, even if I use "slim" option. enter image description here

Do you know what might cause this issue? I mean, its find to be 77px, but I'm just courious.

Looking good when width of left part of sidenav item is 77px. Expanded enter image description here Collapsed

One more question. Why did you set backdrop and focusTrap options? How they affect sidebar nav? Can you please elaborate?

Best regards,

Novak

<p>Hi Seifert,</p>

<p>thank you for the answer. Your tips did help me indeed. With some styles/layout modifications, related component improvements and moving those styles in scss, I have reach my goal. </p>

<p>I did have one issue with the width when the sidenav mode is slim, when setting minimal with less then 77px (I assume that this comes from your sidenav component, possibly hardcoded in the component class). When setting minimal width of left part of sidenav item that is less then 77px, even if I use "slim" option. 
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/3d0837d8-c08f-4d3d-9c7c-b08e7976d1aa-Slim%20width%20issue.jpg" alt="enter image description here" title=""></p>

<p>Do you know what might cause this issue? I mean, its find to be 77px, but I'm just courious.</p>

<p>Looking good when width of left part of sidenav item is 77px.
Expanded
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/9a085056-1a8d-4ad4-85c4-ddd15342fe69-Sidebar%20Expanded.jpg" alt="enter image description here" title="">
Collapsed
<img src="https://usercontent.mdbootstrap.com/mdb-images/support/3c58a517-fa47-4223-82ce-2f0ec061cb0e-Sidebar%20Clollapsed.jpg" alt="enter image description here" title=""></p>

<p>One more question. Why did you set backdrop and focusTrap options?
How they affect sidebar nav? Can you please elaborate?</p>

<p>Best regards,</p>

<p>Novak</p>

Please insert min. 15 characters.

Rafał Seifert free commented 2 years ago

You can customize the minimal width of a slim sidenav with @Input slimWidth property. The default value is 77 px indeed (we have mistake in our docs saying that it is 70 px). You should equalize the slimWidth input value with the width of your left-sided part of sidenav to avoid any problems.

@Input backdrop is optional. It lets you determine whether you want to add backdrop in an over mode or not.

@Input focusTrap is optional. It traps your focus (for example when user uses TAB button to maneuver on the site ) to the area of sidenav html element if true.

Here is link to our Sidenav API section where you can read about all options https://mdbootstrap.com/docs/angular/navigation/sidenav/#docsTabsAPI

Please insert min. 15 characters.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 3.0.0
Device: Any
Browser: Any
OS: Any
Provided sample code: No
Provided link: No

Savic

0Support score
4Questions 1Answers 1Snippets