From 740f43e2bac7b1eee919351694905fecf9291943 Mon Sep 17 00:00:00 2001
From: ivarlovlie <git@ivarlovlie.no>
Date: Sun, 21 Aug 2022 16:56:11 +0200
Subject: feat: Before tailwind

---
 .../src/app/pages/nav/html/side-navigation-v4.html | 211 +++++++++++++++++++++
 1 file changed, 211 insertions(+)
 create mode 100644 apps/projects/src/app/pages/nav/html/side-navigation-v4.html

(limited to 'apps/projects/src/app/pages/nav/html')

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
-- 
cgit v1.3