API tools faq
paste
usmanwalana

Navigation.component.html

usmanwalana
Sep 15th, 2016
189
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 21.82 KB | None | 0 0
raw download clone embed print report
  1. <header class="main-header">
  2.     <!-- Logo -->
  3.     <a href="index2.html" class="logo">
  4.         <!-- mini logo for sidebar mini 50x50 pixels -->
  5.         <span class="logo-mini"><b>BMIS</b></span>
  6.         <!-- logo for regular state and mobile devices -->
  7.         <span class="logo-lg"><b>BMIS</b></span>
  8.     </a>
  9.  
  10.     <!-- Header Navbar: style can be found in header.less -->
  11.     <nav class="navbar navbar-static-top">
  12.         <!-- Sidebar toggle button-->
  13.         <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
  14.             <span class="sr-only">Toggle navigation</span>
  15.         </a>
  16.         <!-- Navbar Right Menu -->
  17.         <div class="navbar-custom-menu">
  18.             <ul class="nav navbar-nav">
  19.                 <!-- Messages: style can be found in dropdown.less-->
  20.                 <li class="dropdown messages-menu">
  21.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  22.                         <i class="fa fa-envelope-o"></i>
  23.                         <span class="label label-success">4</span>
  24.                     </a>
  25.                     <ul class="dropdown-menu">
  26.                         <li class="header">You have 4 messages</li>
  27.                         <li>
  28.                             <!-- inner menu: contains the actual data -->
  29.                             <ul class="menu">
  30.                                 <li><!-- start message -->
  31.                                     <a href="#">
  32.                                         <div class="pull-left">
  33.                                             <img src="dist/img/user2-160x160.jpg" class="img-circle"
  34.                                                 alt="User Image">
  35.                                         </div>
  36.                                         <h4>
  37.                                             Support Team
  38.                                             <small><i class="fa fa-clock-o"></i> 5 mins</small>
  39.                                         </h4>
  40.                                         <p>Why not buy a new awesome theme?</p>
  41.                                     </a>
  42.                                 </li>
  43.                                 <!-- end message -->
  44.                                 <li>
  45.                                     <a href="#">
  46.                                         <div class="pull-left">
  47.                                             <img src="dist/img/user3-128x128.jpg" class="img-circle"
  48.                                                 alt="User Image">
  49.                                         </div>
  50.                                         <h4>
  51.                                             AdminLTE Design Team
  52.                                             <small><i class="fa fa-clock-o"></i> 2 hours</small>
  53.                                         </h4>
  54.                                         <p>Why not buy a new awesome theme?</p>
  55.                                     </a>
  56.                                 </li>
  57.                                 <li>
  58.                                     <a href="#">
  59.                                         <div class="pull-left">
  60.                                             <img src="dist/img/user4-128x128.jpg" class="img-circle"
  61.                                                 alt="User Image">
  62.                                         </div>
  63.                                         <h4>
  64.                                             Developers
  65.                                             <small><i class="fa fa-clock-o"></i> Today</small>
  66.                                         </h4>
  67.                                         <p>Why not buy a new awesome theme?</p>
  68.                                     </a>
  69.                                 </li>
  70.                                 <li>
  71.                                     <a href="#">
  72.                                         <div class="pull-left">
  73.                                             <img src="dist/img/user3-128x128.jpg" class="img-circle"
  74.                                                 alt="User Image">
  75.                                         </div>
  76.                                         <h4>
  77.                                             Sales Department
  78.                                             <small><i class="fa fa-clock-o"></i> Yesterday</small>
  79.                                         </h4>
  80.                                         <p>Why not buy a new awesome theme?</p>
  81.                                     </a>
  82.                                 </li>
  83.                                 <li>
  84.                                     <a href="#">
  85.                                         <div class="pull-left">
  86.                                             <img src="dist/img/user4-128x128.jpg" class="img-circle"
  87.                                                 alt="User Image">
  88.                                         </div>
  89.                                         <h4>
  90.                                             Reviewers
  91.                                             <small><i class="fa fa-clock-o"></i> 2 days</small>
  92.                                         </h4>
  93.                                         <p>Why not buy a new awesome theme?</p>
  94.                                     </a>
  95.                                 </li>
  96.                             </ul>
  97.                         </li>
  98.                         <li class="footer"><a href="#">See All Messages</a></li>
  99.                     </ul>
  100.                 </li>
  101.                 <!-- Notifications: style can be found in dropdown.less -->
  102.                 <li class="dropdown notifications-menu">
  103.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  104.                         <i class="fa fa-bell-o"></i>
  105.                         <span class="label label-warning">10</span>
  106.                     </a>
  107.                     <ul class="dropdown-menu">
  108.                         <li class="header">You have 10 notifications</li>
  109.                         <li>
  110.                             <!-- inner menu: contains the actual data -->
  111.                             <ul class="menu">
  112.                                 <li>
  113.                                     <a href="#">
  114.                                         <i class="fa fa-users text-aqua"></i> 5 new members joined today
  115.                                     </a>
  116.                                 </li>
  117.                                 <li>
  118.                                     <a href="#">
  119.                                         <i class="fa fa-warning text-yellow"></i> Very long description here that
  120.                                         may not fit into the
  121.                                         page and may cause design problems
  122.                                     </a>
  123.                                 </li>
  124.                                 <li>
  125.                                     <a href="#">
  126.                                         <i class="fa fa-users text-red"></i> 5 new members joined
  127.                                     </a>
  128.                                 </li>
  129.                                 <li>
  130.                                     <a href="#">
  131.                                         <i class="fa fa-shopping-cart text-green"></i> 25 sales made
  132.                                     </a>
  133.                                 </li>
  134.                                 <li>
  135.                                     <a href="#">
  136.                                         <i class="fa fa-user text-red"></i> You changed your username
  137.                                     </a>
  138.                                 </li>
  139.                             </ul>
  140.                         </li>
  141.                         <li class="footer"><a href="#">View all</a></li>
  142.                     </ul>
  143.                 </li>
  144.                 <!-- Tasks: style can be found in dropdown.less -->
  145.                 <li class="dropdown tasks-menu">
  146.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  147.                         <i class="fa fa-flag-o"></i>
  148.                         <span class="label label-danger">9</span>
  149.                     </a>
  150.                     <ul class="dropdown-menu">
  151.                         <li class="header">You have 9 tasks</li>
  152.                         <li>
  153.                             <!-- inner menu: contains the actual data -->
  154.                             <ul class="menu">
  155.                                 <li><!-- Task item -->
  156.                                     <a href="#">
  157.                                         <h3>
  158.                                             Design some buttons
  159.                                             <small class="pull-right">20%</small>
  160.                                         </h3>
  161.                                         <div class="progress xs">
  162.                                             <div class="progress-bar progress-bar-aqua" style="width: 20%"
  163.                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
  164.                                                 aria-valuemax="100">
  165.                                                 <span class="sr-only">20% Complete</span>
  166.                                             </div>
  167.                                         </div>
  168.                                     </a>
  169.                                 </li>
  170.                                 <!-- end task item -->
  171.                                 <li><!-- Task item -->
  172.                                     <a href="#">
  173.                                         <h3>
  174.                                             Create a nice theme
  175.                                             <small class="pull-right">40%</small>
  176.                                         </h3>
  177.                                         <div class="progress xs">
  178.                                             <div class="progress-bar progress-bar-green" style="width: 40%"
  179.                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
  180.                                                 aria-valuemax="100">
  181.                                                 <span class="sr-only">40% Complete</span>
  182.                                             </div>
  183.                                         </div>
  184.                                     </a>
  185.                                 </li>
  186.                                 <!-- end task item -->
  187.                                 <li><!-- Task item -->
  188.                                     <a href="#">
  189.                                         <h3>
  190.                                             Some task I need to do
  191.                                             <small class="pull-right">60%</small>
  192.                                         </h3>
  193.                                         <div class="progress xs">
  194.                                             <div class="progress-bar progress-bar-red" style="width: 60%"
  195.                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
  196.                                                 aria-valuemax="100">
  197.                                                 <span class="sr-only">60% Complete</span>
  198.                                             </div>
  199.                                         </div>
  200.                                     </a>
  201.                                 </li>
  202.                                 <!-- end task item -->
  203.                                 <li><!-- Task item -->
  204.                                     <a href="#">
  205.                                         <h3>
  206.                                             Make beautiful transitions
  207.                                             <small class="pull-right">80%</small>
  208.                                         </h3>
  209.                                         <div class="progress xs">
  210.                                             <div class="progress-bar progress-bar-yellow" style="width: 80%"
  211.                                                 role="progressbar" aria-valuenow="20" aria-valuemin="0"
  212.                                                 aria-valuemax="100">
  213.                                                 <span class="sr-only">80% Complete</span>
  214.                                             </div>
  215.                                         </div>
  216.                                     </a>
  217.                                 </li>
  218.                                 <!-- end task item -->
  219.                             </ul>
  220.                         </li>
  221.                         <li class="footer">
  222.                             <a href="#">View all tasks</a>
  223.                         </li>
  224.                     </ul>
  225.                 </li>
  226.                 <!-- User Account: style can be found in dropdown.less -->
  227.                 <li class="dropdown user user-menu">
  228.                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  229.                         <img src="dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
  230.                         <span class="hidden-xs">Muhammad Usman</span>
  231.                     </a>
  232.                     <ul class="dropdown-menu">
  233.                         <!-- User image -->
  234.                         <li class="user-header">
  235.                             <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  236.  
  237.                             <p>
  238.                                 Muhammad Usman - Web Developer
  239.                                 <small>Member since Nov. 2012</small>
  240.                             </p>
  241.                         </li>
  242.                         <!-- Menu Body -->
  243.                         <li class="user-body">
  244.                             <div class="row">
  245.                                 <div class="col-xs-4 text-center">
  246.                                     <a href="#">Followers</a>
  247.                                 </div>
  248.                                 <div class="col-xs-4 text-center">
  249.                                     <a href="#">Sales</a>
  250.                                 </div>
  251.                                 <div class="col-xs-4 text-center">
  252.                                     <a href="#">Friends</a>
  253.                                 </div>
  254.                             </div>
  255.                             <!-- /.row -->
  256.                         </li>
  257.                         <!-- Menu Footer-->
  258.                         <li class="user-footer">
  259.                             <div class="pull-left">
  260.                                 <a href="#" class="btn btn-default btn-flat"><i class="fa fa-user"></i>Profile</a>
  261.                             </div>
  262.                             <div class="pull-right">
  263.                                 <a (click)="logOut()" class="btn btn-default btn-flat"><i class="fa fa-sign-out"></i>
  264.                                     Sign out</a>
  265.                             </div>
  266.                         </li>
  267.                     </ul>
  268.                 </li>
  269.             </ul>
  270.         </div>
  271.  
  272.     </nav>
  273. </header>
  274. <aside class="main-sidebar">
  275.     <!-- sidebar: style can be found in sidebar.less -->
  276.     <section class="sidebar">
  277.         <!-- Sidebar user panel -->
  278.         <div class="user-panel">
  279.             <div class="pull-left image">
  280.                 <img src="dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
  281.             </div>
  282.             <div class="pull-left info">
  283.                 <p>Muhammad Usman</p>
  284.                 <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
  285.             </div>
  286.         </div>
  287.  
  288.         <!-- sidebar menu: : style can be found in sidebar.less -->
  289.         <ul class="sidebar-menu">
  290.             <li class="header">MAIN NAVIGATION</li>
  291.             <li class="active treeview">
  292.                 <a [routerLink]="['/loggedIn','user' , 'dashboard']">
  293.                     <i class="fa fa-dashboard"></i> <span>Dashboard</span>
  294.                 </a>
  295.             </li>
  296.             <li class="treeview">
  297.                 <a href="#">
  298.                     <i class="fa fa-shopping-cart"></i>
  299.                     <span>Products</span>
  300.             <span class="pull-right-container">
  301.               <span class="label label-primary pull-right">4</span>
  302.             </span>
  303.                 </a>
  304.                 <ul class="treeview-menu">
  305.                     <li><a [routerLink]="['/loggedIn','product' , 'list']"><i class="fa fa-list-ol"></i> View All</a></li>
  306.                     <li><a href="pages/layout/boxed.html"><i class="fa fa-plus-circle"></i> Add Product</a></li>
  307.                 </ul>
  308.             </li>
  309.             <li class="treeview">
  310.                 <a href="#">
  311.                     <i class="fa fa-tags"></i>
  312.                     <span>Products Category</span>
  313.             <span class="pull-right-container">
  314.               <span class="label label-primary pull-right">4</span>
  315.             </span>
  316.                 </a>
  317.                 <ul class="treeview-menu">
  318.                     <li><a href="pages/layout/top-nav.html"><i class="fa fa-list-ol"></i> View All</a></li>
  319.                     <li><a href="pages/layout/boxed.html"><i class="fa fa-plus-circle"></i> Add Category</a></li>
  320.                 </ul>
  321.             </li>
  322.             <li class="treeview">
  323.                 <a href="#">
  324.                     <i class="fa fa-list"></i>
  325.                     <span>Price List</span>
  326.             <span class="pull-right-container">
  327.               <i class="fa fa-angle-left pull-right"></i>
  328.             </span>
  329.                 </a>
  330.                 <ul class="treeview-menu">
  331.                     <li><a href="pages/charts/chartjs.html"><i class="fa fa-list-ol"></i> View All</a></li>
  332.                     <li><a href="pages/charts/morris.html"><i class="fa fa-plus-circle"></i> Add New</a></li>
  333.                 </ul>
  334.             </li>
  335.             <li class="treeview">
  336.                 <a href="#">
  337.                     <i class="fa fa-user"></i>
  338.                     <span>Designations</span>
  339.             <span class="pull-right-container">
  340.               <i class="fa fa-angle-left pull-right"></i>
  341.             </span>
  342.                 </a>
  343.                 <ul class="treeview-menu">
  344.                     <li><a href="pages/UI/general.html"><i class="fa fa-list-ol"></i> View All</a></li>
  345.                     <li><a href="pages/UI/icons.html"><i class="fa fa-plus-circle"></i> Designations</a></li>
  346.                 </ul>
  347.             </li>
  348.             <li class="treeview">
  349.                 <a href="#">
  350.                     <i class="fa fa-users"></i> <span>Employees</span>
  351.             <span class="pull-right-container">
  352.               <i class="fa fa-angle-left pull-right"></i>
  353.             </span>
  354.                 </a>
  355.                 <ul class="treeview-menu">
  356.                     <li><a href="pages/forms/general.html"><i class="fa fa-list-ol"></i> View All</a></li>
  357.                     <li><a href="pages/forms/advanced.html"><i class="fa fa-plus-circle"></i> Add Employee</a></li>
  358.                 </ul>
  359.             </li>
  360.             <li class="treeview">
  361.                 <a href="#">
  362.                     <i class="fa fa-users"></i> <span>Customers</span>
  363.             <span class="pull-right-container">
  364.               <i class="fa fa-angle-left pull-right"></i>
  365.             </span>
  366.                 </a>
  367.                 <ul class="treeview-menu">
  368.                     <li><a href="pages/tables/simple.html"><i class="fa fa-list-ol"></i> View All</a></li>
  369.                     <li><a href="pages/tables/data.html"><i class="fa fa-plus-circle"></i> Add Customer</a></li>
  370.                 </ul>
  371.             </li>
  372.             <li class="treeview">
  373.                 <a href="#">
  374.                     <i class="fa fa-balance-scale"></i> <span>Sales Management</span>
  375.             <span class="pull-right-container">
  376.               <i class="fa fa-angle-left pull-right"></i>
  377.             </span>
  378.                 </a>
  379.                 <ul class="treeview-menu">
  380.                     <li><a href="pages/tables/simple.html"><i class="fa fa-money"></i> Sales</a></li>
  381.                     <li><a href="pages/tables/data.html"><i class="fa fa-print"></i> Invoice List</a></li>
  382.                 </ul>
  383.             </li>
  384.             <li class="treeview">
  385.                 <a href="#">
  386.                     <i class="fa fa-industry"></i> <span>Warehouse</span>
  387.             <span class="pull-right-container">
  388.               <i class="fa fa-angle-left pull-right"></i>
  389.             </span>
  390.                 </a>
  391.                 <ul class="treeview-menu">
  392.                     <li><a href="pages/tables/simple.html"><i class="fa fa-list-ol"></i> View All</a></li>
  393.                     <li><a href="pages/tables/data.html"><i class="fa fa-plus-circle"></i> Add Warehouse</a></li>
  394.                 </ul>
  395.             </li>
  396.             <li class="treeview">
  397.                 <a href="#">
  398.                     <i class="fa fa-users"></i> <span>Supplier Management</span>
  399.             <span class="pull-right-container">
  400.               <i class="fa fa-angle-left pull-right"></i>
  401.             </span>
  402.                 </a>
  403.                 <ul class="treeview-menu">
  404.                     <li><a href="pages/tables/simple.html"><i class="fa fa-list-ol"></i> View All</a></li>
  405.                     <li><a href="pages/tables/data.html"><i class="fa fa-plus-circle"></i> Add Supplier</a></li>
  406.                 </ul>
  407.             </li>
  408.             <li class="treeview">
  409.                 <a href="#">
  410.                     <i class="fa fa-table"></i> <span>Purchase Demand</span>
  411.             <span class="pull-right-container">
  412.               <i class="fa fa-angle-left pull-right"></i>
  413.             </span>
  414.                 </a>
  415.                 <ul class="treeview-menu">
  416.                     <li><a href="pages/tables/simple.html"><i class="fa fa-list-ol"></i> View All</a></li>
  417.                     <li><a href="pages/tables/data.html"><i class="fa fa-plus-circle"></i> Add Demand</a></li>
  418.                 </ul>
  419.             </li>
  420.         </ul>
  421.     </section>
  422.     <!-- /.sidebar -->
  423. </aside>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!