<style>
    #groups {
        max-height: 300px;
    }
    .profile-nav-pic{
      vertical-align: middle;
    margin-right: 5px;
    display: inline-block;
    width: 45px;
    max-height: 45px;
}
.profile_name{
    display: inline-block;
    font-size: 20px;
    font-weight: 300;
}
.noti_feeds_img {
    height: 200px !important;
}

.load_more {
    text-align: center;
    border: 1px solid #fff;
    border-radius: 13px;
    margin-bottom: 7px;
    background: palevioletred;
}
    .slimScrollDiv {
        height:auto!important;
    }
    .collection{
        height:auto!important;
    }

.load_more a {
    color: #fff !important;
}
.myBadge {
    min-width: 3rem;
    padding: 2px 4px;
    text-align: center;
    font-size: 0.9rem;
    color: white;
    right: 15px;
    box-sizing: border-box; 
    background: red;
    border-radius:20%;
}
 .mysidenav {
    max-height:400px;
    width:450px;
    color:black;
    line-height:20px !important;
    background-color: #fff;
    padding: 5px 15px 0px 15px;
    border-radius:0px 0px 4px 4px;
    border: 1px solid rgba(100, 100, 100, .4);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    overflow:auto !important;
    margin-left:85px;

}
/*.mysidenav:after {
    content:"";
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #fff;
    position:absolute;
    margin-left:215px;
    top:-10px;
}*/
.mysidenav .myInner {
    background:#f2f2f2;
    padding:10px;
    cursor:pointer;
    border-radius:8px;
    font-size:13px;
    border:1px solid #d9d9d9;
    margin-bottom:10px;
        white-space: initial;
}
.mysidenav .myInner:hover {
    box-shadow:0px 0px 8px -2px black;    
}
.mysidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color:black;
    display: block;
    transition: 0.3s;
}

.mysidenav a:hover {
    color: #ccc;
}
</style> 
 <!-- START HEADER -->
    <header id="header" class="page-topbar">
        <!-- start header nav-->
        <div class="navbar-fixed">
            <nav class="grey lighten-2">
                <div class="nav-wrapper">
                    <h1 class="logo-wrapper"><a href="#dashboard" class="brand-logo darken-1"><img src="../contents/socioboard/images/Socioboard.png" alt="Socioboard"></a> <span class="logo-text">Socioboard</span></h1>
                    <ul class="right hide-on-med-and-down">
                        <!--<li>    
                            <a href="javascript:void(0);" class="waves-effect waves-block waves-light show-search">
                                <i class="mdi-action-search  grey-text text-darken-4"></i>
                            </a>                              
                        </li>-->
                        
                        <!--<li>
                            <a href="javascript:void(0);" class="waves-effect waves-block waves-light toggle-fullscreen">
                                <i class="icon-size-fullscreen  grey-text text-darken-4"></i>
                            </a>
                        </li>-->
                        <li>
                            <div style="padding: 0px 5px;">
                                <a href="#/upgradeplan" class="btn btn_style orange" ng-if="AccountType!=7" style="height: 28px; line-height: 28px;  border-radius: 3px;">Upgrade Plan</a>
                            </div>
                        </li>
                        <li>
                            <div class="margin-top-10">
                                <a href="http://twitter.com/share" class="twitter-share-button" data-size="large" data-text="@Socioboard Hey Heroes! I could use a hand. :)" data-count="vertical" data-url=" " data-via="" data-hashtags="SocioboardSupport" data-related="Socioboard" data-lang="en" data-dnt="true" data-show-count="false">Tweet Us</a>
                                <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="waves-effect waves-block waves-light dropdown-button" data-activates='help'>
                                <i class="icon-earphones-alt grey-text text-darken-4" title="help"></i>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="waves-effect waves-block waves-light dropdown-button" data-activates='groups'>
                                <i class="icon-users grey-text text-darken-4" title="Team"></i>
                            </a>
                        </li>
                        <!--emailid change feature header-->
                        <!-- Dropdown Trigger -->
                        <li>
                            <!--<a  data-activates="chat-out" class="waves-effect waves-block waves-light chat-collapse">
                                <i class="icon-bell grey-text text-darken-4" title="Notifications"><span class="badge_notify" ng-if="notifycount>0">{{notifycount}}</span></i>
                            </a>-->
                            <a href="javascript:void(0)" class="waves-effect waves-block waves-light dropdown-button" data-activates='myNotification'>
                                <i id="temp" class="icon-bell grey-text text-darken-4" title="Notifications"><span class="myBadge" ng-if="notifycount>0">{{notifycount}}</span></i>   
                            </a>
                            <!--<a ng-href="#/notification_all" class="waves-effect waves-block waves-light">
                                <i class="icon-bell grey-text text-darken-4" title="Notifications"><span class="badge_notify" ng-if="notifycount>0">{{notifycount}}</span></i>
                            </a>-->
                        </li>
                       <li>
                            <!--<a href="javascript:void(0)" class="waves-effect waves-block waves-light dropdown-button" data-activates='account_list'>
                                <i class="icon-settings grey-text text-darken-4" title="Account Settings"></i>
                            </a>-->
                           <a ng-if="profilePicExist == 1" href="javascript:void(0)" class="waves-effect waves-block waves-light dropdown-button" data-activates='account_list'>
                               <img src="{{user.ProfilePicUrl}}" alt="{{user.UserName}}" title="{{user.FirstName}}" class="circle profile-nav-pic "><i class="fa fa-sort-desc grey-text text-darken-4" aria-hidden="true"></i>
                           </a>
                           <a ng-if="profilePicExist == 0" href="javascript:void(0)" class="waves-effect waves-block waves-light dropdown-button" data-activates='account_list'>
                               <img src="{{user.ProfilePicUrl}}" alt="{{user.UserName}}" title="{{user.FirstName}}" class="circle profile-nav-pic "><i class="fa fa-sort-desc grey-text text-darken-4" aria-hidden="true"></i>
                           </a>
                        </li>
                    </ul>
                    <!-- Help -->
                    <ul id='help' class='dropdown-content dropdown-content-small'>
                        <li>
                            <a href="#get_touch" class="waves-effect waves-orange white-text">
                                <span class="groupslist"><i class="icon-envelope"></i>Get In Touch</span>
                            </a>
                        </li>
                       <li>
                            <a href="https://www.youtube.com/channel/UCcxAmhWPh6AXfpaG2Eq4pzw" class="waves-effect waves-orange  white-text" target="_blank">
                                <span class="groupslist"><i class="icon-social-youtube"></i>Youtube Tutorials </span>
                            </a>
                        </li>
                        <li>
                            <a href="#/upgradeplan" class="waves-effect waves-orange  white-text">
                                <span class="groupslist"><i class="icon-basket"></i>Pricing</span>
                            </a>
                        </li>
                        <li>
                            <a href="https://www.socioboard.com/Index/FAQ" target="_blank" class="waves-effect waves-orange  white-text">
                                <span class="groupslist"><i class="icon-question"></i>FAQs</span>
                            </a>
                        </li>
                    </ul>

                    <!-- Groups for all plan -->
                    <ul id='groups' class='dropdown-content dropdown-content-small'>
                        <li ng-repeat="grp in groups">
                            <span class="grey grey-text text-lighten-4" ng-if="groupId==grp.id">{{grp.groupName}}</span>
                            <span ng-click="changeGroup(grp.id)" ng-if="groupId!=grp.id">{{grp.groupName}}</span>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#/groups" class="grey-text text-darken-4">View Team</a></li>
                        <li><a href="#/groups">Create New</a></li>
                    </ul>
                    <!-- Accounts Structure -->
                    <ul id="account_list" class='dropdown-content dropdown-content-small'>
                        <div class="account_scroll">
                            <li>
                                <a href="#/profilesettings">
                                    <span class="groupslist"><i class="icon-user"></i>Profile Settings </span>
                                </a>
                            </li>
                            <li>
                                <a href="#/youtubegroup">
                                    <span class="groupslist"><i class="icon-social-youtube"></i>YT Team Invite </span>
                                </a>
                            </li>
                            <li>
                                <a href="#/access_passwd">
                                    <span class="groupslist"><i class="icon-key"></i>Access Password</span>
                                </a>
                            </li>
                            <li>
                                <a href="#/billing">
                                    <span class="groupslist"><i class="icon-credit-card"></i>Billing</span>
                                </a>
                            </li>
                            <li>
                                <a href="#/mail_settings">
                                    <span class="groupslist"><i class="icon-envelope-letter"></i>Email Settings</span>
                                </a>
                            </li>
                            <li>
                                <a href="#/extensions">
                                    <span class="groupslist"><i class="icon-screen-desktop"></i>Apps </span>
                                </a>
                            </li>
                            <li>
                                <a href="#/link_shortening">
                                    <span class="groupslist"><i class="icon-link"></i>Link Shortening</span>
                                </a>
                            </li>
                            <li>
                                <a href="#/ewalletlist">
                                    <span class="groupslist"><i class="icon-wallet"></i>E-wallet </span>
                                </a>
                            </li>
                            <li>
                                <a href="#/referral">
                                    <span class="groupslist"><i class="fa fa-money"></i>Referral </span>
                                </a>
                            </li>
                            <li>
                                <a href="#/ads_offer">
                                    <span class="groupslist"><i class="icon-star"></i>Always Free</span>
                                </a>
                            </li>
                            <li>
                                <a href="#/upgradeplan">
                                    <span class="groupslist"><i class="icon-present"></i>Upgrade Plan</span>
                                </a>
                            </li>
                            <li>
                                <!--<a ng-click="logout()"><i class="mdi-hardware-keyboard-tab"></i> Logout</a>-->
                                <a ng-click="logout()">
                                    <span class="groupslist"><i class="icon-logout"></i>Sign Out</span>
                                </a>
                            </li>
                         </div>
                    </ul>
                    <!-- notification -->
                    <div class="dropdown-content dropdown-content-small mysidenav" id='myNotification'>
                        <h6 class="feeds_title blue darken-4 white-text" style="text-align:center;padding:10px;margin-bottom:15px;">Your notifications</h6>
                        <div class="myInner" ng-repeat="profile in lstsinglepass" ng-if="notifycount!=0">
                            <strong style="font-size:14px!important;">'{{profile}}'</strong><span style="color:black!important;display:block;line-height:20px !important;">facebook account password has change ,please reconnect respective account or page from 'Myfeeds' module !!</span>
                        </div>
                        <div ng-if="notifycount==0">
                            <p>NO DATA</p>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        
        <!-- end header nav-->
    </header>
    <!-- END HEADER -->


            <!-- START RIGHT SIDEBAR NAV-->
            <aside id="right-sidebar-nav">
                <ul id="chat-out" class="notify_side-nav side-nav rightside-navigation">
                    <!--<li class="li-hover">
                        <a href="#" data-activates="chat-out" class="chat-close-collapse right"><i class="mdi-navigation-close"></i></a>
                    </li>-->
                    <li class="li-hover">
                        <div class="blue white-text active"><i class="mdi-social-whatshot"></i>Notifications</div>
                            <a ng-href="#/notification_all" class="no-space center blue-text text-darken-4" style="height:20px;">See all</a>
                            <ul class="chat-collapsible">
                                <li ng-repeat="notify in lstnotifications">
                                    <a ng-href="#/notification_all" terget="_blank" class="recent-activity-list chat-out-list row no-space" style="height:auto;">
                                        <div class="col s3 recent-activity-list-icon">
                                            <img src="{{notify.picUrl}}" class="responsive-img circle" />
                                        </div>
                                        <div class="col s9 recent-activity-list-text margin-top-10">
                                            <h6 class="no-space">{{notify.socialprofileName}}</h6>
                                            <span class="">{{notify.localscheduletime |date:'medium'}}</span>
                                        </div>
                                        <div class="col s12">
                                            <span class="truncate">{{notify.shareMessage}}</span>
                                            <h6 ng-if="notify.status==1" class="center success_box">Message Sent Successfully</h6>
                                            <h6 ng-if="notify.status==0" class="center error_box">Message Not Sent</h6>
                                        </div>
                                    </a>
                                </li>                               
                            </ul>
                        </li>
                     </ul>
            </aside>
            <!-- LEFT RIGHT SIDEBAR NAV-->

<!-- Notification modal for password change -->
<!--<div id="myNotification" class="modal">
    <div class="modal-content"  id="content" style="background:#ff6600;border:none!important;">
          
            <div class="row" style="margin-bottom:0!important;">
                <div class="col offset-s1 s10 offset-m1 m10 offset-l1 l10">
                    <div class="card" id="feeds">
                        <h5 class="feeds_title blue darken-4 white-text" style="text-align:center;">Your notifications</h5>
                        <ul class="collection facebookfeeds" style="padding:20px 30px!important;height:auto!important;">
                            <li class="card" ng-repeat="profile in lstsinglepass">
                                <a terget="_blank" class="recent-activity-list chat-out-list row no-space">
                                    <div class="col s12 recent-activity-list-text margin-top-10" style="font-size:large;">
                                        <strong>'{{profile}}'</strong> <span style="color:black!important;">facebook account password has change ,please reconnect respective account or page from 'Myfeeds' module !!</span>
                                    </div>
                                </a>
                             
                            </li>
                           
                        </ul>
                      

                        <div class="load_more" ng-if="notifycount !=0" id="load_more_toggle">
                          
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>-->

<script type="text/javascript">
    $('.account_scroll').slimScroll({
        color: '#3B5998',
        size: '10px',
        height: '350px',
        alwaysVisible: true,
        allowPageScroll: true
    });
</script>
<!--<script>
    var i = 0;
    function openNav() {
        if (i % 2 == 0) { 
            document.getElementById("mySidenav").style.display = "block";
            i++;
        }
        else{
            document.getElementById("mySidenav").style.display = "none";
            i++;
        }
        
    }

    window.addEventListener("click", function (event, mySidenav, temp) {
        var a = document.getElementById("mySidenav");
        var b = document.getElementById("temp");
        if (event.target !== a && event.target !== b) {
            a.style.display = "none";
        } else if (event.target == b) {
            if (a.style.display == "none"){
                a.style.display = "block";
            } else {
                a.style.display = "none";
            }
        } else if (event.target == a) {
            a.style.display = "block";
        }
        console.log(event.target);
    });
     
        
</script>-->


