dashmachine left menu

dashmachine-left-menu.markdown

dashmachine left menu

A Pen by szobek on CodePen.

License.

index.html

<div ng-app="dmApp" ng-controller="MenuController" ng-click="close($event)" >
  <div id="menu_container">

    <div id="account_menu">
      <img src="http://imgdex.com/i/5040078a296c2.jpg" alt="user name" />
      <p class="user_name">Cserepes Virág <i class="fa fa-caret-down ce" ng-click="openContext()" id="cmenu"></i></p>
      <p class="title">Backoffice manager</p>
      
      <div id="context_menu" ng-class="context ? 'show' : ''">
        <ul>
          <li class="ce"><a href class="ce">Profile</a></li>
          <li class="ce"><a href class="ce">Contacts</a></li>
          <li class="ce"><a href class="ce">Mailbox</a></li>
          <li class="ce divider"> </li>
          <li class="ce"><a href class="ce">Logout</a></li>
        </ul>
      </div>
      <hr />
      
    </div>

    <ul id="side_menu">
      <li class="active">
        <div class="fa-container"><i class="fa fa-home"></i></div>
        <a href class="menu_text">Home</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-clock-o"></i></div> 
        <a href class="menu_text">Timesheet</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-bar-chart"></i> </div>
        <a href class="menu_text">Reports</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-user"></i> </div>

        <a href class="menu_text">Users</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-briefcase"></i> </div>
        <a href class="menu_text">Projects</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-users"></i> </div>
        <a href class="menu_text">Clients</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-check-square"></i> </div>
        <a href class="menu_text">Approves</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-spinner fa-pulse"></i> </div>
        <a href class="menu_text">Pending</a>
      </li>
      <li>
        <div class="fa-container"><i class="fa fa-cog"></i> </div>
        <a href class="menu_text">Setup</a>
      </li>

    </ul>

  </div>

  <div id="page">
    <div id="header">
      <div id="buttons">
        <div id="close_menu" ng-click="closeMenu()"><i class="fa fa-bars"></i></div>
        <div id="header_butoons"></div>
        <div id="header_text"></div>
        <div id="header_search"></div>
      </div>
    </div>
    <section id="">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

      Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
    </section>
   
  </div>
</div>

script.js

var app = angular.module('dmApp',[]);

app.controller('MenuController', function($scope) {
  $scope.line = true;
  $scope.context = false;
  
  $scope.init = function() {
    window.onresize = $scope.resize;
    
//     document.addEventListener("click", function(e) {
//       if(e.target.className !== "ce" ||  e.target.className === "" ) {
//         if(e.target.className === "fa fa-caret-down ce" ) {  return; }
//         // console.log(e.target.className , $scope.context)
//         if($scope.context) {
//             var t = setTimeout(function() {
//               console.log('mehet, eddig: ' + $scope.context)
//               $scope.context = false;
//               console.log('ezután: ' +  $scope.context)
//             }, 1000)
//         }
        
//       } 


//     })
  }
  
  $scope.close = function($event) {
    e = $event
    if(e.target.className !== "ce" ||  e.target.className === "" ) {
        if(e.target.className === "fa fa-caret-down ce" ) {  return; }
        if($scope.context) {
          $scope.context = false;
        }
        
      } 

  }
  
  
  
  $scope.closeMenu = function() {
    var w = window.innerWidth

    if(w < 768) {
      if(document.querySelector('#page').className === 'menu_small' || $scope.line ) {
        document.querySelector('#page').className = 'menu_hide'
        document.querySelector('#menu_container').className = 'menu_hide'
        document.querySelector('#account_menu').className = 'menu_hide'
        $scope.context = false

        $scope.line = false
      } else {
        document.querySelector('#page').className = 'menu_small'
        document.querySelector('#menu_container').className = 'menu_small'
        document.querySelector('#account_menu').className = 'menu_small'
        $scope.line = true
        $scope.context = false
      }
    } else {
      if(document.querySelector('#page').className === 'menu_small') {
        document.querySelector('#page').className = ''
        document.querySelector('#menu_container').className = ''
        document.querySelector('#account_menu').className = ''
        
        $scope.line = true
      } else {
        document.querySelector('#page').className = 'menu_small'
        document.querySelector('#menu_container').className = 'menu_small'
        document.querySelector('#account_menu').className = 'menu_small'
        $scope.line = true
        $scope.context = false
      }
    }
  
  }
  
  $scope.resize = function() {
    line = $scope.line
    
    var w = window.innerWidth
    if(w<768) {
      console.log('<768', line)
      if(line) {
        document.querySelector('#page').className = 'menu_small'
        document.querySelector('#menu_container').className = 'menu_small'
      } else {
        document.querySelector('#page').className = 'menu_small'
        document.querySelector('#menu_container').className = 'menu_small'
      }
      document.querySelector('#account_menu').className = 'menu_hide'

    } else {
      if(!line ) {
        document.querySelector('#page').className = '';
        document.querySelector('#menu_container').className = '';
        document.querySelector('#account_menu').className = ''
      } else {

      }

    }
  }
  
  $scope.openContext = function() {
    if($scope.context) {
      $scope.context = false;
    } else {
      $scope.context = true;
    }
  }
  
  $scope.init();
  
  
  
  

  
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>

style.sass

$menuWidthBig: 180px
$menuWidthSmall: 40px
$menuHide: 0px
$blue: #3366ff
$menuBg: #1c7f7d
$menuHover: #186d69
$menuColor: white
$menuFontSize: 18px
$contentBg: #f3f3f3
$transition: 0.8s all
$break-large: 768px

html, body 
  height: 100%
  margin: 0
  user-select: none
  -webkit-user-select: none
  -moz-user-select: none
  -o-user-select: none

#side_menu, #close_menu, #account_menu .fa.fa-caret-down
  cursor: pointer      

#menu_container, #page, #account_menu  
  transition: $transition
  -webkit-transition: $transition
  -moz-transition: $transition
  -o-transition: $transition
  
  
#menu_container
  z-index: 1
  font-family: 'Roboto', sans-serif
  width: $menuWidthBig
  height: 100%
  // overflow: auto
  background: $menuBg
  position: fixed
  -webkit-box-shadow: inset -3px -3px 11px -2px rgba(0,0,0,0.75)
  -moz-box-shadow: inset -3px -3px 11px -2px rgba(0,0,0,0.75)
  box-shadow: inset -3px -3px 11px -2px rgba(0,0,0,0.75)
  @media screen and (max-width: $break-large) 
    width: $menuWidthSmall
  &.menu_small
    width: $menuWidthSmall
  &.menu_hide
    width: $menuHide
  & , #side_menu
  #account_menu
    height: 175px
    width: 100%
    text-align: center
    opacity: 1
    #context_menu
      width: 150px
      height: 165px
      background: white
      position: fixed
      top: 120px
      left: -170px
      border: 1px solid rgba(200,200,200,0.8)
      border-radius: 3px
      z-index: 1000  
      transition: $transition
      color: #262626
      ul
        list-style-type: none
        -webkit-margin-before: 0px
        -webkit-margin-after: 0px
        -webkit-padding-start: 0px
        cursor: pointer
        li
          text-align: left
          padding: 10px 0
          &:hover
            background: rgba(200,200,200,0.8)
            a
              color: white
          a
            border-radius: 3px
            margin: 4px
            text-align: left
            font-weight: 400
            text-decoration: none
            color: #676a6c
            font-size: 12px
            padding: 10px
          &.divider
            height: 0px
            border: 1px solid #e5e5e5
            padding: 0
            &:hover
              background: none
            cursor: auto
        
      &.show
        -webkit-transform: translate( 190px ,0 )
        -moz-transform: translate( 190px ,0 )
        -o-transform: translate( 190px ,0 )
        -ms-transform: translate( 190px ,0 )
        transform: translate( 190px ,0 )
        
    img
      width: 60px
      // border: 3px solid white
      border-radius: 50%
      -webkit-border-radius: 90%
      -moz-border-radius: 50%
      -o-border-radius: 50%
      margin-top: 20px
    hr 
      border: 2px solid $menuHover
    .user_name, .title
      text-align: center
      color: $menuColor
    .title
      font-weight: 100
    &.menu_small, &.menu_hide
      height: 0px
      width: 0px
      opacity: 0
      transform: scale(0)
      -webkit-transform: scale(0)
      -moz-transform: scale(0)
      -o-transform: scale(0)
    @media screen and (max-width: $break-large) 
      height: 0px
      width: 0px
      opacity: 0
      transform: scale(0)
      -webkit-transform: scale(0)
      -moz-transform: scale(0)
      -o-transform: scale(0)
    @media screen and (max-width: $break-large) 
  #side_menu
    list-style-type: none
    -webkit-padding-start: 0
    overflow: hidden
    .fa-container
      display: inline-block
      width: 20px
      text-align: center
    .fa
      color: $menuColor
      
    li
      padding: 10px
      font-size: $menuFontSize
      width: $menuWidthBig - 20
      overflow: hidden
      &:hover 
        background: $menuHover
      &.active
        color: red
        -webkit-box-shadow: inset 3px 0px 0px 0px rgba(41,56,70,1)
        -moz-box-shadow: inset 3px 0px 0px 0px rgba(41,56,70,1)
        box-shadow: inset 3px 0px 0px 0px rgba(41,56,70,1)
      &:hover a
        color: $menuColor
      a
        text-decoration: none
        font-size: $menuFontSize
        color: $menuColor
        margin-left: 10px

        
#page
  width:auto
  min-height: 1000px
  height: auto
  z-index: 2
  background: $contentBg
  margin-left: $menuWidthBig
  padding: 15px
  @media (max-width: $break-large) 
    margin-left: $menuWidthSmall
  &.menu_small
    margin-left: $menuWidthSmall
  &.menu_hide
    margin-left: $menuHide
  #header
    width: 100%
    height: 60px
    background: white
    margin: -15px auto auto -15px
    padding-right: 30px
    #buttons
      #close_menu
        background: $menuBg
        display: inline-block
        width: 60px
        height: auto
        padding: 5px
        border-radius: 10px
        color: $menuColor
        text-align: center
        font-size: 20px
        margin: 15px