How to implement Bootstrap Sidebar in MVC 5

html css asp.net asp.net-mvc twitter-bootstrap

10,234

To keep the solution simple I would create two layouts:

_Layout.cshtml
_LayoutNoSidebar.cshtml

To toogle sidebar, include this template in your _Layout.cshtml: https://blackrockdigital.github.io/startbootstrap-simple-sidebar/

10,234

Author by

Pow4Pow5

Updated on June 04, 2022

Comments

Pow4Pow5 almost 2 years

I am wanting to implement a navigation sidebar in MVC 5, but I couldn't find any built in classes in the Bootstrap 3that came with the project. I've tried with the following code:

_Layout.cshtml

<body>
//the sidebar code is here...
<div id="Wrapper">
    <ul>
        <li>hello</li>
        <li>Project</li>
        <li>Account settings</li>
    </ul>
</div>
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content" id="page-content-wrapper">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year/p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Custom.css" rel="stylesheet" />
@RenderSection("scripts", required: false)

CSS

#Wrapper {
background-color: #3F51B5;
z-index:1;
height: 100%;
width:300px;
position:fixed;
}

#page-content-wrapper{
margin-left:300px;
}

So far, what I've done is that I put a margin-left: 300px to the page content and add a <div id="Wrapper"> to encapsulate the side navigation bar and have styling to it. The results I get is as below:

However, I found out these problems with this implementation:

If I put the side menu in the _Layout.cshtml means that every page will have that side menu . But I would like the side menu to appear only when a user logged in.
If I put the side menu in each individual View, this will cause the ugly white space at the left side of the page since every View is rendered in @RenderBody().
If I put the side menu in the _Layout.cshtml, how do I include the jQuery code to toggle and hide the side menu when a button is clicked?

Is there any better implementation of this?