Menu icon Foundation
Sidebar with 3 states

Hello here :) ,

 

I want your advice before starting the integration of my new Dashboard. My Dashboard have a sidebar with 3 states like this :

 

The behavior is simple, if we are on large the default state is the first. And we can switch from the first and second state with the menu-icon in the title-bar. If we are on medium the default state is the second one. And we switch from the second and the first with the menu-icon. On mobile we are by default in the third state and we can open the menu (vertical, under the title-bar) with the menu-icon.

 

What is the best way for doing that ?

 

I know bootstrap is overused in dashboard integration but I don't like overwrite thousand of css rules

 

Thanks :)

dashboardsidebar

Hello here :) ,

 

I want your advice before starting the integration of my new Dashboard. My Dashboard have a sidebar with 3 states like this :

 

The behavior is simple, if we are on large the default state is the first. And we can switch from the first and second state with the menu-icon in the title-bar. If we are on medium the default state is the second one. And we switch from the second and the first with the menu-icon. On mobile we are by default in the third state and we can open the menu (vertical, under the title-bar) with the menu-icon.

 

What is the best way for doing that ?

 

I know bootstrap is overused in dashboard integration but I don't like overwrite thousand of css rules

 

Thanks :)

Rafi Benkual over 3 years ago

That's basically the behavior that is happening here: http://zurb.com/responsive

You can start with the reveled off canvas http://foundation.zurb.com/sites/docs/off-canvas.html#reveal-on-larger-screens

Then at the medium brekpoint, change the width of the off-canvas so only the icons show. This is the CSS that controlls the width and how far it's pushed over.

.off-canvas.position-left {
    left: -250px;
    top: 0;
    width: 250px; }
    .is-open-left {
      -webkit-transform: translateX(250px);
          -ms-transform: translateX(250px);
              transform: translateX(250px); }

Let us know how it goes!

VIncent Kosciuszko over 3 years ago

Hello Rafi,

The problem is not really the css because I've already try and yes with the off-canvas I work pretty well. (just need to change the width on the off-canvas and the margin-left (on the canvas-content).


My problem is with the state 2. First on the design you can see in the state 2 the title-bar is 100% with, i don't think it's possible with off-canvas. And when we are in state 2 I need a dropdown menu vertical. And on state 1 a classic dropdown menu. and one more time the class .vertical-only-medium does not exist I beleive.

And when we are on mobile I don't want an off-canvas but a classic dropdown menu under the title bar. Can I do that with foundation ? Or I need to clone the menu and hide it on medium & large ?

Rafi Benkual over 3 years ago

I don't see why not, though if you share your code it may be easier to guide you.

You'll need to hide this part on medium:

VIncent Kosciuszko over 3 years ago

Ok so I've try to get the design working with off-canvas. I've two main problems, first the title-bar is not 100% with when the sidebar is collapse (state 2), and with this way the off-canvas basic behavior is broken by my css.

Here is the code :

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KittenBoard</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600|Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/app.css">
 </head>
 <body>

    <div class="off-canvas-wrapper">
        <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
            <div class="off-canvas position-left reveal-for-medium" id="sidebar" data-off-canvas>
                <ul class="menu vertical">
                    <li><a href="#"><i class="fa fa-th-large"></i> <span>Dashboard</span></a></li>
                    <li><a href="#"><i class="fa fa-font"></i> <span>Typography</span></a></li>
                    <li><a href="#"><i class="fa fa-align-left"></i> <span>UI Interface</span></a></li>
                    <li><a href="#"><i class="fa fa-check-square-o"></i> <span>Forms</span></a></li>
                    <li><a href="#"><i class="fa fa-table"></i> <span>Tables</span></a></li>
                    <li><a href="#"><i class="fa fa-line-chart"></i> <span>Charts</span></a></li>
                    <li><a href="#"><i class="fa fa-calendar-o"></i> <span>Calendar</span></a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i> <span>Pages</span></a></li>
                </ul>
            </div>
            <div class="off-canvas-content" data-off-canvas-content>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li><a href="#" class="sidebarIcon"><i class="fa fa-bars"></i></a></li>
                            <li><form action="#" method="get"><input type="search" placeholder="Search Dashboard" class="search"></form></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a href="#"><i class="fa fa-expand"></i></a></li>
                            <li><a href="#"><i class="fa fa-flag"></i></a></li>
                            <li><a href="#"><i class="fa fa-envelope"></i></a></li>
                            <li><a href="#"><i class="fa fa-ellipsis-v"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/what-input/what-input.js"></script>
    <script src="bower_components/foundation-sites/dist/foundation.js"></script>
    <script src="js/app.js"></script>

    <script>
    $( document ).ready(function() {
        var sidebar = $("#sidebar");
        var menuIcon = $(".sidebarIcon");

        menuIcon.click(function(){
            if(sidebar.hasClass('expand')){
                sidebar.removeClass('expand')
            }
            else{
                sidebar.addClass('expand');
            }
            return false;
        });

    });
    </script>
</body>
</html>

 

#sidebar{
    width: 50px;
    min-height: 100vh;
    background-color: #2f323a;

    &.expand{
        width: 230px;
        border-right: 5px solid rgba(255, 255, 255, .2);

        .menu{
            li{
                width: 200px;
                padding-left: 30px;
                text-align: left;
                span{
                    display: inline;
                }
            }
        }
    }

    .menu{
        
        li{
            width: 50px;
            text-align: center;
            span{
                display: none;
            }
        }

        a{
            color: #eeeeee;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 12px;
            padding: 20px 0;
        }
    }
}

.top-bar{
    background: #fff;

    .menu{
        background: #fff;
    }

    a{
        color: #2f323a;
    }

    .search{
        border: none;
        background: #f4f5f7;
        color: #2f323a;
        width: 213px;
        height: 33px;
        padding-left: 10px;
        box-shadow: none;
    }
}

.position-left.reveal-for-medium ~ .off-canvas-content{
    margin-left: 50px;
}

.position-left.reveal-for-medium.expand ~ .off-canvas-content{
    margin-left: 230px;
}

 

Here is the screenshots :

Everything is good

Title-bar is not 100% with

 

broken

 

Thanks again for help Rafi