From 740f43e2bac7b1eee919351694905fecf9291943 Mon Sep 17 00:00:00 2001 From: ivarlovlie Date: Sun, 21 Aug 2022 16:56:11 +0200 Subject: feat: Before tailwind --- apps/projects/src/app/pages/_layout.svelte | 228 ++++------------ .../src/app/pages/nav/css/1_responsive-sidebar.css | 179 +++++++++++++ .../src/app/pages/nav/css/2_side-navigation-v4.css | 213 +++++++++++++++ .../src/app/pages/nav/html/side-navigation-v4.html | 211 +++++++++++++++ apps/projects/src/app/pages/nav/index.ts | 6 + .../src/app/pages/nav/js/_1_diagonal-movement.js | 296 +++++++++++++++++++++ .../src/app/pages/nav/js/_1_responsive-sidebar.js | 215 +++++++++++++++ .../src/app/pages/nav/js/_2_side-navigation-v4.js | 73 +++++ apps/projects/src/app/pages/nav/nav-item.svelte | 18 ++ apps/projects/src/app/pages/nav/nav-wrapper.svelte | 20 ++ .../app/pages/nav/scss/_1_responsive-sidebar.scss | 147 ++++++++++ .../app/pages/nav/scss/_2_side-navigation-v4.scss | 237 +++++++++++++++++ .../src/app/pages/nav/side-navigation-v4.zip | Bin 0 -> 13503 bytes apps/projects/src/app/pages/ui-workbench.svelte | 48 +--- 14 files changed, 1675 insertions(+), 216 deletions(-) create mode 100644 apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css create mode 100644 apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css create mode 100644 apps/projects/src/app/pages/nav/html/side-navigation-v4.html create mode 100644 apps/projects/src/app/pages/nav/index.ts create mode 100644 apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js create mode 100644 apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js create mode 100644 apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js create mode 100644 apps/projects/src/app/pages/nav/nav-item.svelte create mode 100644 apps/projects/src/app/pages/nav/nav-wrapper.svelte create mode 100644 apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss create mode 100644 apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss create mode 100644 apps/projects/src/app/pages/nav/side-navigation-v4.zip (limited to 'apps/projects/src/app/pages') diff --git a/apps/projects/src/app/pages/_layout.svelte b/apps/projects/src/app/pages/_layout.svelte index 594fe9e..07a4a25 100644 --- a/apps/projects/src/app/pages/_layout.svelte +++ b/apps/projects/src/app/pages/_layout.svelte @@ -1,182 +1,66 @@ -
- - - - - - - - - - -
- -
- - - - -
- -
-
+ + + \ No newline at end of file diff --git a/apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css b/apps/projects/src/app/pages/nav/css/1_responsive-sidebar.css new file mode 100644 index 0000000..515a9f2 --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css b/apps/projects/src/app/pages/nav/css/2_side-navigation-v4.css new file mode 100644 index 0000000..ec5fcdf --- /dev/null +++ b/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/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 @@ +
+ +
+ +
+ + +
+ +
+

Main content.

+
+ +
+
\ No newline at end of file diff --git a/apps/projects/src/app/pages/nav/index.ts b/apps/projects/src/app/pages/nav/index.ts new file mode 100644 index 0000000..ca91c20 --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js b/apps/projects/src/app/pages/nav/js/_1_diagonal-movement.js new file mode 100644 index 0000000..ed4a47d --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js b/apps/projects/src/app/pages/nav/js/_1_responsive-sidebar.js new file mode 100644 index 0000000..f9599d8 --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js b/apps/projects/src/app/pages/nav/js/_2_side-navigation-v4.js new file mode 100644 index 0000000..63ef9c4 --- /dev/null +++ b/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 '; + 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
  • 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/apps/projects/src/app/pages/nav/nav-item.svelte b/apps/projects/src/app/pages/nav/nav-item.svelte new file mode 100644 index 0000000..335cbbb --- /dev/null +++ b/apps/projects/src/app/pages/nav/nav-item.svelte @@ -0,0 +1,18 @@ + + +
  • + + {#if icon} + + {/if} + {text} + +
    • diff --git a/apps/projects/src/app/pages/nav/nav-wrapper.svelte b/apps/projects/src/app/pages/nav/nav-wrapper.svelte new file mode 100644 index 0000000..8321544 --- /dev/null +++ b/apps/projects/src/app/pages/nav/nav-wrapper.svelte @@ -0,0 +1,20 @@ + +
    + +
    + +
    +
    \ No newline at end of file diff --git a/apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss b/apps/projects/src/app/pages/nav/scss/_1_responsive-sidebar.scss new file mode 100644 index 0000000..e4304f1 --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss b/apps/projects/src/app/pages/nav/scss/_2_side-navigation-v4.scss new file mode 100644 index 0000000..2b421df --- /dev/null +++ b/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/apps/projects/src/app/pages/nav/side-navigation-v4.zip b/apps/projects/src/app/pages/nav/side-navigation-v4.zip new file mode 100644 index 0000000..d034eaf Binary files /dev/null and b/apps/projects/src/app/pages/nav/side-navigation-v4.zip differ diff --git a/apps/projects/src/app/pages/ui-workbench.svelte b/apps/projects/src/app/pages/ui-workbench.svelte index af1bf4e..ff2b058 100644 --- a/apps/projects/src/app/pages/ui-workbench.svelte +++ b/apps/projects/src/app/pages/ui-workbench.svelte @@ -1,47 +1,7 @@ -
    -
    - - -
    -
    + + + \ No newline at end of file -- cgit v1.3