<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Collapsible sidebar using Bootstrap 4</title>
    
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Our Custom CSS -->
    <link rel="stylesheet" href="http://notesvision.at-webs.hk/assets/css/adminstyle.css">

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <!-- Font Awesome JS -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>

<body>
    <div class="wrapper" >
        <!-- Sidebar  -->
        <style>
            .custicon{
                color: #989898;

            }
            .custcolumn .customicon{
                color: #989898;
            }
            .custcolumn:hover .customicon{
                color: #7d4495;
            }
            .custcolumn  span{
                color: #989898;
            }
            .custcolumn:hover  span{
                color: #7d4495;
            }
            .custcolumn {
                margin-bottom: 1px;
            }
            
        </style>
        <nav id="sidebar" style="background-color: #e5e5e5;">
            <div class="sidebar-header">
                <h3>Bootstrap Sidebar</h3>
            </div>

            <ul class="list-unstyled components" style="color:#ffffff;">
               
                <p style="color: #989898;line-height:30px;background-color: #ffffff;margin-bottom:1px;"> <i class="fas fa-cog mr-2" style="color: #989898;"></i>你好! admin</p>
                
                
                <li style="background-color: #ffffff;" class="custcolumn">
                    <a href="#"><i class="fas fa-user mr-2 customicon"></i><span >管理員用戶</span></a>
                </li>
                <li class="active">
                    <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><p><i class="fas fa-user mr-2"></i>管理員用戶</p></a>
                    <ul class="collapse list-unstyled" id="homeSubmenu">
                        <li>
                            <a href="#">Home 1</a>
                        </li>
                        <li>
                            <a href="#">Home 2</a>
                        </li>
                        <li>
                            <a href="#">Home 3</a>
                        </li>
                    </ul>
                </li>
                
                <li style="background-color: #ffffff;" class="custcolumn">
                    <a href="#"><i class="fas fa-university mr-2 customicon"></i><span >機構用戶</span></a>
                </li>
                <li style="background-color: #ffffff;" class="custcolumn">
                    <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-folder mr-2 customicon"></i><span >分類管理</span></a>
                    <ul class="collapse list-unstyled" id="pageSubmenu">
                        <li>
                            <a href="#">Page 1</a>
                        </li>
                        <li>
                            <a href="#">Page 2</a>
                        </li>
                        <li>
                            <a href="#">Page 3</a>
                        </li>
                    </ul>
                </li>
                <li style="background-color: #ffffff;" class="custcolumn">
                    <a href="#"><i class="far fa-calendar-minus mr-2 customicon" ></i><span >筆記管理</span></a>
                </li>
                <li style="background-color: #ffffff;"  class="custcolumn">
                    <a href="#"><i class="fas fa-lock mr-2 customicon"></i><span >用戶權限</span></a>
                </li>
                <li style="background-color: #ffffff;"  class="custcolumn">
                    <a href="#"><i class="far fa-clock mr-2 customicon"></i><span >用戶記錄</span></a>
                </li>
                <li style="background-color: #ffffff;"  class="custcolumn">
                    <a href="#"><i class="fas fa-power-off mr-2 customicon"></i><span >安全登出</span></a>
                </li>
            </ul>

            <ul class="list-unstyled CTAs">
                <li>
                    <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
                </li>
                <li>
                    <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
                </li>
            </ul>
        </nav>

        <!-- Page Content  -->
        <div id="content" style="background-color: #e5e5e5;">
            <style>
            .customsearch:hover{
                background-color: #e2e6ea;      
            }
            </style>
            <!-- top menu bar -->
            <div class="container-fluid py-2" style="background-color: #f8f9fa;">

            <span class="form-inline">
            <button type="button" class="btn btn-light">
            <i class="fas fa-plus mr-2" style="color:#7d4495"></i>    
            <span style="color:#616161">新增用戶</span></button>

            <button type="button" class="btn btn-light">
            <i class="fas fa-trash-alt mr-2" style="color:#7d4495"></i>   
            <span style="color:#616161">删除用戶</span></button>

            <div class="input-group ">
            <input type="search" placeholder="  快速搜尋 機構、聯絡人、管理員、登入名稱、電話" aria-describedby="button-addon5" class="form-control" style="width:360px;">
            <div class="input-group-append">
              <button id="button-addon5" type="submit" class="btn btn-outline-secondary customsearch"><i class="fa fa-search" style="color:#7d4495"></i></button>
            </div>
            </div>
            


            <div class="input-group ml-auto mr-3">
                <label style="color:#616161">每頁顯示</label>
            <select class="custom-select mr-sm-2 " id="inlineFormCustomSelect" >
        <option selected>10</option>
        <option value="1">20</option>
        <option value="2">50</option>
        <option value="3">100</option>
      </select>
                <label style="color:#616161">個結果(共122個)</label>
            </div>

            <div class="input-group ">
            <button type="button" class="btn btn-light"><span style="color:#616161">上一頁</span></button>
            <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
      </select>
      <button type="button" class="btn btn-light"><span style="color:#616161">下一頁</span></button>
            </div>

            </span>

          </div>
            <!-- end top menu bar -->
            <br>
           
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">

                    <button type="button" id="sidebarCollapse" class="btn btn-info">
                        <i class="fas fa-align-left"></i>
                        <span>Toggle Sidebar</span>
                    </button>
                    <button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="fas fa-align-justify"></i>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="nav navbar-nav ml-auto">
                            <li class="nav-item active">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Page</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

            <!-- body content -->
            <style>
                .levleonetext{
                    text-align: center;
                }
                .tablerowoddbg{
                    background-color: #f1ebf5;
                }
                .levleonetext span{
                    color:#616161;
                }
            </style>
            <div class="container-fluid py-2" style="background-color: #ffffff;">
            <h2 style="color:#7d4495;">管理員用戶</h2>
                <!-- body table -->
                <table class="table table-bordered table-sm   ">
                <thead class="">
                    <tr>
                        <th class="levleonetext" >

                            <input type="checkbox" class="checkbox" id="exampleCheck1">
                           


                        </th>
                        <th class="levleonetext"><span style="color:#7d4495;">管理員姓名</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">登入名稱</span></th>
                        <th class="levleonetext"><span style="color:#7d4495;" class="">更新時間<i class="fas fa-arrow-down ml-2"></i></span></th>
                        <th class="levleonetext"><span style="color:#7d4495;">編輯</span></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tablerowoddbg ">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext"><span>Amy AU</span></td>
                        <td class="levleonetext"><span>Admin1</span></td>
                        <td class="levleonetext"><span>2020-03-14 10:24:26</span></td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext"><span>Amy AU</span></td>
                        <td class="levleonetext"><span>Admin1</span></td>
                        <td class="levleonetext"><span>2020-03-14 10:24:26</span></td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="clickable tablerowoddbg" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1" style="">
                        <td class="levleonetext"> <input type="checkbox" class="checkbox" id="exampleCheck1"></td>
                        <td class="levleonetext">Amy AU</td>
                        <td class="levleonetext">Admin1</td>
                        <td class="levleonetext">2020-03-14 10:24:26</td>
                        <td class="levleonetext"><i class="fas fa-pencil-alt" style="color:#7d4495"></i></td>
                    </tr>
                </tbody>
                <tbody id="group-of-rows-1" class="collapse">
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data</td>
                    </tr>
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data 1</td>
                        <td>data</td>
                    </tr>
                </tbody>
                <tbody>
                    <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
                        <td><i class="fa fa-folder"></i></td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                        <td>data</td>
                    </tr>
                </tbody>
                <tbody id="group-of-rows-2" class="collapse">
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data</td>
                    </tr>
                    <tr class="table-warning">
                        <td><i class="fa fa-folder-open"></i> child row</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data 2</td>
                        <td>data</td>
                    </tr>
                </tbody>
            </table>  
                <!-- end body table -->
            </div>    
            <!-- end body content -->

            <table class="table table-bordered table-sm mx-2 ">
    <thead class="thead-dark">
        <tr>
            <th>Column</th>
            <th>管理員姓名</th>
            <th>登入名稱</th>
            <th>更新時間<i class="fas fa-arrow-down"></i></th>
        </tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
            <td><i class="fa fa-folder"></i></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-1" class="collapse">
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 1</td>
            <td>data 1</td>
            <td>data 1</td>
        </tr>
    </tbody>
    <tbody>
        <tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
            <td><i class="fa fa-folder"></i></td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
    <tbody id="group-of-rows-2" class="collapse">
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 2</td>
            <td>data 2</td>
            <td>data 2</td>
        </tr>
        <tr class="table-warning">
            <td><i class="fa fa-folder-open"></i> child row</td>
            <td>data 2</td>
            <td>data 2</td>
            <td>data 2</td>
        </tr>
    </tbody>
</table>
            <h2>Collapsible Sidebar Using Bootstrap 41</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h2>Lorem Ipsum Dolor</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <div class="line"></div>

            <h3>Lorem Ipsum Dolor</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>

    <!-- jQuery CDN - Slim version (=without AJAX) -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap JS -->
    
    <script src="http://notesvision.at-webs.hk/assets/third_party/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>
</body>

</html>