aboutsummaryrefslogtreecommitdiffstats
path: root/old-apps/projects/src/app/pages/nav
diff options
context:
space:
mode:
Diffstat (limited to 'old-apps/projects/src/app/pages/nav')
-rw-r--r--old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css179
-rw-r--r--old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css213
-rw-r--r--old-apps/projects/src/app/pages/nav/html/side-navigation-v4.html211
-rw-r--r--old-apps/projects/src/app/pages/nav/index.ts6
-rw-r--r--old-apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js296
-rw-r--r--old-apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js215
-rw-r--r--old-apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js73
-rw-r--r--old-apps/projects/src/app/pages/nav/nav-item.svelte18
-rw-r--r--old-apps/projects/src/app/pages/nav/nav-wrapper.svelte20
-rw-r--r--old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss147
-rw-r--r--old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss237
-rw-r--r--old-apps/projects/src/app/pages/nav/side-navigation-v4.zipbin0 -> 13503 bytes
12 files changed, 1615 insertions, 0 deletions
diff --git a/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css b/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css
new file mode 100644
index 0000000..515a9f2
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css
@@ -0,0 +1,179 @@
+/* --------------------------------
+
+File#: _1_responsive-sidebar
+Title: Responsive Sidebar
+Descr: Responsive sidebar container
+Usage: codyhouse.co/license
+
+-------------------------------- */
+/* mobile version only (--default) 👇 */
+.sidebar:not(.sidebar--static) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-index-fixed-element, 10);
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ transition: visibility 0s 0.3s;
+}
+.sidebar:not(.sidebar--static)::after {
+ /* overlay layer */
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0);
+ transition: background-color 0.3s;
+ z-index: 1;
+}
+.sidebar:not(.sidebar--static) .sidebar__panel {
+ /* content */
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ width: 100%;
+ max-width: 380px;
+ height: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ background-color: var(--color-bg);
+ -webkit-transform: translateX(-100%);
+ transform: translateX(-100%);
+ transition: box-shadow 0.3s, -webkit-transform 0.3s;
+ transition: box-shadow 0.3s, transform 0.3s;
+ transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s;
+}
+.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
+ left: auto;
+ right: 0;
+ -webkit-transform: translateX(100%);
+ transform: translateX(100%);
+}
+.sidebar:not(.sidebar--static).sidebar--is-visible {
+ visibility: visible;
+ transition: none;
+}
+.sidebar:not(.sidebar--static).sidebar--is-visible::after {
+ background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.85);
+}
+.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ box-shadow: var(--shadow-md);
+}
+
+/* end mobile version */
+.sidebar__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+}
+
+.sidebar__close-btn {
+ --size: 32px;
+ width: var(--size);
+ height: var(--size);
+ display: flex;
+ border-radius: 50%;
+ background-color: var(--color-bg-light);
+ box-shadow: var(--inner-glow), var(--shadow-sm);
+ transition: 0.2s;
+ flex-shrink: 0;
+}
+.sidebar__close-btn .icon {
+ display: block;
+ margin: auto;
+}
+.sidebar__close-btn:hover {
+ background-color: var(--color-bg-lighter);
+ box-shadow: var(--inner-glow), var(--shadow-md);
+}
+
+/* desktop version only (--static) 👇 */
+.sidebar--static {
+ flex-shrink: 0;
+ flex-grow: 1;
+}
+.sidebar--static .sidebar__header {
+ display: none;
+}
+
+.sidebar--sticky-on-desktop {
+ position: -webkit-sticky;
+ position: sticky;
+ top: var(--space-sm);
+ max-height: calc(100vh - var(--space-sm));
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* end desktop version */
+.sidebar, .sidebar-loaded\:show {
+ opacity: 0;
+ /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
+}
+
+.sidebar--loaded {
+ opacity: 1;
+}
+
+/* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
+[class*=sidebar--static]::before {
+ display: none;
+}
+
+.sidebar--static::before {
+ content: "static";
+}
+
+.sidebar--static\@xs::before {
+ content: "mobile";
+}
+@media (min-width: 32rem) {
+ .sidebar--static\@xs::before {
+ content: "static";
+ }
+}
+
+.sidebar--static\@sm::before {
+ content: "mobile";
+}
+@media (min-width: 48rem) {
+ .sidebar--static\@sm::before {
+ content: "static";
+ }
+}
+
+.sidebar--static\@md::before {
+ content: "mobile";
+}
+@media (min-width: 64rem) {
+ .sidebar--static\@md::before {
+ content: "static";
+ }
+}
+
+.sidebar--static\@lg::before {
+ content: "mobile";
+}
+@media (min-width: 80rem) {
+ .sidebar--static\@lg::before {
+ content: "static";
+ }
+}
+
+.sidebar--static\@xl::before {
+ content: "mobile";
+}
+@media (min-width: 90rem) {
+ .sidebar--static\@xl::before {
+ content: "static";
+ }
+} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css b/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css
new file mode 100644
index 0000000..ec5fcdf
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css
@@ -0,0 +1,213 @@
+/* --------------------------------
+
+File#: _2_side-navigation-v4
+Title: Side Navigation v4
+Descr: Main, side navigation
+Usage: codyhouse.co/license
+
+-------------------------------- */
+.sidenav-v4 {
+ --sidenav-v4-icon-size: 20px;
+ --sidenav-v4-icon-margin-right: var(--space-xxs);
+}
+
+.sidenav-v4__item {
+ position: relative;
+}
+
+.sidenav-v4__link,
+.sidenav-v4__sub-link,
+.sidenav-v4__separator {
+ padding: var(--space-sm);
+}
+
+.sidenav-v4__link, .sidenav-v4__sub-link {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ border-radius: var(--radius-md);
+ text-decoration: none;
+ color: inherit;
+ line-height: 1;
+ font-size: var(--text-md);
+ transition: 0.2s;
+}
+.sidenav-v4__link:hover, .sidenav-v4__sub-link:hover {
+ color: var(--color-primary);
+ background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
+}
+.sidenav-v4__link[aria-current=page], .sidenav-v4__sub-link[aria-current=page] {
+ color: var(--color-primary);
+}
+
+.sidenav-v4__sub-link {
+ position: relative;
+ color: var(--color-contrast-medium);
+ /* dot indicator */
+}
+.sidenav-v4__sub-link::before {
+ content: "";
+ display: block;
+ --size: 6px;
+ width: var(--size);
+ height: var(--size);
+ background: currentColor;
+ border-radius: 50%;
+ margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2);
+ margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right));
+ opacity: 0;
+ /* visible only if current */
+}
+.sidenav-v4__sub-link[aria-current=page]::before {
+ /* show dot indicator */
+ opacity: 1;
+}
+
+.sidenav-v4__notification-marker {
+ margin-left: auto;
+ background-color: var(--color-accent);
+ border-radius: var(--radius-md);
+ height: 16px;
+ line-height: 16px;
+ padding: 0 4px;
+ color: var(--color-white);
+ font-size: 12px;
+ /* hide - visible only on desktop */
+ display: none;
+}
+
+/* label icon */
+.sidenav-v4__icon {
+ --size: var(--sidenav-v4-icon-size);
+ margin-right: var(--sidenav-v4-icon-margin-right);
+}
+
+/* arrow icon - visible on mobile if item is expandable */
+.sidenav-v4__arrow-icon {
+ --size: 20px;
+ /* hide icon for links - show only for buttons created in JS */
+}
+.sidenav-v4__arrow-icon .icon__group {
+ will-change: transform;
+ -webkit-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ transition: -webkit-transform 0.3s var(--ease-out);
+ transition: transform 0.3s var(--ease-out);
+ transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
+}
+.sidenav-v4__arrow-icon .icon__group > * {
+ -webkit-transform-origin: 50% 50%;
+ transform-origin: 50% 50%;
+ stroke-dasharray: 20;
+ stroke-dashoffset: 0;
+ -webkit-transform: translateY(0px);
+ transform: translateY(0px);
+ transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
+ transition: transform 0.3s, stroke-dashoffset 0.3s;
+ transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
+ transition-timing-function: var(--ease-out);
+}
+.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+}
+.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > * {
+ -webkit-transform: translateY(4px);
+ transform: translateY(4px);
+}
+.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:first-child {
+ stroke-dashoffset: 10.15;
+}
+.sidenav-v4__item--collapsed .sidenav-v4__arrow-icon .icon__group > *:last-child {
+ stroke-dashoffset: 10.15;
+}
+.sidenav-v4__link--href .sidenav-v4__arrow-icon {
+ display: none;
+}
+
+/* current item */
+.sidenav-v4__item--current .sidenav-v4__sub-list {
+ display: block;
+ /* show sublist */
+}
+
+/* separator */
+.sidenav-v4__separator span {
+ display: block;
+ width: var(--sidenav-v4-icon-size);
+ height: 1px;
+ background-color: var(--color-contrast-lower);
+}
+
+/* mobile only */
+@media not all and (min-width: 64rem) {
+ .sidenav-v4__item--collapsed .sidenav-v4__sub-list {
+ display: none;
+ }
+
+ .sidenav-v4__link--href {
+ display: none;
+ /* hide link -> show button */
+ }
+}
+/* desktop */
+@media (min-width: 64rem) {
+ .sidenav-v4__sub-list {
+ display: none;
+ }
+
+ .sidenav-v4__link,
+.sidenav-v4__sub-link,
+.sidenav-v4__separator {
+ padding: var(--space-xs);
+ }
+
+ .sidenav-v4__link,
+.sidenav-v4__sub-link {
+ font-size: var(--text-sm);
+ }
+
+ .sidenav-v4__link--btn {
+ display: none;
+ /* hide button -> show link */
+ }
+
+ /* tooltip */
+ .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-list {
+ width: 220px;
+ position: absolute;
+ z-index: var(--z-index-overlay);
+ left: 100%;
+ top: 0;
+ background-color: var(--color-bg-light);
+ box-shadow: var(--inner-glow), var(--shadow-md);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ }
+ .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link {
+ border-radius: 0;
+ color: var(--color-contrast-high);
+ }
+ .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link::before {
+ display: none;
+ /* remove dot indicator */
+ }
+ .sidenav-v4__item:not(.sidenav-v4__item--current) .sidenav-v4__sub-link:hover {
+ color: var(--color-primary);
+ }
+ .sidenav-v4__item:not(.sidenav-v4__item--current).sidenav-v4__item--hover .sidenav-v4__sub-list, .sidenav-v4__item:not(.sidenav-v4__item--current):focus-within .sidenav-v4__sub-list {
+ display: block;
+ }
+ .sidenav-v4__item:not(.sidenav-v4__item--current):hover .sidenav-v4__link {
+ /* highlight main link if tooltip is visible */
+ color: var(--color-primary);
+ background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
+ }
+
+ /* notification marker */
+ .sidenav-v4__notification-marker {
+ display: block;
+ }
+} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/html/side-navigation-v4.html b/old-apps/projects/src/app/pages/nav/html/side-navigation-v4.html
new file mode 100644
index 0000000..1131b4d
--- /dev/null
+++ b/old-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
diff --git a/old-apps/projects/src/app/pages/nav/index.ts b/old-apps/projects/src/app/pages/nav/index.ts
new file mode 100644
index 0000000..ca91c20
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/index.ts
@@ -0,0 +1,6 @@
+import NavWrapper from "./nav-wrapper.svelte";
+import NavItem from "./nav-item.svelte";
+export {
+ NavWrapper,
+ NavItem
+} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js b/old-apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js
new file mode 100644
index 0000000..ed4a47d
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js
@@ -0,0 +1,296 @@
+// File#: _1_diagonal-movement
+// Usage: codyhouse.co/license
+/*
+ Modified version of the jQuery-menu-aim plugin
+ https://github.com/kamens/jQuery-menu-aim
+ - Replaced jQuery with Vanilla JS
+ - Minor changes
+*/
+(function() {
+ var menuAim = function(opts) {
+ init(opts);
+ };
+
+ window.menuAim = menuAim;
+
+ function init(opts) {
+ var activeRow = null,
+ mouseLocs = [],
+ lastDelayLoc = null,
+ timeoutId = null,
+ options = Util.extend({
+ menu: '',
+ rows: false, //if false, get direct children - otherwise pass nodes list
+ submenuSelector: "*",
+ submenuDirection: "right",
+ tolerance: 75, // bigger = more forgivey when entering submenu
+ enter: function(){},
+ exit: function(){},
+ activate: function(){},
+ deactivate: function(){},
+ exitMenu: function(){}
+ }, opts),
+ menu = options.menu;
+
+ var MOUSE_LOCS_TRACKED = 3, // number of past mouse locations to track
+ DELAY = 300; // ms delay when user appears to be entering submenu
+
+ /**
+ * Keep track of the last few locations of the mouse.
+ */
+ var mouseMoveFallback = function(event) {
+ (!window.requestAnimationFrame) ? mousemoveDocument(event) : window.requestAnimationFrame(function(){mousemoveDocument(event);});
+ };
+
+ var mousemoveDocument = function(e) {
+ mouseLocs.push({x: e.pageX, y: e.pageY});
+
+ if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
+ mouseLocs.shift();
+ }
+ };
+
+ /**
+ * Cancel possible row activations when leaving the menu entirely
+ */
+ var mouseleaveMenu = function() {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+
+ // If exitMenu is supplied and returns true, deactivate the
+ // currently active row on menu exit.
+ if (options.exitMenu(this)) {
+ if (activeRow) {
+ options.deactivate(activeRow);
+ }
+
+ activeRow = null;
+ }
+ };
+
+ /**
+ * Trigger a possible row activation whenever entering a new row.
+ */
+ var mouseenterRow = function() {
+ if (timeoutId) {
+ // Cancel any previous activation delays
+ clearTimeout(timeoutId);
+ }
+
+ options.enter(this);
+ possiblyActivate(this);
+ },
+ mouseleaveRow = function() {
+ options.exit(this);
+ };
+
+ /*
+ * Immediately activate a row if the user clicks on it.
+ */
+ var clickRow = function() {
+ activate(this);
+ };
+
+ /**
+ * Activate a menu row.
+ */
+ var activate = function(row) {
+ if (row == activeRow) {
+ return;
+ }
+
+ if (activeRow) {
+ options.deactivate(activeRow);
+ }
+
+ options.activate(row);
+ activeRow = row;
+ };
+
+ /**
+ * Possibly activate a menu row. If mouse movement indicates that we
+ * shouldn't activate yet because user may be trying to enter
+ * a submenu's content, then delay and check again later.
+ */
+ var possiblyActivate = function(row) {
+ var delay = activationDelay();
+
+ if (delay) {
+ timeoutId = setTimeout(function() {
+ possiblyActivate(row);
+ }, delay);
+ } else {
+ activate(row);
+ }
+ };
+
+ /**
+ * Return the amount of time that should be used as a delay before the
+ * currently hovered row is activated.
+ *
+ * Returns 0 if the activation should happen immediately. Otherwise,
+ * returns the number of milliseconds that should be delayed before
+ * checking again to see if the row should be activated.
+ */
+ var activationDelay = function() {
+ if (!activeRow || !Util.is(activeRow, options.submenuSelector)) {
+ // If there is no other submenu row already active, then
+ // go ahead and activate immediately.
+ return 0;
+ }
+
+ function getOffset(element) {
+ var rect = element.getBoundingClientRect();
+ return { top: rect.top + window.pageYOffset, left: rect.left + window.pageXOffset };
+ };
+
+ var offset = getOffset(menu),
+ upperLeft = {
+ x: offset.left,
+ y: offset.top - options.tolerance
+ },
+ upperRight = {
+ x: offset.left + menu.offsetWidth,
+ y: upperLeft.y
+ },
+ lowerLeft = {
+ x: offset.left,
+ y: offset.top + menu.offsetHeight + options.tolerance
+ },
+ lowerRight = {
+ x: offset.left + menu.offsetWidth,
+ y: lowerLeft.y
+ },
+ loc = mouseLocs[mouseLocs.length - 1],
+ prevLoc = mouseLocs[0];
+
+ if (!loc) {
+ return 0;
+ }
+
+ if (!prevLoc) {
+ prevLoc = loc;
+ }
+
+ if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x || prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
+ // If the previous mouse location was outside of the entire
+ // menu's bounds, immediately activate.
+ return 0;
+ }
+
+ if (lastDelayLoc && loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
+ // If the mouse hasn't moved since the last time we checked
+ // for activation status, immediately activate.
+ return 0;
+ }
+
+ // Detect if the user is moving towards the currently activated
+ // submenu.
+ //
+ // If the mouse is heading relatively clearly towards
+ // the submenu's content, we should wait and give the user more
+ // time before activating a new row. If the mouse is heading
+ // elsewhere, we can immediately activate a new row.
+ //
+ // We detect this by calculating the slope formed between the
+ // current mouse location and the upper/lower right points of
+ // the menu. We do the same for the previous mouse location.
+ // If the current mouse location's slopes are
+ // increasing/decreasing appropriately compared to the
+ // previous's, we know the user is moving toward the submenu.
+ //
+ // Note that since the y-axis increases as the cursor moves
+ // down the screen, we are looking for the slope between the
+ // cursor and the upper right corner to decrease over time, not
+ // increase (somewhat counterintuitively).
+ function slope(a, b) {
+ return (b.y - a.y) / (b.x - a.x);
+ };
+
+ var decreasingCorner = upperRight,
+ increasingCorner = lowerRight;
+
+ // Our expectations for decreasing or increasing slope values
+ // depends on which direction the submenu opens relative to the
+ // main menu. By default, if the menu opens on the right, we
+ // expect the slope between the cursor and the upper right
+ // corner to decrease over time, as explained above. If the
+ // submenu opens in a different direction, we change our slope
+ // expectations.
+ if (options.submenuDirection == "left") {
+ decreasingCorner = lowerLeft;
+ increasingCorner = upperLeft;
+ } else if (options.submenuDirection == "below") {
+ decreasingCorner = lowerRight;
+ increasingCorner = lowerLeft;
+ } else if (options.submenuDirection == "above") {
+ decreasingCorner = upperLeft;
+ increasingCorner = upperRight;
+ }
+
+ var decreasingSlope = slope(loc, decreasingCorner),
+ increasingSlope = slope(loc, increasingCorner),
+ prevDecreasingSlope = slope(prevLoc, decreasingCorner),
+ prevIncreasingSlope = slope(prevLoc, increasingCorner);
+
+ if (decreasingSlope < prevDecreasingSlope && increasingSlope > prevIncreasingSlope) {
+ // Mouse is moving from previous location towards the
+ // currently activated submenu. Delay before activating a
+ // new menu row, because user may be moving into submenu.
+ lastDelayLoc = loc;
+ return DELAY;
+ }
+
+ lastDelayLoc = null;
+ return 0;
+ };
+
+ var reset = function(triggerDeactivate) {
+ if (timeoutId) {
+ clearTimeout(timeoutId);
+ }
+
+ if (activeRow && triggerDeactivate) {
+ options.deactivate(activeRow);
+ }
+
+ activeRow = null;
+ };
+
+ var destroyInstance = function() {
+ menu.removeEventListener('mouseleave', mouseleaveMenu);
+ document.removeEventListener('mousemove', mouseMoveFallback);
+ if(rows.length > 0) {
+ for(var i = 0; i < rows.length; i++) {
+ rows[i].removeEventListener('mouseenter', mouseenterRow);
+ rows[i].removeEventListener('mouseleave', mouseleaveRow);
+ rows[i].removeEventListener('click', clickRow);
+ }
+ }
+
+ };
+
+ /**
+ * Hook up initial menu events
+ */
+ menu.addEventListener('mouseleave', mouseleaveMenu);
+ var rows = (options.rows) ? options.rows : menu.children;
+ if(rows.length > 0) {
+ for(var i = 0; i < rows.length; i++) {(function(i){
+ rows[i].addEventListener('mouseenter', mouseenterRow);
+ rows[i].addEventListener('mouseleave', mouseleaveRow);
+ rows[i].addEventListener('click', clickRow);
+ })(i);}
+ }
+
+ document.addEventListener('mousemove', mouseMoveFallback);
+
+ /* Reset/destroy menu */
+ menu.addEventListener('reset', function(event){
+ reset(event.detail);
+ });
+ menu.addEventListener('destroy', destroyInstance);
+ };
+}());
+
diff --git a/old-apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js b/old-apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js
new file mode 100644
index 0000000..f9599d8
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js
@@ -0,0 +1,215 @@
+// File#: _1_responsive-sidebar
+// Usage: codyhouse.co/license
+(function() {
+ var Sidebar = function(element) {
+ this.element = element;
+ this.triggers = document.querySelectorAll('[aria-controls="'+this.element.getAttribute('id')+'"]');
+ this.firstFocusable = null;
+ this.lastFocusable = null;
+ this.selectedTrigger = null;
+ this.showClass = "sidebar--is-visible";
+ this.staticClass = "sidebar--static";
+ this.customStaticClass = "";
+ this.readyClass = "sidebar--loaded";
+ this.contentReadyClass = "sidebar-loaded:show";
+ this.layout = false; // this will be static or mobile
+ this.preventScrollEl = getPreventScrollEl(this);
+ getCustomStaticClass(this); // custom classes for static version
+ initSidebar(this);
+ };
+
+ function getPreventScrollEl(element) {
+ var scrollEl = false;
+ var querySelector = element.element.getAttribute('data-sidebar-prevent-scroll');
+ if(querySelector) scrollEl = document.querySelector(querySelector);
+ return scrollEl;
+ };
+
+ function getCustomStaticClass(element) {
+ var customClasses = element.element.getAttribute('data-static-class');
+ if(customClasses) element.customStaticClass = ' '+customClasses;
+ };
+
+ function initSidebar(sidebar) {
+ initSidebarResize(sidebar); // handle changes in layout -> mobile to static and viceversa
+
+ if ( sidebar.triggers ) { // open sidebar when clicking on trigger buttons - mobile layout only
+ for(var i = 0; i < sidebar.triggers.length; i++) {
+ sidebar.triggers[i].addEventListener('click', function(event) {
+ event.preventDefault();
+ toggleSidebar(sidebar, event.target);
+ });
+ }
+ }
+
+ // use the 'openSidebar' event to trigger the sidebar
+ sidebar.element.addEventListener('openSidebar', function(event) {
+ toggleSidebar(sidebar, event.detail);
+ });
+ };
+
+ function toggleSidebar(sidebar, target) {
+ if(Util.hasClass(sidebar.element, sidebar.showClass)) {
+ sidebar.selectedTrigger = target;
+ closeSidebar(sidebar);
+ return;
+ }
+ sidebar.selectedTrigger = target;
+ showSidebar(sidebar);
+ initSidebarEvents(sidebar);
+ };
+
+ function showSidebar(sidebar) { // mobile layout only
+ Util.addClass(sidebar.element, sidebar.showClass);
+ getFocusableElements(sidebar);
+ Util.moveFocus(sidebar.element);
+ // change the overflow of the preventScrollEl
+ if(sidebar.preventScrollEl) sidebar.preventScrollEl.style.overflow = 'hidden';
+ };
+
+ function closeSidebar(sidebar) { // mobile layout only
+ Util.removeClass(sidebar.element, sidebar.showClass);
+ sidebar.firstFocusable = null;
+ sidebar.lastFocusable = null;
+ if(sidebar.selectedTrigger) sidebar.selectedTrigger.focus();
+ sidebar.element.removeAttribute('tabindex');
+ //remove listeners
+ cancelSidebarEvents(sidebar);
+ // change the overflow of the preventScrollEl
+ if(sidebar.preventScrollEl) sidebar.preventScrollEl.style.overflow = '';
+ };
+
+ function initSidebarEvents(sidebar) { // mobile layout only
+ //add event listeners
+ sidebar.element.addEventListener('keydown', handleEvent.bind(sidebar));
+ sidebar.element.addEventListener('click', handleEvent.bind(sidebar));
+ };
+
+ function cancelSidebarEvents(sidebar) { // mobile layout only
+ //remove event listeners
+ sidebar.element.removeEventListener('keydown', handleEvent.bind(sidebar));
+ sidebar.element.removeEventListener('click', handleEvent.bind(sidebar));
+ };
+
+ function handleEvent(event) { // mobile layout only
+ switch(event.type) {
+ case 'click': {
+ initClick(this, event);
+ }
+ case 'keydown': {
+ initKeyDown(this, event);
+ }
+ }
+ };
+
+ function initKeyDown(sidebar, event) { // mobile layout only
+ if( event.keyCode && event.keyCode == 27 || event.key && event.key == 'Escape' ) {
+ //close sidebar window on esc
+ closeSidebar(sidebar);
+ } else if( event.keyCode && event.keyCode == 9 || event.key && event.key == 'Tab' ) {
+ //trap focus inside sidebar
+ trapFocus(sidebar, event);
+ }
+ };
+
+ function initClick(sidebar, event) { // mobile layout only
+ //close sidebar when clicking on close button or sidebar bg layer
+ if( !event.target.closest('.js-sidebar__close-btn') && !Util.hasClass(event.target, 'js-sidebar') ) return;
+ event.preventDefault();
+ closeSidebar(sidebar);
+ };
+
+ function trapFocus(sidebar, event) { // mobile layout only
+ if( sidebar.firstFocusable == document.activeElement && event.shiftKey) {
+ //on Shift+Tab -> focus last focusable element when focus moves out of sidebar
+ event.preventDefault();
+ sidebar.lastFocusable.focus();
+ }
+ if( sidebar.lastFocusable == document.activeElement && !event.shiftKey) {
+ //on Tab -> focus first focusable element when focus moves out of sidebar
+ event.preventDefault();
+ sidebar.firstFocusable.focus();
+ }
+ };
+
+ function initSidebarResize(sidebar) {
+ // custom event emitted when window is resized - detect only if the sidebar--static@{breakpoint} class was added
+ var beforeContent = getComputedStyle(sidebar.element, ':before').getPropertyValue('content');
+ if(beforeContent && beforeContent !='' && beforeContent !='none') {
+ checkSidebarLayout(sidebar);
+
+ sidebar.element.addEventListener('update-sidebar', function(event){
+ checkSidebarLayout(sidebar);
+ });
+ }
+ // check if there a main element to show
+ var mainContent = document.getElementsByClassName(sidebar.contentReadyClass);
+ if(mainContent.length > 0) Util.removeClass(mainContent[0], sidebar.contentReadyClass);
+ Util.addClass(sidebar.element, sidebar.readyClass);
+ };
+
+ function checkSidebarLayout(sidebar) {
+ var layout = getComputedStyle(sidebar.element, ':before').getPropertyValue('content').replace(/\'|"/g, '');
+ if(layout == sidebar.layout) return;
+ sidebar.layout = layout;
+ if(layout != 'static') Util.addClass(sidebar.element, 'is-hidden');
+ Util.toggleClass(sidebar.element, sidebar.staticClass + sidebar.customStaticClass, layout == 'static');
+ if(layout != 'static') setTimeout(function(){Util.removeClass(sidebar.element, 'is-hidden')});
+ // reset element role
+ (layout == 'static') ? sidebar.element.removeAttribute('role', 'alertdialog') : sidebar.element.setAttribute('role', 'alertdialog');
+ // reset mobile behaviour
+ if(layout == 'static' && Util.hasClass(sidebar.element, sidebar.showClass)) closeSidebar(sidebar);
+ };
+
+ function getFocusableElements(sidebar) {
+ //get all focusable elements inside the drawer
+ var allFocusable = sidebar.element.querySelectorAll('[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable], audio[controls], video[controls], summary');
+ getFirstVisible(sidebar, allFocusable);
+ getLastVisible(sidebar, allFocusable);
+ };
+
+ function getFirstVisible(sidebar, elements) {
+ //get first visible focusable element inside the sidebar
+ for(var i = 0; i < elements.length; i++) {
+ if( elements[i].offsetWidth || elements[i].offsetHeight || elements[i].getClientRects().length ) {
+ sidebar.firstFocusable = elements[i];
+ return true;
+ }
+ }
+ };
+
+ function getLastVisible(sidebar, elements) {
+ //get last visible focusable element inside the sidebar
+ for(var i = elements.length - 1; i >= 0; i--) {
+ if( elements[i].offsetWidth || elements[i].offsetHeight || elements[i].getClientRects().length ) {
+ sidebar.lastFocusable = elements[i];
+ return true;
+ }
+ }
+ };
+
+ window.Sidebar = Sidebar;
+
+ //initialize the Sidebar objects
+ var sidebar = document.getElementsByClassName('js-sidebar');
+ if( sidebar.length > 0 ) {
+ for( var i = 0; i < sidebar.length; i++) {
+ (function(i){new Sidebar(sidebar[i]);})(i);
+ }
+ // switch from mobile to static layout
+ var customEvent = new CustomEvent('update-sidebar');
+ window.addEventListener('resize', function(event){
+ (!window.requestAnimationFrame) ? setTimeout(function(){resetLayout();}, 250) : window.requestAnimationFrame(resetLayout);
+ });
+
+ (window.requestAnimationFrame) // init sidebar layout
+ ? window.requestAnimationFrame(resetLayout)
+ : resetLayout();
+
+ function resetLayout() {
+ for( var i = 0; i < sidebar.length; i++) {
+ (function(i){sidebar[i].dispatchEvent(customEvent)})(i);
+ };
+ };
+ }
+}()); \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js b/old-apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js
new file mode 100644
index 0000000..63ef9c4
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js
@@ -0,0 +1,73 @@
+// File#: _2_side-navigation-v4
+// Usage: codyhouse.co/license
+(function() {
+ function initSideNav(nav) {
+ // create btns - visible on mobile only
+ createBtns(nav);
+ // toggle sublists on mobile when clicking on buttons
+ toggleSubLists(nav);
+ // init diagonal movement
+ initDiagonalMove(nav);
+ };
+
+ function createBtns(nav) {
+ // on mobile -> create a <button> element for each link with a submenu
+ var expandableLinks = nav.getElementsByClassName('js-sidenav-v4__link');
+ for(var i = 0; i < expandableLinks.length; i++) {
+ createSingleBtn(expandableLinks[i]);
+ }
+ };
+
+ function createSingleBtn(link) {
+ if(!hasSubList(link)) return;
+ // create btn and insert it into the DOM
+ var btnClasses = link.getAttribute('class').replace('js-sidenav-v4__link', 'js-sidenav-v4__btn');
+ btnClasses = btnClasses +' sidenav-v4__link--btn';
+ var btnHtml = '<button class="reset '+btnClasses+'">'+link.innerHTML+'</button>';
+ link.insertAdjacentHTML('afterend', btnHtml);
+ // add class to link element
+ Util.addClass(link, 'sidenav-v4__link--href');
+ // check if we need to add the collpsed class to the <li> element
+ var listItem = link.parentElement;
+ if(!Util.hasClass(listItem, 'sidenav-v4__item--current')) Util.addClass(listItem, 'sidenav-v4__item--collapsed');
+ };
+
+ function hasSubList(link) {
+ // check if link has submenu
+ var sublist = link.nextElementSibling;
+ if(!sublist) return false;
+ return Util.hasClass(sublist, 'sidenav-v4__sub-list');
+ };
+
+ function toggleSubLists(nav) {
+ // open/close sublist on mobile
+ nav.addEventListener('click', function(event){
+ var btn = event.target.closest('.js-sidenav-v4__btn');
+ if(!btn) return;
+ Util.toggleClass(btn.parentElement, 'sidenav-v4__item--collapsed', !Util.hasClass(btn.parentElement, 'sidenav-v4__item--collapsed'));
+ });
+ };
+
+ function initDiagonalMove(nav) {
+ // improve dropdown navigation
+ new menuAim({
+ menu: nav.querySelector('ul'),
+ activate: function(row) {
+ Util.addClass(row, 'sidenav-v4__item--hover');
+ },
+ deactivate: function(row) {
+ Util.removeClass(row, 'sidenav-v4__item--hover');
+ },
+ exitMenu: function() {
+ return true;
+ },
+ });
+ };
+
+ var sideNavs = document.getElementsByClassName('js-sidenav-v4');
+ if( sideNavs.length > 0 ) {
+ for( var i = 0; i < sideNavs.length; i++) {
+ (function(i){initSideNav(sideNavs[i]);})(i);
+ }
+ }
+}()); \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/nav-item.svelte b/old-apps/projects/src/app/pages/nav/nav-item.svelte
new file mode 100644
index 0000000..335cbbb
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/nav-item.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+ import {link} from "svelte-spa-router";
+ import Icon from "$shared/components/icon.svelte";
+
+ export let external = "";
+ export let to = "";
+ export let text;
+ export let icon;
+</script>
+
+<li class="sidenav-v4__item">
+ <a class="sidenav-v4__link" href={to ?? external} use:link={external === ""}>
+ {#if icon}
+ <Icon class="sidenav-v4__icon icon" name="{icon}" />
+ {/if}
+ <span>{text}</span>
+ </a>
+</li>
diff --git a/old-apps/projects/src/app/pages/nav/nav-wrapper.svelte b/old-apps/projects/src/app/pages/nav/nav-wrapper.svelte
new file mode 100644
index 0000000..8321544
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/nav-wrapper.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+ import {random_string} from "$shared/lib/helpers";
+
+ export let id = "nav__" + random_string(4);
+ const staticClasses = "position-relative z-index-2 bg width-100% max-width-xxxxs shadow-sm"
+</script>
+<div class="flex@md">
+ <aside id="{id}" class="sidebar sidebar--static@md {staticClasses}">
+ <div class="sidebar__panel">
+ <div class="position-relative z-index-1">
+ <nav class="sidenav-v4 padding-xs">
+ <slot name="navigation-items"></slot>
+ </nav>
+ </div>
+ </div>
+ </aside>
+ <main class="container max-width-xl position-relative z-index-1 flex-grow min-height-100vh position-sticky@md top-0@md height-100vh@md overflow-auto@m">
+ <slot name="main-content"></slot>
+ </main>
+</div> \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss b/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss
new file mode 100644
index 0000000..e4304f1
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss
@@ -0,0 +1,147 @@
+@use '../base' as *;
+
+/* --------------------------------
+
+File#: _1_responsive-sidebar
+Title: Responsive Sidebar
+Descr: Responsive sidebar container
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+/* mobile version only (--default) 👇 */
+.sidebar:not(.sidebar--static) {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: var(--z-index-fixed-element, 10);
+ width: 100%;
+ height: 100%;
+ visibility: hidden;
+ transition: visibility 0s 0.3s;
+
+ &::after { /* overlay layer */
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: alpha(var(--color-black), 0);
+ transition: background-color .3s;
+ z-index: 1;
+ }
+
+ .sidebar__panel { /* content */
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ width: 100%;
+ max-width: 380px;
+ height: 100%;
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+ background-color: var(--color-bg);
+ transform: translateX(-100%);
+ transition: box-shadow 0.3s,transform 0.3s;
+ }
+
+ &.sidebar--right-on-mobile {
+ .sidebar__panel {
+ left: auto;
+ right: 0;
+ transform: translateX(100%);
+ }
+ }
+
+ &.sidebar--is-visible {
+ visibility: visible;
+ transition: none;
+
+ &::after {
+ background-color: alpha(var(--color-black), 0.85);
+ }
+
+ .sidebar__panel {
+ transform: translateX(0);
+ box-shadow: var(--shadow-md);
+ }
+ }
+}
+/* end mobile version */
+
+.sidebar__header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ position: sticky;
+ top: 0;
+}
+
+.sidebar__close-btn {
+ --size: 32px;
+ width: var(--size);
+ height: var(--size);
+ display: flex;
+ border-radius: 50%;
+ background-color: var(--color-bg-light);
+ box-shadow: var(--inner-glow), var(--shadow-sm);
+ transition: .2s;
+ flex-shrink: 0;
+
+ .icon {
+ display: block;
+ margin: auto;
+ }
+
+ &:hover {
+ background-color: var(--color-bg-lighter);
+ box-shadow: var(--inner-glow), var(--shadow-md);
+ }
+}
+
+/* desktop version only (--static) 👇 */
+.sidebar--static {
+ flex-shrink: 0;
+ flex-grow: 1;
+
+ .sidebar__header {
+ display: none;
+ }
+}
+
+.sidebar--sticky-on-desktop {
+ position: sticky;
+ top: var(--space-sm);
+ max-height: calc(100vh - var(--space-sm));
+ overflow: auto;
+ -webkit-overflow-scrolling: touch;
+}
+/* end desktop version */
+
+.sidebar, .sidebar-loaded\:show {
+ opacity: 0; /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
+}
+
+.sidebar--loaded {
+ opacity: 1;
+}
+
+/* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
+[class*="sidebar--static"]::before {
+ display: none;
+}
+
+.sidebar--static::before {
+ content: 'static';
+}
+
+@each $breakpoint, $value in $breakpoints {
+ .sidebar--static\@#{$breakpoint}::before {
+ content: 'mobile';
+ @include breakpoint(#{$breakpoint}) {
+ content: 'static';
+ }
+ }
+} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss b/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss
new file mode 100644
index 0000000..2b421df
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss
@@ -0,0 +1,237 @@
+@use '../base' as *;
+@use '_1_responsive-sidebar.scss' as *;
+
+/* --------------------------------
+
+File#: _2_side-navigation-v4
+Title: Side Navigation v4
+Descr: Main, side navigation
+Usage: codyhouse.co/license
+
+-------------------------------- */
+
+.sidenav-v4 {
+ --sidenav-v4-icon-size: 20px;
+ --sidenav-v4-icon-margin-right: var(--space-xxs);
+}
+
+.sidenav-v4__item {
+ position: relative;
+}
+
+.sidenav-v4__link,
+.sidenav-v4__sub-link,
+.sidenav-v4__separator {
+ padding: var(--space-sm);
+}
+
+.sidenav-v4__link, .sidenav-v4__sub-link {
+ display: flex;
+ align-items: center;
+
+ width: 100%;
+ border-radius: var(--radius-md);
+
+ text-decoration: none;
+ color: inherit;
+ line-height: 1;
+ font-size: var(--text-md);
+
+ transition: .2s;
+
+ &:hover {
+ color: var(--color-primary);
+ background-color: alpha(var(--color-contrast-higher), 0.075);
+ }
+
+ &[aria-current="page"] {
+ color: var(--color-primary);
+ }
+}
+
+.sidenav-v4__sub-link {
+ position: relative;
+ color: var(--color-contrast-medium);
+
+ /* dot indicator */
+ &::before {
+ content: '';
+ display: block;
+ --size: 6px;
+ width: var(--size);
+ height: var(--size);
+ background: currentColor;
+ border-radius: 50%;
+ margin-left: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2);
+ margin-right: calc(var(--sidenav-v4-icon-size)/2 - var(--size)/2 + var(--sidenav-v4-icon-margin-right));
+
+ opacity: 0; /* visible only if current */
+ }
+
+ &[aria-current="page"] {
+ &::before { /* show dot indicator */
+ opacity: 1;
+ }
+ }
+}
+
+.sidenav-v4__notification-marker {
+ margin-left: auto;
+ background-color: var(--color-accent);
+ border-radius: var(--radius-md);
+
+ height: 16px;
+ line-height: 16px;
+ padding: 0 4px;
+ color: var(--color-white);
+ font-size: 12px;
+
+ /* hide - visible only on desktop */
+ display: none;
+}
+
+/* label icon */
+.sidenav-v4__icon {
+ --size: var(--sidenav-v4-icon-size);
+ margin-right: var(--sidenav-v4-icon-margin-right);
+}
+
+/* arrow icon - visible on mobile if item is expandable */
+.sidenav-v4__arrow-icon {
+ --size: 20px;
+
+ .icon__group {
+ will-change: transform;
+ transform-origin: 50% 50%;
+ transform: rotate(-90deg);
+ transition: transform .3s var(--ease-out);
+
+ > * {
+ transform-origin: 50% 50%;
+ stroke-dasharray: 20;
+ stroke-dashoffset: 0;
+ transform: translateY(0px);
+ transition: transform .3s, stroke-dashoffset .3s;
+ transition-timing-function: var(--ease-out);
+ }
+
+ .sidenav-v4__item--collapsed & {
+ transform: rotate(0deg);
+
+ > * {
+ transform: translateY(4px);
+ }
+
+ > *:first-child {
+ stroke-dashoffset: 10.15;
+ }
+
+ > *:last-child {
+ stroke-dashoffset: 10.15;
+ }
+ }
+ }
+
+ /* hide icon for links - show only for buttons created in JS */
+ .sidenav-v4__link--href & {
+ display: none;
+ }
+}
+
+/* current item */
+.sidenav-v4__item--current {
+ .sidenav-v4__sub-list {
+ display: block; /* show sublist */
+ }
+}
+
+/* separator */
+.sidenav-v4__separator {
+ span {
+ display: block;
+ width: var(--sidenav-v4-icon-size);
+ height: 1px;
+ background-color: var(--color-contrast-lower);
+ }
+}
+
+/* mobile only */
+@include breakpoint(md, "not all") {
+ .sidenav-v4__item--collapsed {
+ .sidenav-v4__sub-list {
+ display: none;
+ }
+ }
+
+ .sidenav-v4__link--href {
+ display: none; /* hide link -> show button */
+ }
+}
+
+/* desktop */
+@include breakpoint(md) {
+ .sidenav-v4__sub-list {
+ display: none;
+ }
+
+ .sidenav-v4__link,
+ .sidenav-v4__sub-link,
+ .sidenav-v4__separator {
+ padding: var(--space-xs);
+ }
+
+ .sidenav-v4__link,
+ .sidenav-v4__sub-link {
+ font-size: var(--text-sm);
+ }
+
+ .sidenav-v4__link--btn {
+ display: none; /* hide button -> show link */
+ }
+
+ /* tooltip */
+ .sidenav-v4__item:not(.sidenav-v4__item--current) {
+ .sidenav-v4__sub-list {
+ width: 220px;
+ position: absolute;
+ z-index: var(--z-index-overlay);
+ left: 100%;
+ top: 0;
+
+ background-color: var(--color-bg-light);
+ box-shadow: var(--inner-glow), var(--shadow-md);
+ border-radius: var(--radius-md);
+
+ overflow: hidden;
+ }
+
+ .sidenav-v4__sub-link {
+ border-radius: 0;
+ color: var(--color-contrast-high);
+
+ &::before {
+ display: none; /* remove dot indicator */
+ }
+
+ &:hover {
+ color: var(--color-primary);
+ }
+ }
+
+ &.sidenav-v4__item--hover, &:focus-within {
+ .sidenav-v4__sub-list {
+ display: block;
+ }
+ }
+
+ &:hover .sidenav-v4__link { /* highlight main link if tooltip is visible */
+ color: var(--color-primary);
+ background-color: alpha(var(--color-contrast-higher), 0.075);
+ }
+ }
+
+ /* notification marker */
+ .sidenav-v4__notification-marker {
+ display: block;
+ }
+} \ No newline at end of file
diff --git a/old-apps/projects/src/app/pages/nav/side-navigation-v4.zip b/old-apps/projects/src/app/pages/nav/side-navigation-v4.zip
new file mode 100644
index 0000000..d034eaf
--- /dev/null
+++ b/old-apps/projects/src/app/pages/nav/side-navigation-v4.zip
Binary files differ
generated by cgit v1.3 (git 2.53.0) at 2026-04-02 17:08:57 +0200