Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline

New Group

New Contact

Generic placeholder image

Josephin Doei am not what happened . .

Generic placeholder image
Lary DoeAvalable
Generic placeholder image
Alicehear using Elite able
A
AliaAvalable
Generic placeholder image
SuzenAvalable
JD
Josephin DoeDon't send me image
Generic placeholder image
Lary Doenot send free msg
Desktop settings

you get lettest content at a time when data will updated

Application settings

Automaticaly take backup as par schedule

System settings

Allow to show public user message

Josephin Doe
Generic placeholder image

hello tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image
Generic placeholder image

can you help me?

8:20 a.m.

customizer


Menu Dropdown Icon
Menu List Icon
Top bar background
layout 8
To use this layout for your project add .layout-8 class in <body> tag.
                                                
                                                    <body class="layout-8">
                                                    </body>
                                                
                                            
Add below snippet at last content in .navbar-wrapper class
                                                
                                                    <!-- [ navigation menu ] start -->
                                                    <nav class="pcoded-navbar">
                                                        <div class="navbar-wrapper container">
                                                            .................
                                                            <ul class="navbar-nav ml-auto">
                                                            <li>
                                                                <div class="dropdown">
                                                                    <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                                                                    <div class="dropdown-menu dropdown-menu-right notification">
                                                                        <div class="noti-head">
                                                                            <h6 class="d-inline-block m-b-0">Notifications</h6>
                                                                            <div class="float-right">
                                                                                <a href="#!" class="m-r-10">mark as read</a>
                                                                                <a href="#!">clear all</a>
                                                                            </div>
                                                                        </div>
                                                                        <ul class="noti-body">
                                                                            <li class="n-title">
                                                                                <p class="m-b-0">NEW</p>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
                                                                                        <p>New ticket Added</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                            <li class="n-title">
                                                                                <p class="m-b-0">EARLIER</p>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
                                                                                        <p>Prchace New Theme and make payment</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
                                                                                        <p>currently login</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                                                                        <p>Prchace New Theme and make payment</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
                                                                                        <p>currently login</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                            <li class="notification">
                                                                                <div class="media">
                                                                                    <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                    <div class="media-body">
                                                                                        <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
                                                                                        <p>Prchace New Theme and make payment</p>
                                                                                    </div>
                                                                                </div>
                                                                            </li>
                                                                        </ul>
                                                                        <div class="noti-footer">
                                                                            <a href="#!">show all</a>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                </li>
                                                                <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                                                                <li>
                                                                    <div class="dropdown drp-user">
                                                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                                            <i class="icon feather icon-settings"></i>
                                                                        </a>
                                                                        <div class="dropdown-menu dropdown-menu-right profile-notification">
                                                                            <div class="pro-head">
                                                                                <img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
                                                                                <span>John Doe</span>
                                                                                <a href="auth-signin.html" class="dud-logout" title="Logout">
                                                                                    <i class="feather icon-log-out"></i>
                                                                                </a>
                                                                            </div>
                                                                            <ul class="pro-body">
                                                                                <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                                                                <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                                                                <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                                                                <li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </nav>
                                                    <!-- [ navigation menu ] end -->
                                                
                                            
Page Layout
                                                
                                                    <!DOCTYPE html>
                                                    <html lang="en">

                                                    <head>
                                                        <title></title>
                                                        <!-- HTML5 Shim and Respond.js IE10 support of HTML5 elements and media queries -->
                                                        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
                                                        <!--[if lt IE 10]>
                                                    		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
                                                    		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
                                                    		<![endif]-->
                                                        <!-- Meta -->
                                                        <meta charset="utf-8">
                                                        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
                                                        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                                                        <meta name="description" content="" />
                                                        <meta name="keywords" content="">
                                                        <meta name="author" content="" />

                                                        <!-- Favicon icon -->
                                                        <link rel="icon" href="../assets/images/favicon.ico" type="image/x-icon">
                                                        <!-- fontawesome icon -->
                                                        <link rel="stylesheet" href="../assets/fonts/fontawesome/css/fontawesome-all.min.css">
                                                        <!-- animation css -->
                                                        <link rel="stylesheet" href="../assets/plugins/animation/css/animate.min.css">
                                                        <!-- vendor css -->
                                                        <link rel="stylesheet" href="../assets/css/style.css">
                                                    </head>

                                                    <body class="layout-8">
                                                        <!-- [ Pre-loader ] start -->
                                                        <div class="loader-bg">
                                                            <div class="loader-track">
                                                                <div class="loader-fill"></div>
                                                            </div>
                                                        </div>
                                                        <!-- [ Pre-loader ] End -->

                                                        <!-- [ navigation menu ] start -->
                                                        <nav class="pcoded-navbar theme-horizontal">
                                                            <div class="navbar-wrapper container">
                                                                <div class="navbar-brand header-logo">
                                                                    <a href="index.html" class="b-brand">
                                                                        <div class="b-bg">
                                                                            E
                                                                        </div>
                                                                        <span class="b-title">Elite Able</span>
                                                                    </a>
                                                                    <a class="mobile-menu" id="mobile-collapse" href="#!"><span></span></a>
                                                                </div>
                                                                <div class="navbar-content sidenav-horizontal" id="layout-sidenav">
                                                                    <ul class="nav pcoded-inner-navbar sidenav-inner">
                                                                        <li class="nav-item pcoded-menu-caption">
                                                                            <label>Navigation</label>
                                                                        </li>
                                                                        <li data-username="dashboard Default Ecommerce CRM Analytics Crypto Project" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-home"></i></span><span class="pcoded-mtext">Dashboard</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                            <li class=""><a href="index.html" class="">Analytics</a></li>
                                                                            <li class=""><a href="dashboard-sale.html" class="">Sales</a></li>
                                                                            <li class=""><a href="dashboard-crypto.html" class="">Crypto</a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-username="Vertical Horizontal Box Layout RTL fixed static collapse menu color icon dark" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layout"></i></span><span class="pcoded-mtext">Page layouts</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                                <li class="pcoded-hasmenu"><a href="#!" class="">Vertical</a>
                                                                                    <ul class="pcoded-submenu">
                                                                                        <li class=""><a href="layout-static.html" class="" target="_blank">Static</a></li>
                                                                                        <li class=""><a href="layout-fixed.html" class="" target="_blank">Fixed</a></li>
                                                                                        <li class=""><a href="layout-menu-fixed.html" class="" target="_blank">Navbar fixed</a></li>
                                                                                        <li class=""><a href="layout-mini-menu.html" class="" target="_blank">Collapse menu</a></li>
                                                                                    </ul>
                                                                                </li>
                                                                                <li class=""><a href="layout-horizontal.html" class="" target="_blank">Horizontal</a></li>
                                                                                <li class=""><a href="layout-box.html" class="" target="_blank">Box layout</a></li>
                                                                                <li class=""><a href="layout-rtl.html" class="" target="_blank">RTL</a></li>
                                                                                <li class=""><a href="layout-light.html" class="" target="_blank">Light layout</a></li>
                                                                                <li class=""><a href="layout-dark.html" class="" target="_blank">Dark layout <span class="pcoded-badge label label-danger">Hot</span></a></li>
                                                                                <li class=""><a href="layout-menu-icon.html" class="" target="_blank">Color icon</a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-username="widget Statistic Data Table User card Chart" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-layers"></i></span><span class="pcoded-mtext">Widget</span><span class="pcoded-badge label label-info">100+</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                                <li class=""><a href="widget-statistic.html" class="">Statistic</a></li>
                                                                                <li class=""><a href="widget-data.html" class="">Data</a></li>
                                                                                <li class=""><a href="widget-chart.html" class="">Chart</a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li class="nav-item pcoded-menu-caption">
                                                                            <label>UI Element</label>
                                                                        </li>
                                                                        <li data-username="basic components Button Alert Badges breadcrumb Paggination progress Tooltip popovers Carousel Cards Collapse Tabs pills Modal Grid System Typography Extra Shadows Embeds" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-box"></i></span><span class="pcoded-mtext">Basic</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                                <li class=""><a href="bc_alert.html" class="">Alert</a></li>
                                                                                <li class=""><a href="bc_button.html" class="">Button</a></li>
                                                                                <li class=""><a href="bc_badges.html" class="">Badges</a></li>
                                                                                <li class=""><a href="bc_breadcrumb-pagination.html" class="">Breadcrumb & Paggination</a></li>
                                                                                <li class=""><a href="bc_card.html" class="">Cards</a></li>
                                                                                <li class=""><a href="bc_collapse.html" class="">Collapse</a></li>
                                                                                <li class=""><a href="bc_carousel.html" class="">Carousel</a></li>
                                                                                <li class=""><a href="bc_grid.html" class="">Grid System</a></li>
                                                                                <li class=""><a href="bc_progress.html" class="">Progress</a></li>
                                                                                <li class=""><a href="bc_modal.html" class="">Modal</a></li>
                                                                                <li class=""><a href="bc_spinner.html" class="">Spinner<span class="pcoded-badge label label-danger">NEW</span></a></li>
                                                                                <li class=""><a href="bc_tabs.html" class="">Tabs & pills</a></li>
                                                                                <li class=""><a href="bc_typography.html" class="">Typography</a></li>
                                                                                <li class=""><a href="bc_tooltip-popover.html" class="">Tooltip & popovers</a></li>
                                                                                <li class=""><a href="bc_toasts.html" class="">Toasts<span class="pcoded-badge label label-danger">NEW</span></a></li>
                                                                                <li class=""><a href="bc_extra.html" class="">Other</a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-username="advance components Alert gridstack lightbox modal notification pnotify rating rangeslider slider syntax highlighter Tour Tree view Nestable Toolbar" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-gitlab"></i></span><span class="pcoded-mtext">Advance</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                                <li class=""><a href="ac_alert.html" class="">Sweet alert</a></li>
                                                                                <li class=""><a href="ac-datepicker-componant.html" class="">Datepicker</a></li>
                                                                                <li class=""><a href="ac_gridstack.html" class="">Gridstack</a></li>
                                                                                <li class=""><a href="ac_lightbox.html" class="">Lightbox</a></li>
                                                                                <li class=""><a href="ac_modal.html" class="">Modal</a></li>
                                                                                <li class=""><a href="ac_notification.html" class="">Notification</a></li>
                                                                                <li class=""><a href="ac_nestable.html" class="">Nestable</a></li>
                                                                                <li class=""><a href="ac_pnotify.html" class="">pnotify</a></li>
                                                                                <li class=""><a href="ac_rating.html" class="">Rating</a></li>
                                                                                <li class=""><a href="ac_rangeslider.html" class="">Rangeslider</a></li>
                                                                                <li class=""><a href="ac_slider.html" class="">Slider</a></li>
                                                                                <li class=""><a href="ac_syntax_highlighter.html" class="">Syntax highlighter</a></li>
                                                                                <li class=""><a href="ac_tour.html" class="">Tour</a></li>
                                                                                <li class=""><a href="ac_treeview.html" class="">Tree view</a></li>
                                                                                <li class=""><a href="ac_toolbar.html" class="">Toolbar</a></li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-username="extra components Session Timeout Session Idle Timeout Offline" class="nav-item pcoded-hasmenu">
                                                                            <a href="#!" class="nav-link"><span class="pcoded-micon"><i class="feather icon-package"></i></span><span class="pcoded-mtext">Extra</span></a>
                                                                            <ul class="pcoded-submenu">
                                                                                <li class=""><a href="ec-session-timeout.html" class="">Session timeout</a></li>
                                                                                <li class=""><a href="ec-session-idle-timeout.html" class="">Session idle timeout</a></li>
                                                                                <li class=""><a href="ec-offline.html" class="">Offline</a></li>
                                                                            </ul>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                                <ul class="navbar-nav ml-auto">
                                                                <li>
                                                                    <div class="dropdown">
                                                                        <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                                                                        <div class="dropdown-menu dropdown-menu-right notification">
                                                                            <div class="noti-head">
                                                                                <h6 class="d-inline-block m-b-0">Notifications</h6>
                                                                                <div class="float-right">
                                                                                    <a href="#!" class="m-r-10">mark as read</a>
                                                                                    <a href="#!">clear all</a>
                                                                                </div>
                                                                            </div>
                                                                            <ul class="noti-body">
                                                                                <li class="n-title">
                                                                                    <p class="m-b-0">NEW</p>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
                                                                                            <p>New ticket Added</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                                <li class="n-title">
                                                                                    <p class="m-b-0">EARLIER</p>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
                                                                                            <p>Prchace New Theme and make payment</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
                                                                                            <p>currently login</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                                                                            <p>Prchace New Theme and make payment</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
                                                                                            <p>currently login</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                                <li class="notification">
                                                                                    <div class="media">
                                                                                        <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                        <div class="media-body">
                                                                                            <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
                                                                                            <p>Prchace New Theme and make payment</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </li>
                                                                            </ul>
                                                                            <div class="noti-footer">
                                                                                <a href="#!">show all</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    </li>
                                                                    <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                                                                    <li>
                                                                        <div class="dropdown drp-user">
                                                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                                                <i class="icon feather icon-settings"></i>
                                                                            </a>
                                                                            <div class="dropdown-menu dropdown-menu-right profile-notification">
                                                                                <div class="pro-head">
                                                                                    <img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
                                                                                    <span>John Doe</span>
                                                                                    <a href="auth-signin.html" class="dud-logout" title="Logout">
                                                                                        <i class="feather icon-log-out"></i>
                                                                                    </a>
                                                                                </div>
                                                                                <ul class="pro-body">
                                                                                    <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                                                                    <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                                                                    <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                                                                    <li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
                                                                                </ul>
                                                                            </div>
                                                                        </div>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </nav>
                                                        <!-- [ navigation menu ] end -->

                                                        <!-- [ Header ] start -->
                                                        <header class="navbar pcoded-header navbar-expand-lg navbar-light">
                                                            <div class="container">
                                                                <div class="m-header">
                                                                    <a class="mobile-menu" id="mobile-collapse1" href="#!"><span></span></a>
                                                                    <a href="index.html" class="b-brand">
                                                                        <div class="b-bg">
                                                                            E
                                                                        </div>
                                                                        <span class="b-title">Elite Able</span>
                                                                    </a>
                                                                </div>
                                                                <a class="mobile-menu" id="mobile-header" href="#!">
                                                                    <i class="feather icon-more-horizontal"></i>
                                                                </a>
                                                                <div class="collapse navbar-collapse">
                                                                    <ul class="navbar-nav mr-auto">
                                                                        <li class="nav-item">
                                                                            <div class="main-search">
                                                                                <div class="input-group">
                                                                                    <input type="text" id="m-search" class="form-control" placeholder="Search . . .">
                                                                                    <a href="#!" class="input-group-append search-close">
                                                                                        <i class="feather icon-x input-group-text"></i>
                                                                                    </a>
                                                                                    <span class="input-group-append search-btn btn btn-primary">
                                                                                        <i class="feather icon-search input-group-text"></i>
                                                                                    </span>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                    <ul class="navbar-nav ml-auto">
                                                                    <li>
                                                                        <div class="dropdown">
                                                                            <a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="icon feather icon-bell"></i></a>
                                                                            <div class="dropdown-menu dropdown-menu-right notification">
                                                                                <div class="noti-head">
                                                                                    <h6 class="d-inline-block m-b-0">Notifications</h6>
                                                                                    <div class="float-right">
                                                                                        <a href="#!" class="m-r-10">mark as read</a>
                                                                                        <a href="#!">clear all</a>
                                                                                    </div>
                                                                                </div>
                                                                                <ul class="noti-body">
                                                                                    <li class="n-title">
                                                                                        <p class="m-b-0">NEW</p>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>John Doe</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>5 min</span></p>
                                                                                                <p>New ticket Added</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li class="n-title">
                                                                                        <p class="m-b-0">EARLIER</p>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>10 min</span></p>
                                                                                                <p>Prchace New Theme and make payment</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>12 min</span></p>
                                                                                                <p>currently login</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>30 min</span></p>
                                                                                                <p>Prchace New Theme and make payment</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>Sara Soudein</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>1 hour</span></p>
                                                                                                <p>currently login</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                    <li class="notification">
                                                                                        <div class="media">
                                                                                            <img class="img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                            <div class="media-body">
                                                                                                <p><strong>Joseph William</strong><span class="n-time text-muted"><i class="icon feather icon-clock m-r-10"></i>2 hour</span></p>
                                                                                                <p>Prchace New Theme and make payment</p>
                                                                                            </div>
                                                                                        </div>
                                                                                    </li>
                                                                                </ul>
                                                                                <div class="noti-footer">
                                                                                    <a href="#!">show all</a>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        </li>
                                                                        <li><a href="#!" class="displayChatbox"><i class="icon feather icon-mail"></i></a></li>
                                                                        <li>
                                                                            <div class="dropdown drp-user">
                                                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                                                    <i class="icon feather icon-settings"></i>
                                                                                </a>
                                                                                <div class="dropdown-menu dropdown-menu-right profile-notification">
                                                                                    <div class="pro-head">
                                                                                        <img src="../assets/images/user/avatar-1.jpg" class="img-radius" alt="User-Profile-Image">
                                                                                        <span>John Doe</span>
                                                                                        <a href="auth-signin.html" class="dud-logout" title="Logout">
                                                                                            <i class="feather icon-log-out"></i>
                                                                                        </a>
                                                                                    </div>
                                                                                    <ul class="pro-body">
                                                                                        <li><a href="#!" class="dropdown-item"><i class="feather icon-settings"></i> Settings</a></li>
                                                                                        <li><a href="#!" class="dropdown-item"><i class="feather icon-user"></i> Profile</a></li>
                                                                                        <li><a href="message.html" class="dropdown-item"><i class="feather icon-mail"></i> My Messages</a></li>
                                                                                        <li><a href="auth-signin.html" class="dropdown-item"><i class="feather icon-lock"></i> Lock Screen</a></li>
                                                                                    </ul>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </header>
                                                        <!-- [ Header ] end -->

                                                        <!-- [ chat user list ] start -->
                                                        <section class="header-user-list">
                                                            <a href="#!" class="h-close-text"><i class="feather icon-x"></i></a>
                                                            <ul class="nav nav-tabs" id="chatTab" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active text-uppercase" id="chat-tab" data-toggle="tab" href="#chat" role="tab" aria-controls="chat" aria-selected="true"><i class="feather icon-message-circle mr-2"></i>Chat</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link text-uppercase" id="user-tab" data-toggle="tab" href="#user" role="tab" aria-controls="user" aria-selected="false"><i class="feather icon-users mr-2"></i>User</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link text-uppercase" id="setting-tab" data-toggle="tab" href="#setting" role="tab" aria-controls="setting" aria-selected="false"><i class="feather icon-settings mr-2"></i>Setting</a>
                                                                </li>
                                                            </ul>
                                                            <div class="tab-content" id="chatTabContent">
                                                                <div class="tab-pane fade show active" id="chat" role="tabpanel" aria-labelledby="chat-tab">
                                                                    <div class="h-list-header">
                                                                        <div class="input-group">
                                                                            <input type="text" id="search-friends" class="form-control" placeholder="Search Friend . . .">
                                                                        </div>
                                                                    </div>
                                                                    <div class="h-list-body">
                                                                        <div class="main-friend-cont scroll-div">
                                                                            <div class="main-friend-list">
                                                                                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                                                                                        <div class="live-status">3</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                        <div class="live-status">1</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                        <div class="live-status">1</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                                                                                        <div class="live-status">3</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                        <div class="live-status">1</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image">
                                                                                        <div class="live-status">1</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alia<small class="d-block text-muted">10 min ago</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Suzen<small class="d-block text-muted">15 min ago</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image ">
                                                                                        <div class="live-status">3</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Josephin Doe<small class="d-block text-c-green">Typing . . </small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image">
                                                                                        <div class="live-status">1</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Lary Doe<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alice<small class="d-block text-c-green">online</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="tab-pane fade" id="user" role="tabpanel" aria-labelledby="user-tab">
                                                                    <div class="h-list-body">
                                                                        <div class="main-friend-cont scroll-div">
                                                                            <div class="main-friend-list">
                                                                                <div class="media px-3 d-flex align-items-center mt-3">
                                                                                    <a class="media-left m-r-15" href="#!">
                                                                                        <div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-users"></i></div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <p class="chat-header f-w-600 mb-0">New Group</p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media p-3 d-flex align-items-center">
                                                                                    <a class="media-left m-r-15" href="#!">
                                                                                        <div class="hei-50 wid-50 bg-primary img-radius d-flex text-white f-22 align-items-center justify-content-center"><i class="icon feather icon-user-plus"></i></div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <p class="chat-header f-w-600 mb-0">New Contact</p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image "></a>
                                                                                    <div class="media-body">
                                                                                        <p class="chat-header">Josephin Doe<small class="d-block">i am not what happened . .</small></p>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Lary Doe<small class="d-block">Avalable</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="3" data-status="online" data-username="Alice">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-3.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alice<small class="d-block">hear using Elite able</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="4" data-status="offline" data-username="Alia">
                                                                                    <a class="media-left" href="#!">
                                                                                        <div class="hei-50 wid-50 img-radius bg-success d-flex text-white f-22 align-items-center justify-content-center">A</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Alia<small class="d-block text-muted">Avalable</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="5" data-status="offline" data-username="Suzen">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-4.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Suzen<small class="d-block text-muted">Avalable</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="1" data-status="online" data-username="Josephin Doe">
                                                                                    <a class="media-left" href="#!">
                                                                                        <div class="hei-50 wid-50 bg-danger img-radius d-flex text-white f-22 align-items-center justify-content-center">JD</div>
                                                                                    </a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Josephin Doe<small class="d-block text-muted">Don't send me image</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                                <div class="media userlist-box" data-id="2" data-status="online" data-username="Lary Doe">
                                                                                    <a class="media-left" href="#!"><img class="media-object img-radius" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                                                                    <div class="media-body">
                                                                                        <h6 class="chat-header">Lary Doe<small class="d-block text-muted">not send free msg</small></h6>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <div class="tab-pane fade" id="setting" role="tabpanel" aria-labelledby="setting-tab">
                                                                    <div class="p-4 main-friend-cont scroll-div">
                                                                        <h6 class="mt-2"><i class="feather icon-monitor mr-2"></i>Desktop settings</h6>
                                                                        <hr>
                                                                        <div class="form-group mb-0">
                                                                            <div class="switch switch-primary d-inline m-r-10">
                                                                                <input type="checkbox" id="cn-p-1" checked>
                                                                                <label for="cn-p-1" class="cr"></label>
                                                                            </div>
                                                                            <label class="f-w-600">Allow desktop notification</label>
                                                                        </div>
                                                                        <p class="text-muted ml-5">you get lettest content at a time when data will updated</p>
                                                                        <div class="form-group mb-0">
                                                                            <div class="switch switch-primary d-inline m-r-10">
                                                                                <input type="checkbox" id="cn-p-5">
                                                                                <label for="cn-p-5" class="cr"></label>
                                                                            </div>
                                                                            <label class="f-w-600">Store Cookie</label>
                                                                        </div>
                                                                        <h6 class="mb-0 mt-5"><i class="feather icon-layout mr-2"></i>Application settings</h6>
                                                                        <hr>
                                                                        <div class="form-group mb-0">
                                                                            <div class="switch switch-primary d-inline m-r-10">
                                                                                <input type="checkbox" id="cn-p-3" checked>
                                                                                <label for="cn-p-3" class="cr"></label>
                                                                            </div>
                                                                            <label class="f-w-600">Backup Storage</label>
                                                                        </div>
                                                                        <p class="text-muted mb-0 ml-5">Automaticaly take backup as par schedule</p>
                                                                        <div class="form-group mb-4">
                                                                            <div class="switch switch-primary d-inline m-r-10">
                                                                                <input type="checkbox" id="cn-p-4" checked>
                                                                                <label for="cn-p-4" class="cr"></label>
                                                                            </div>
                                                                            <label class="f-w-600">Allow guest to print file</label>
                                                                        </div>
                                                                        <h6 class="mb-0 mt-5"><i class="feather icon-globe mr-2"></i>System settings</h6>
                                                                        <hr>
                                                                        <div class="form-group mb-0">
                                                                            <div class="switch switch-primary d-inline m-r-10">
                                                                                <input type="checkbox" id="cn-p-2">
                                                                                <label for="cn-p-2" class="cr"></label>
                                                                            </div>
                                                                            <label class="f-w-600">View other user chat</label>
                                                                        </div>
                                                                        <p class="text-muted ml-5">Allow to show public user message</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </section>
                                                        <!-- [ chat user list ] end -->

                                                        <!-- [ chat message ] start -->
                                                        <section class="header-chat">
                                                            <div class="h-list-header">
                                                                <h6>Josephin Doe</h6>
                                                                <a href="#!" class="h-back-user-list"><i class="feather icon-chevron-left"></i></a>
                                                            </div>
                                                            <div class="h-list-body">
                                                                <div class="main-chat-cont scroll-div">
                                                                    <div class="main-friend-chat">
                                                                        <div class="media chat-messages">
                                                                            <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                                                            <div class="media-body chat-menu-content">
                                                                                <div class="">
                                                                                    <p class="chat-cont">hello tell me something</p>
                                                                                    <p class="chat-cont">about yourself?</p>
                                                                                </div>
                                                                                <p class="chat-time">8:20 a.m.</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="media chat-messages">
                                                                            <div class="media-body chat-menu-reply">
                                                                                <div class="">
                                                                                    <p class="chat-cont">Ohh! very nice</p>
                                                                                </div>
                                                                                <p class="chat-time">8:22 a.m.</p>
                                                                            </div>
                                                                            <a class="media-right photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-1.jpg" alt="Generic placeholder image"></a>
                                                                        </div>
                                                                        <div class="media chat-messages">
                                                                            <a class="media-left photo-table" href="#!"><img class="media-object img-radius img-radius m-t-5" src="../assets/images/user/avatar-2.jpg" alt="Generic placeholder image"></a>
                                                                            <div class="media-body chat-menu-content">
                                                                                <div class="">
                                                                                    <p class="chat-cont">can you help me?</p>
                                                                                </div>
                                                                                <p class="chat-time">8:20 a.m.</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="h-list-footer">
                                                                <div class="input-group">
                                                                    <input type="file" class="chat-attach" style="display:none">
                                                                    <a href="#!" class="input-group-prepend btn btn-success btn-attach">
                                                                        <i class="feather icon-paperclip"></i>
                                                                    </a>
                                                                    <input type="text" name="h-chat-text" class="form-control h-send-chat" placeholder="Write hear . . ">
                                                                    <button type="submit" class="input-group-append btn-send btn btn-primary">
                                                                        <i class="feather icon-message-circle"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </section>
                                                        <!-- [ chat message ] end -->

                                                        <!-- [ Main Content ] start -->
                                                        <div class="pcoded-main-container">
                                                            <div class="pcoded-wrapper container">
                                                                <div class="pcoded-content">
                                                                    <div class="pcoded-inner-content">

                                                                        <div class="main-body">
                                                                            <div class="page-wrapper">
                                                                                <div class="page-header">
                                                                                    <div class="page-block">
                                                                                        <div class="row align-items-center">
                                                                                            <div class="col-md-12">
                                                                                                <div class="page-header-title">
                                                                                                    <h5>Layout 8</h5>
                                                                                                </div>
                                                                                                <ul class="breadcrumb">
                                                                                                    <li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
                                                                                                    <li class="breadcrumb-item"><a href="#!">Layout 8</a></li>
                                                                                                </ul>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                <!-- [ Main Content ] start -->
                                                                                <div class="row">
                                                                                </div>
                                                                                <!-- [ Main Content ] end -->
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <!-- [ Main Content ] end -->

                                                        <!-- Required Js -->
                                                        <script src="../assets/js/vendor-all.min.js"></script>
                                                        <script src="../assets/plugins/bootstrap/js/bootstrap.min.js"></script>
                                                        <script src="../assets/js/pcoded.min.js"></script>
                                                        <script src="../assets/js/horizontal-menu.js"></script>
                                                        <script type="text/javascript">
                                                            // Collapse menu
                                                            (function() {
                                                                if ($('#layout-sidenav').hasClass('sidenav-horizontal') || window.layoutHelpers.isSmallScreen()) {
                                                                    return;
                                                                }
                                                                try {
                                                                    window.layoutHelpers.setCollapsed(
                                                                        localStorage.getItem('layoutCollapsed') === 'true',
                                                                        false
                                                                    );
                                                                } catch (e) {}
                                                            })();
                                                            $(function() {
                                                                // Initialize sidenav
                                                                $('#layout-sidenav').each(function() {
                                                                    new SideNav(this, {
                                                                        orientation: $(this).hasClass('sidenav-horizontal') ? 'horizontal' : 'vertical'
                                                                    });
                                                                });

                                                                // Initialize sidenav togglers
                                                                $('body').on('click', '.layout-sidenav-toggle', function(e) {
                                                                    e.preventDefault();
                                                                    window.layoutHelpers.toggleCollapsed();
                                                                    if (!window.layoutHelpers.isSmallScreen()) {
                                                                        try {
                                                                            localStorage.setItem('layoutCollapsed', String(window.layoutHelpers.isCollapsed()));
                                                                        } catch (e) {}
                                                                    }
                                                                });
                                                            });
                                                            $(document).ready(function() {
                                                                $("#pcoded").pcodedmenu({
                                                                    themelayout: 'horizontal',
                                                                    MenuTrigger: 'hover',
                                                                    SubMenuTrigger: 'hover',
                                                                });
                                                            });
                                                        </script>

                                                    </body>

                                                    </html>