diff options
Diffstat (limited to 'apps/projects/src/app/pages/nav/html')
| -rw-r--r-- | apps/projects/src/app/pages/nav/html/side-navigation-v4.html | 211 |
1 files changed, 211 insertions, 0 deletions
diff --git a/apps/projects/src/app/pages/nav/html/side-navigation-v4.html b/apps/projects/src/app/pages/nav/html/side-navigation-v4.html new file mode 100644 index 0000000..1131b4d --- /dev/null +++ b/apps/projects/src/app/pages/nav/html/side-navigation-v4.html @@ -0,0 +1,211 @@ +<div class="padding-component hide@md no-js:is-hidden"> + <button class="btn btn--primary" aria-controls="sidenav-v4">Show sidebar</button> +</div> + +<div class="flex@md"> + <aside id="sidenav-v4" class="sidebar sidebar--static@md js-sidebar" data-static-class="position-relative z-index-2 bg width-100% max-width-xxxxs shadow-sm"> + <div class="sidebar__panel"> + <!-- 👇 header visible only on mobile --> + <header class="sidebar__header bg padding-y-sm padding-left-md padding-right-sm border-bottom z-index-2"> + <h1 class="text-md text-truncate" id="sidebar-title">Menu</h1> + + <button class="reset sidebar__close-btn js-sidebar__close-btn js-tab-focus"> + <svg class="icon icon--xs" viewBox="0 0 16 16"><title>Close panel</title><g stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><line x1="13.5" y1="2.5" x2="2.5" y2="13.5"></line><line x1="2.5" y1="2.5" x2="13.5" y2="13.5"></line></g></svg> + </button> + </header> + + <div class="position-relative z-index-1"> + <nav class="sidenav-v4 padding-xs js-sidenav-v4"> + <ul> + <li class="sidenav-v4__item"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12v7H4v-7"></path> + <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 10l9-9 9 9"></path> + <path d="M10 14a2 2 0 0 1 2 2v2H8v-2a2 2 0 0 1 2-2z"></path> + </g> + </svg> + + <span>Overview</span> + + <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20"> + <g class="icon__group" fill="none" stroke="currentColor" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round"> + <line x1="3" y1="3" x2="17" y2="17" /> + <line x1="17" y1="3" x2="3" y2="17" /> + </g> + </svg> + </a> + + <ul class="sidenav-v4__sub-list"> + <li> + <a class="sidenav-v4__sub-link" href="#0">All Data</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">Category 1</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">Category 2</a> + </li> + </ul> + </li> + + <li class="sidenav-v4__item sidenav-v4__item--current"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <path d="M10 20a2 2 0 0 1-2-2h4a2 2 0 0 1-2 2z"></path> + <path d="M19 15a3 3 0 0 1-3-3V7a6 6 0 0 0-6-6 6 6 0 0 0-6 6v5a3 3 0 0 1-3 3h18z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> + </g> + </svg> + + <span>Notifications</span> + + <span class="sidenav-v4__notification-marker">8 <i class="sr-only">notifications</i></span> + + <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20"> + <g class="icon__group" fill="none" stroke="currentColor" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round"> + <line x1="3" y1="3" x2="17" y2="17" /> + <line x1="17" y1="3" x2="3" y2="17" /> + </g> + </svg> + </a> + + <ul class="sidenav-v4__sub-list"> + <li> + <a class="sidenav-v4__sub-link" href="#0">All Notifications</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0" aria-current="page">Friends</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">Other</a> + </li> + </ul> + </li> + + <li class="sidenav-v4__item"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <path d="M17 2H3a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h4l3 4 3-4h4a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> + </g> + </svg> + + <span>Comments</span> + + <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20"> + <g class="icon__group" fill="none" stroke="currentColor" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round"> + <line x1="3" y1="3" x2="17" y2="17" /> + <line x1="17" y1="3" x2="3" y2="17" /> + </g> + </svg> + </a> + + <ul class="sidenav-v4__sub-list"> + <li> + <a class="sidenav-v4__sub-link" href="#0">All Comments</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">+ New Comment</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">Spam</a> + </li> + </ul> + </li> + + <li class="sidenav-v4__separator" role="presentation"><span></span></li> + + <li class="sidenav-v4__item"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></rect> + <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 14l6-6 2 6H6z"></path><circle cx="6.5" cy="6.5" r="1.5"></circle> + </g> + </svg> + + <span>Assets</span> + + <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20"> + <g class="icon__group" fill="none" stroke="currentColor" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round"> + <line x1="3" y1="3" x2="17" y2="17" /> + <line x1="17" y1="3" x2="3" y2="17" /> + </g> + </svg> + </a> + + <ul class="sidenav-v4__sub-list"> + <li> + <a class="sidenav-v4__sub-link" href="#0">All Assets</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">Upload</a> + </li> + </ul> + </li> + + <li class="sidenav-v4__item"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <circle cx="10" cy="4" r="3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></circle> + <path d="M10 11a8 8 0 0 0-7.562 5.383A2 2 0 0 0 4.347 19h11.306a2 2 0 0 0 1.909-2.617A8 8 0 0 0 10 11z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> + </g> + </svg> + + <span>Users</span> + + <svg class="sidenav-v4__arrow-icon icon margin-left-auto" viewBox="0 0 20 20"> + <g class="icon__group" fill="none" stroke="currentColor" stroke-width="2px" stroke-linecap="round" stroke-linejoin="round"> + <line x1="3" y1="3" x2="17" y2="17" /> + <line x1="17" y1="3" x2="3" y2="17" /> + </g> + </svg> + </a> + + <ul class="sidenav-v4__sub-list"> + <li> + <a class="sidenav-v4__sub-link" href="#0">All Users</a> + </li> + + <li> + <a class="sidenav-v4__sub-link" href="#0">+ New User</a> + </li> + </ul> + </li> + + <li class="sidenav-v4__item"> + <a class="sidenav-v4__link js-sidenav-v4__link" href="#0"> + <svg class="sidenav-v4__icon icon" viewBox="0 0 20 20"> + <g fill="currentColor"> + <path d="M11 16l-1.55 1.55a4.95 4.95 0 0 1-7 0 4.95 4.95 0 0 1 0-7l2.192-2.192a4.95 4.95 0 0 1 7 0A4.907 4.907 0 0 1 12.731 10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> + <path d="M9 4l1.55-1.55a4.95 4.95 0 0 1 7 0 4.95 4.95 0 0 1 0 7l-2.192 2.192a4.95 4.95 0 0 1-7 0A4.907 4.907 0 0 1 7.269 10" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> + </g> + </svg> + + <span>Link</span> + </a> + </li> + </ul> + </nav> + </div> + </div> + </aside> + + <main class="position-relative z-index-1 flex-grow height-100vh sidebar-loaded:show"> + <!-- start main content --> + <div class="text-component padding-md"> + <p>Main content.</p> + </div> + <!-- end main content --> + </main> +</div>
\ No newline at end of file |