nodes-ui
Version:
UI Components for Nodes Backends
473 lines (452 loc) • 32.8 kB
HTML
---
title: Core layout Toggle-sidebar
layout: blade-templates.html
---
<div class="layout vertical core-layout">
<div class="core-layout__topbar">
<div class="top-bar">
<div class="top-bar__left">
<button href="#" class="btn btn-transparent core__left-sidebar-toggle"><i class="fa fa-bars"></i></button>
<div class="application-brand">
<a class="logo" href="#">
<img src="../../assets/img/n-stack-logo.svg" class="logo logo-small"/>
</a>
</div>
</div>
<div class="top-bar__right">
<div class="top-bar__actions-left">
<div class="dropdown">
<button class="btn btn-transparent dropdown-toggle" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
<p class="text-white">top-bar-actions-left</p>
</div>
<div class="top-bar__actions-right">
<p class="text-white">top-bar-actions-right</p>
<div class="dropdown dropdown-user">
<button class="btn btn-transparent dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
</button>
<div class="dropdown-menu dropdown-inverse animate-expand align-right">
<div class="dropdown-content">
<p class="dropdown-content__title">
User
</p>
<div class="user">
<div class="user__profile">
<img class="img-responsive" src="//placehold.it/300x300"/>
</div>
<div class="user__info">
<span class="user__info-name" title="John Doe">
John Doe
</span>
<span class="user__info-email" title="john.doe.doe.doe.doe.doe.doe.doe.doe@email.com">
john.doe.doe.doe.doe.doe.doe.doe.doe@email.com
</span>
</div>
</div>
<div class="user-actions">
<button class="btn btn-sm btn-transparent user__sign-out">
<i class="fa fa-sign-out"></i>
Sign out
</button>
<button data-toggle="tooltip" data-placement="left" title="Edit user"
class="btn btn-sm btn-transparent user__settings">
<i class="fa fa-pencil"></i>
</button>
</div>
<p class="dropdown-content__title">
Company
</p>
<div class="company">
<div class="company__profile">
<img class="img-responsive" src="//placehold.it/300x300"/>
</div>
<div class="company__info">
<span class="company__info-name">
Nodes Agency
</span>
</div>
</div>
<p class="dropdown-content__title company-list-title">
Switch company
</p>
<div class="company-list">
<ul>
<li>
<a href="#">
eBoks
</a>
</li>
<li>
<a href="#">
eBoks
</a>
</li>
<li>
<a href="#">
eBoks
</a>
</li>
<li>
<a href="#">
eBoks
</a>
</li>
<li>
<a href="#">
eBoks
</a>
</li>
<li class="company-list__more">
<a href="#">
<i class="fa fa-plus"></i>
more
</a>
</li>
</ul>
</div>
<div class="company-actions">
<button class="btn btn-transparent company__invite">
<i class="fa fa-user-plus"></i>
Invite to company
</button>
<button data-toggle="tooltip" data-placement="left" title="Edit company"
class="button btn btn-transparent company__settings">
<i class="fa fa-cog"></i>
</button>
</div>
</div>
</div>
</div>
<div class="dropdown dropdown-admin">
<button class="btn btn-transparent dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu dropdown-inverse animate-fade align-right">
<li>
<a href="#">
nStack Documentation
</a>
</li>
<li>
<a href="#">
nStack Styleguide
</a>
</li>
<li>
<a href="#">
Some other admin action
</a>
</li>
<li>
<a href="#">
All your base...
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="core-layout__page">
<div class="core-layout__sidebar-wrapper">
<div class="core-layout__sidebar">
<div class="core-layout__sidebar-mobile-navigation">
<div class="core-layout__sidebar-mobile-navigation-toolbar">
<p>Menu</p>
<button href="#" class="btn btn-transparent core__left-sidebar-toggle"><i class="fa fa-times"></i></button>
</div>
<!-- User -->
<div class="sidebar__collapse">
<button class="btn btn-transparent collapse-toggle" data-toggle="collapse" data-target="#userCollapse">
<img class="img-responsive" src="//placehold.it/300x300"/>
<span class="user__info-name" title="John Doe">
John Doe
</span>
</button>
<div id="userCollapse" class="collapse">
<div class="list-group list-group-inverse">
<a href="#" class="list-group-item">
<i class="fa fa-pencil"></i>
Edit Profile
</a>
<a href="#" class="list-group-item">
<i class="fa fa-sign-out"></i>
Sign out
</a>
</div>
</div>
</div>
<!-- Admin -->
<div class="sidebar__collapse">
<button class="btn btn-transparent collapse-toggle" data-toggle="collapse" data-target="#adminCollapse">
Admin Actions
</button>
<div id="adminCollapse" class="collapse">
<div class="list-group list-group-inverse">
<a href="#" class="list-group-item">
<i class="fa fa-pencil"></i>
Something
</a>
<a href="#" class="list-group-item">
<i class="fa fa-plus"></i>
Something else
</a>
</div>
</div>
</div>
<!-- Shortcuts -->
<div class="sidebar__collapse">
<button class="btn btn-transparent collapse-toggle" data-toggle="collapse" data-target="#shortcutCollapse">
Shortcuts
</button>
<div id="shortcutCollapse" class="collapse">
<div class="list-group list-group-inverse">
<a href="#" class="list-group-item">
<i class="fa fa-pencil"></i>
Something
</a>
<a href="#" class="list-group-item">
<i class="fa fa-plus"></i>
Something else
</a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar__navigation">
<div class="sidebar__navigation-top">
<p class="text-white">sidebar-navigation-top</p>
</div>
<div class="sidebar__navigation-middle">
<nav class="list-group list-group-inverse">
<ul>
<li class="list-group-item active">
<a href="https://riide.like.st/admin">
<i class="fa fa-dashboard"></i>
Dashboard
</a>
</li>
<li class="list-group-heading">
Developer
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/failed-jobs">
<i class="fa fa-cogs"></i>
Failed jobs
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/backend-users/roles">
<i class="fa fa-graduation-cap"></i>
Roles
</a>
</li>
<li class="list-group-heading">
Super admin
</li>
<li class="list-group-item">
<a href="https://riide.like.st/nstack" target="_blank">
<i class="fa fa-nodes logo">
<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs>
<linearGradient x1="0%" y1="100%" x2="100%" y2="0%" id="logoIconGradient">
<stop class="logo-icon-gradient__0" offset="0%"></stop>
<stop class="logo-icon-gradient__100" stop-color="#37EF81" offset="100%"></stop>
</linearGradient>
</defs>
<g id="00_Guides-/-00.00_Mobile" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="00_Guides/00.00_Mobile/00.00_Mobile_Start" sketch:type="MSArtboardGroup" transform="translate(-136.000000, -48.000000)" fill="url(#logoIconGradient)">
<g id="NStack_Logo" sketch:type="MSLayerGroup" transform="translate(136.000000, 48.000000)">
<path d="M32,35.7206969 L40,31.1024111 L16,17.2464111 L20,14.9366969 L16,12.6269826 L8,17.2464111 L32,31.1024111 L28,33.4121254 L32,35.7206969 Z M36,0.829268293 L28,5.44755401 L32,7.75726829 L36,5.44755401 L44,10.0669826 L44,37.7789826 L36,42.3984111 L16,30.8509826 L20,28.5412683 L16,26.2326969 L8,30.8509826 L36,47.0166969 L48,40.0886969 L48,7.75726829 L36,0.829268293 Z M12,42.6486969 L4,38.0304111 L4,10.3172683 L12,5.69898258 L32,17.2464111 L28,19.5549826 L32,21.8646969 L40,17.2464111 L12,1.07955401 L0,8.00869686 L0,40.3401254 L12,47.2681254 L20,42.6486969 L16,40.3401254 L12,42.6486969 Z" id="Clip-8" sketch:type="MSShapeGroup"></path>
</g>
</g>
</g>
</svg>
</i>
NStack
</a>
</li>
<li class="list-group-heading">
Admin
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/companies?page=1">
<i class="fa fa-building"></i>
Companies
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/users?page=1">
<i class="fa fa-users"></i>
Users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/backend-users?page=1">
<i class="fa fa-street-view"></i>
Backend users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/rewards?page=1">
<i class="fa fa-medkit"></i>
Rewards
</a>
</li>
<li class="list-group-heading">
Admin
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/companies?page=1">
<i class="fa fa-building"></i>
Companies
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/users?page=1">
<i class="fa fa-users"></i>
Users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/backend-users?page=1">
<i class="fa fa-street-view"></i>
Backend users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/rewards?page=1">
<i class="fa fa-medkit"></i>
Rewards
</a>
</li>
<li class="list-group-heading">
Admin
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/companies?page=1">
<i class="fa fa-building"></i>
Companies
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/users?page=1">
<i class="fa fa-users"></i>
Users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/backend-users?page=1">
<i class="fa fa-street-view"></i>
Backend users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/rewards?page=1">
<i class="fa fa-medkit"></i>
Rewards
</a>
</li>
<li class="list-group-heading">
Admin
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/companies?page=1">
<i class="fa fa-building"></i>
Companies
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/users?page=1">
<i class="fa fa-users"></i>
Users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/backend-users?page=1">
<i class="fa fa-street-view"></i>
Backend users
</a>
</li>
<li class="list-group-item">
<a href="https://riide.like.st/admin/rewards?page=1">
<i class="fa fa-medkit"></i>
Rewards
</a>
</li>
</ul>
</nav>
</div>
<div class="sidebar__navigation-bottom">
<p class="text-white">sidebar-navigation-bottom</p>
</div>
</div>
</div>
</div>
<div class="core-layout__content">
<div class="page-header">
<div class="page-header__alerts">
<div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><strong>Major update</strong></p>
<p>We updated something in the code, and you must do something about it:</p>
<p>
<a class="btn btn-warning btn-sm" href="#">Take me there.</a>
<a href="#" class="alert-link">Do not show me this again.</a>
</p>
</div>
</div>
<div class="page-header__breadcrumbs">
<ol class="breadcrumb">
<li>
<a href="/admin">
<span class="fa fa-home"></span>
Home
</a>
</li>
<li><a href="#">some link 1</a></li>
<li><a href="#">some link 2</a></li>
<li><a href="#">some link 3</a></li>
<li><a href="#">some link 4</a></li>
<li><a href="#">some link 5</a></li>
<li><a href="#">some link 6</a></li>
<li><a href="#">some link 7</a></li>
<li><a href="#">some link 8</a></li>
</ol>
</div>
<div class="page-header__actions">
Toolbars
</div>
<div class="page-header__top-section">
<h1>Page title</h1>
<p>page-header-top-section</p>
<p>page-header-top-section</p>
</div>
<div class="page-header__bottom-section">
<p>page-header-bottom-section</p>
<p>page-header-bottom-section</p>
<p>page-header-bottom-section</p>
</div>
</div>
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam animi aut doloribus enim eos et iste itaque iusto magnam, magni minus molestias possimus quaerat ratione recusandae saepe tempore voluptatum. Consequatur debitis, explicabo itaque quaerat quam repellat sint. Aliquam architecto aspernatur consequatur delectus dolorem ea, facere illo iure, nam natus nisi odio odit omnis perferendis provident quam repellat, tempora voluptas? Ab aliquid amet architecto at autem blanditiis cupiditate dolor dolore eaque enim explicabo fugiat impedit, laborum maiores nam non nostrum odit optio perferendis possimus ratione recusandae reprehenderit similique sit soluta suscipit velit veniam. Aut ducimus, eum eveniet fugiat impedit in officia, placeat praesentium quod reiciendis saepe similique temporibus vitae. Assumenda consectetur ex ipsa libero nihil pariatur quisquam repellat tempore, veniam voluptate. Assumenda illum modi molestiae officia pariatur praesentium quae, quaerat temporibus? A accusantium aperiam beatae consectetur cum, dolorum, illo laborum numquam porro provident quod rerum tempora, voluptas? Alias eaque itaque magni nemo odit pariatur possimus repellat. Expedita nemo nesciunt nisi pariatur possimus voluptas voluptate. Aspernatur at beatae blanditiis commodi consequatur, culpa dolore dolorum earum est et ex facere incidunt itaque, nam neque nihil nulla numquam officiis, omnis quae quaerat quas quia sapiente sint tempore ullam velit? A, adipisci atque corporis cum cumque debitis enim eos est fuga id illo, impedit laborum maiores necessitatibus officia qui quis quisquam quod sed sequi sunt suscipit unde ut vitae voluptate voluptatem voluptatum! Ipsa iure minima non ratione unde? Aliquid, aut corporis culpa cumque dignissimos dolore doloremque dolorum illo illum iste iure labore laboriosam neque nesciunt officia pariatur perferendis praesentium quasi quo recusandae repudiandae rerum sit tempora tempore ullam vel velit voluptate! Adipisci, consequatur consequuntur, distinctio eos, est impedit in labore minima minus mollitia natus nisi nobis pariatur provident quibusdam similique veniam voluptatibus. A, cumque cupiditate deserunt, dignissimos ea exercitationem hic iusto molestiae nobis quos repudiandae sed sint soluta temporibus totam unde, voluptas voluptates? Adipisci aperiam asperiores at aut culpa deleniti doloremque est eveniet exercitationem id itaque labore maxime mollitia neque nisi nobis numquam odio omnis quae, quibusdam quo quod unde vitae voluptas voluptatibus. Aperiam cupiditate delectus ducimus earum eos facere facilis illum, in iste itaque laboriosam maxime molestiae praesentium quisquam quo quod, rem suscipit tempora vitae, voluptatum. Aliquid cum cumque deleniti dolore error, esse est fuga harum ipsum labore odio, ratione saepe sequi sint temporibus tenetur ullam, veritatis voluptates? Ab animi aperiam asperiores at commodi consequatur consequuntur cumque delectus dolor dolore dolorem eos explicabo harum in, inventore ipsa libero maiores maxime modi molestiae natus necessitatibus neque nisi non obcaecati officiis optio quae quibusdam, quisquam repellat, saepe sed sit soluta sunt tempora vitae voluptate! Aliquam consectetur distinctio dolores earum fugit, maxime minima nobis quos recusandae reiciendis rerum saepe ut? Asperiores autem cumque dolore dolorem ea eius eligendi illo inventore perspiciatis voluptate. Ipsum modi natus nostrum quia repellat sed voluptatem. Expedita ipsam nesciunt odit quam! Assumenda autem consequatur debitis dolore enim facilis incidunt ipsum labore natus non obcaecati officia praesentium quia sit tempora temporibus, vitae voluptatum. Amet atque corporis cum ex, iure quas sit. Aperiam, culpa dicta earum eveniet exercitationem illum ipsam, iste laborum perspiciatis quas quisquam recusandae repellendus tempora tempore unde? Aliquam eos iusto libero magnam molestiae necessitatibus nemo possimus repudiandae. Accusamus asperiores ipsam molestiae natus. Dicta, rem, vel. Cum ea harum, maiores nemo nostrum omnis temporibus totam! Adipisci autem commodi consectetur cumque debitis dolor eaque eveniet, ex exercitationem fuga harum incidunt libero minus modi nam nostrum numquam omnis placeat ratione rem repellat velit vero voluptatibus. Cum, fugit, veniam. Aperiam, aspernatur autem, cupiditate deleniti dolorem eius et modi odio officiis provident repellendus reprehenderit, tenetur voluptas voluptatem voluptatibus. Assumenda atque consequuntur ex excepturi in laudantium perspiciatis quam quia repellat totam. Ad adipisci aliquam amet aperiam consectetur consequuntur dicta minus mollitia repellat sunt! Aliquid dolorem harum officiis provident quam quo, ratione reprehenderit. At cum dicta doloremque laudantium optio quaerat quas temporibus. Alias at consequuntur distinctio doloribus illum, ipsum libero, maxime porro quia similique, unde voluptate? Delectus impedit nihil perspiciatis quasi quia. Amet at blanditiis cumque, cupiditate ducimus ea fugiat natus nemo nobis, nostrum quam quas quia quo, sequi unde velit veritatis. A distinctio ea, hic id omnis quas quidem. Ab, alias dignissimos dolorum ducimus ea eius eos error esse est et eum ipsa maxime nam nemo nisi nobis quibusdam quidem ratione sapiente similique suscipit voluptate voluptatum. Eius ex magnam quasi vel velit! Architecto asperiores aut consectetur culpa dignissimos ea fuga, impedit iusto minima molestias natus nihil odio officia quae quisquam repellendus, vitae voluptatem. Adipisci eius, esse, ex excepturi ipsa itaque natus nihil nobis nulla, porro quaerat quos rem sint tempore ullam. Consequuntur dolor, dolorem eius est minus necessitatibus nemo omnis possimus quaerat quidem quo, ut? Aperiam assumenda atque aut consequatur corporis culpa cupiditate eaque error expedita explicabo facilis fuga fugit harum hic impedit incidunt magni, molestias natus officiis, praesentium quaerat repellat soluta totam ullam veritatis. Doloribus impedit iure labore magnam minima, qui quia quod rem sit temporibus. Aspernatur dolore id illo, inventore officia quam ratione? Ad, amet consequuntur deserunt ducimus eius esse et eum illum incidunt mollitia necessitatibus neque pariatur perferendis perspiciatis, placeat provident quae quam quasi qui repellat repellendus repudiandae rerum sapiente similique tempora veniam vero voluptatem? Aliquam aut eum iure placeat recusandae. A eum harum iste quo unde vero voluptas. Deleniti dolorem doloribus eligendi illo provident sapiente sit tempora voluptate. Aliquid atque dolor harum illum impedit odio perferendis velit vitae voluptate! Culpa dolorum iusto laboriosam magnam molestias nesciunt nulla placeat praesentium provident quam quibusdam, temporibus. Deleniti dolore minima officiis reiciendis sint. Doloribus dolorum rerum sapiente ullam? Dolore facilis fuga fugit hic magnam molestiae quam, qui suscipit. Alias culpa et eum facere facilis fugit itaque laboriosam nobis non officiis possimus, reiciendis repudiandae sit tempora temporibus tenetur voluptates! Aliquam aut dolores laboriosam nam nobis, omnis perspiciatis provident rerum similique unde? A ab aliquid amet, cumque delectus deleniti dolorem doloribus ducimus eaque earum facere facilis id illum ipsam iste laboriosam magnam maxime minima minus nam neque nesciunt odit officiis perferendis praesentium quo sapiente sint veritatis voluptate voluptatum! Ad architecto ea eaque fuga inventore laudantium nobis quisquam tempora!
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>