CODEWITHSUNDEEP
htmlcssbootstrap-4
chobo2
chobo2

Reputation: 85845

Making a Collapsible Sidebar Nav in Bootstrap 4?

I am wondering if someone can help me get started on how I could create a sidebar nav like on this template. I was thinking of buying the template and going through the code that way but I think it comes with a ton of stuff that might just confuse me.

I am trying to understand how make it so on a large screen you will see

enter image description here

or

enter image description here

but on mobile you will see the hamburger menu

enter image description here

So far I got this

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col-2 collapse d-md-flex bg-light pt-2 h-100" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-cog"></i>
                        <span class="badge badge-dark">4</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Analytics</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Export</a>
                </li>
            </ul>
        </div>
        <div class="col pt-2">
            <div class="row w-100">
                <div class="col-12 pt-2" style="background:coral;">
                </div>
            </div>
            <div class="row w-100">
                fakdfkaf
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Views: 14765

Answers (1)

tao
tao

Reputation: 90208

This should get you started: 

#sidebar {
  max-width: 240px;
}
#sidebar nav {
  width: 100%;
}
@media (max-width: 768px) {
  #sidebar {
    max-width: 48px;
  }
  #sidebar .nav-link span {
    position: absolute;
    opacity: 0;
  }
}

@media (max-width: 576px) {
  #sidebar {
    max-width: 0;
    overflow-x: hidden;
  }
}

Proof of concept (I had to tweak your markup):

body,html {height: 100%;}
#sidebar {
  max-width: 240px;
}
#sidebar nav {
  width: 100%;
}
@media (max-width: 768px) {
  #sidebar {
    max-width: 48px;
  }
  #sidebar .nav-link span {
    position: absolute;
    opacity: 0;
  }
}

@media (max-width: 576px) {
  #sidebar {
    max-width: 0;
    overflow-x: hidden;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet"/>

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="col d-md-flex bg-light h-100 p-0" id="sidebar">
            <ul class="nav flex-column flex-nowrap">
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="fas fa-cog"></i>
                        <span class="badge badge-dark">4</span>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                      <i class="fas fa-chart-line"></i>
                      <span>Analytics</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                       <i class="fas fa-random"></i>
                       <span>Export</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col pt-2">
            <div class="row">
                <div class="col-12 pt-2" style="background:coral;">
                </div>
            </div>
            <div class="row">
              <div class="col-12">
                fakdfkaf
              </div>
            </div>
        </div>
    </div>
</div>

Note: I strongly recommend against using Bootstrap v4 in a production env today. It's not bug-free cross-browser/cross-device. If you need a production ready, flexible and solid library to compensate for the lack of a frontend dev in your team, v4 is not that library. You should definitely stick with v3 for at least one more year.

v4 currently requires solid CSS knowledge (and a lot of work!) to be used into a prod env.

Upvotes: 1

Related Questions