<!-- Sidebar -->
<div class="sidebar">
    <ul class="nav nav-pills">
        <li><a href="#" class="item item-side active" data-target="first-menu"><i class="ion-leaf"></i></a></li>
        <li><a href="#" class="item item-side" data-target="second-menu"><i class="ion-beaker"></i></a></li>
        <li><a href="#" class="item item-side" data-target="third-menu"><i class="ion-cube"></i></a></li>
        <li><a href="#" class="item item-side" data-target="fourth-menu"><i class="ion-levels"></i></a></li>
        <li><a href="#" class="item item-side" data-target="fifth-menu"><i class="ion-bug"></i></a></li>
    </ul>
</div>

<!-- Secondary Sidebar -->
<div class="sidebar-menu">
    <ul id="first-menu" class="nav nav-pills nav-stacked active">
        <li><a href="#" class="item item-head">Introduction</a></li>
        <li><a href="index.html#introduction" class="item item-side">About Wonderful</a></li>
        <li><a href="index.html#structure" class="item item-side">Folder Structure</a></li>
        <li><a href="index.html#component" class="item item-side">Component</a></li>
        <li><a href="index.html#dependency" class="item item-side">Dependency</a></li>
        <li><a href="index.html#license" class="item item-side">License</a></li>
    </ul>

    <ul id="second-menu" class="nav nav-pills nav-stacked">
        <li><a href="#" class="item item-head">Free Sample</a></li>
        <li><a href="dashboard.html" class="item item-side">Dashboard</a></li>
        <li><a href="create.html" class="item item-side">Create / Update</a></li>
        <li><a href="list-post.html" class="item item-side">List Post</a></li>
        <li><a href="list-card.html" class="item item-side">List Card</a></li>
        <li><a href="setting.html" class="item item-side">Setting</a></li>
        <li><a href="sign-in.html" class="item item-side">Sign In</a></li>
        <li><a href="profile.html" class="item item-side">Profile</a></li>
        <li><a href="messages.html" class="item item-side">Messages</a></li>
        <li><a href="notifications.html" class="item item-side">Notifications</a></li>
        <li><a href="trash.html" class="item item-side">Trash</a></li>
        <li><a href="blank.html" class="item item-side">Blank</a></li>
    </ul>

    <ul id="third-menu" class="nav nav-pills nav-stacked">
        <li><a href="#" class="item item-head">Components</a></li>
        <li><a href="color.html" class="item item-side">Color</a></li>
        <li><a href="typography.html" class="item item-side">Typography</a></li>
        <li><a href="button.html" class="item item-side">Button</a></li>
        <li><a href="form.html" class="item item-side">Form</a></li>
        <li><a href="card.html" class="item item-side">Card</a></li>
        <li><a href="icon.html" class="item item-side">Icon</a></li>
        <li><a href="grid.html" class="item item-side">Grid</a></li>
        <li><a href="masonry.html" class="item item-side">Masonry</a></li>
        <li><a href="table.html" class="item item-side">Table</a></li>
        <li><a href="editor.html" class="item item-side">WYSIWYG Editor</a></li>
        <li><a href="markdown.html" class="item item-side">Markdown</a></li>
        <li><a href="alert.html" class="item item-side">Alert</a></li>
        <li><a href="confirm.html" class="item item-side">Confirm</a></li>
        <li><a href="modal.html" class="item item-side">Modal</a></li>
        <li><a href="progress.html" class="item item-side">Progress</a></li>
        <li><a href="hero.html" class="item item-side">Hero</a></li>
        <li><a href="chart.html" class="item item-side">Chart</a></li>
        <li><a href="toolbar.html" class="item item-side">Toolbar</a></li>
        <li><a href="code.html" class="item item-side">Code</a></li>
    </ul>

    <ul id="fourth-menu" class="nav nav-pills nav-stacked">
        <li><a href="#" class="item item-head">Customize</a></li>
        <li><a href="fonts.html" class="item item-side">Fonts</a></li>
        <li><a href="component.html" class="item item-side">Component</a></li>
        <li><a href="style-guide.html" class="item item-side">Style Guide</a></li>
    </ul>

    <ul id="fifth-menu" class="nav nav-pills nav-stacked">
        <li><a href="#" class="item item-head">Feedbacks</a></li>
        <li><a href="author.html" class="item item-side">Author</a></li>
        <li><a href="issues.html" class="item item-side">Issues</a></li>
        <li><a href="contribution.html" class="item item-side">Contribution</a></li>
    </ul>
</div>