Edit sidebar style and animation

public/assets/build/app.js

@@ -6,23 +6,44 @@ var __webpack_exports__ = {};
 // ----------------------------------------------------------------------------
 // DATA
 // ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
+// SIDEBAR ANIMATION
+const sidebar = document.querySelector('.sidebar');
+const sidebarNav = document.querySelector('.sidebar__nav');
+const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal'); // ----------------------------------------------------------------------------
 // UTILS
 // ----------------------------------------------------------------------------
 // Convert rem to pixels by getting font-size CSS property
+
 function convertRemToPixels(rem) {
   let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
   return rem * fontSize;
 } // ----------------------------------------------------------------------------
 // LOGIC
 // ----------------------------------------------------------------------------
-// ----------------------------------------------------------------------------
+// SIDEBAR ANIMATION
+
+
+function slimDownSidebar() {
+  if (sidebar) {
+    sidebar.classList.add('sidebar--slimmed');
+  }
+}
+
+function slimDownSidebarOnClick() {
+  if (sidebarNavLinks.length > 0) {
+    for (let i = 0; i < sidebarNavLinks.length; i++) {
+      sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
+    }
+  }
+} // ----------------------------------------------------------------------------
 // PROGRAM
 // ----------------------------------------------------------------------------
 // Enable CSS :active pseudo-class in Safari Mobile
 
 
-document.addEventListener("touchstart", function () {}, false);
+document.addEventListener("touchstart", function () {}, false); // SIDEBAR ANIMATION
+
+slimDownSidebarOnClick();
 /******/ })()
 ;
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFDQTtBQUNBO0FBRUE7QUFDQSxTQUFTQSxrQkFBVCxDQUE0QkMsR0FBNUIsRUFBaUM7RUFDaEMsSUFBSUMsUUFBUSxHQUFHQyxVQUFVLENBQUNDLE1BQU0sQ0FBQ0MsZ0JBQVAsQ0FBd0JDLFFBQVEsQ0FBQ0MsSUFBakMsRUFBdUNDLGdCQUF2QyxDQUF3RCxXQUF4RCxDQUFELENBQXpCO0VBQ0EsT0FBT1AsR0FBRyxHQUFHQyxRQUFiO0FBQ0EsRUFFRDtBQUNBO0FBQ0E7QUFFQTtBQUNBO0FBQ0E7QUFFQTs7O0FBQ0FJLFFBQVEsQ0FBQ0csZ0JBQVQsQ0FBMEIsWUFBMUIsRUFBd0MsWUFBVyxDQUFFLENBQXJELEVBQXNELEtBQXRELEUiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBEQVRBXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIFVUSUxTXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIENvbnZlcnQgcmVtIHRvIHBpeGVscyBieSBnZXR0aW5nIGZvbnQtc2l6ZSBDU1MgcHJvcGVydHlcbmZ1bmN0aW9uIGNvbnZlcnRSZW1Ub1BpeGVscyhyZW0pIHtcblx0bGV0IGZvbnRTaXplID0gcGFyc2VGbG9hdCh3aW5kb3cuZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5ib2R5KS5nZXRQcm9wZXJ0eVZhbHVlKCdmb250LXNpemUnKSk7XG5cdHJldHVybiByZW0gKiBmb250U2l6ZTtcbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gTE9HSUNcbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gUFJPR1JBTVxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBFbmFibGUgQ1NTIDphY3RpdmUgcHNldWRvLWNsYXNzIGluIFNhZmFyaSBNb2JpbGVcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJ0b3VjaHN0YXJ0XCIsIGZ1bmN0aW9uKCkge30sZmFsc2UpO1xuIl0sIm5hbWVzIjpbImNvbnZlcnRSZW1Ub1BpeGVscyIsInJlbSIsImZvbnRTaXplIiwicGFyc2VGbG9hdCIsIndpbmRvdyIsImdldENvbXB1dGVkU3R5bGUiLCJkb2N1bWVudCIsImJvZHkiLCJnZXRQcm9wZXJ0eVZhbHVlIiwiYWRkRXZlbnRMaXN0ZW5lciJdLCJzb3VyY2VSb290IjoiIn0=
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXBwLmpzIiwibWFwcGluZ3MiOiI7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBRUE7QUFFQSxNQUFNQSxPQUFPLEdBQUdDLFFBQVEsQ0FBQ0MsYUFBVCxDQUF1QixVQUF2QixDQUFoQjtBQUNBLE1BQU1DLFVBQVUsR0FBR0YsUUFBUSxDQUFDQyxhQUFULENBQXVCLGVBQXZCLENBQW5CO0FBQ0EsTUFBTUUsZUFBZSxHQUFHRCxVQUFVLENBQUNFLGdCQUFYLENBQTRCLDhCQUE1QixDQUF4QixFQUVBO0FBQ0E7QUFDQTtBQUVBOztBQUNBLFNBQVNDLGtCQUFULENBQTRCQyxHQUE1QixFQUFpQztFQUNoQyxJQUFJQyxRQUFRLEdBQUdDLFVBQVUsQ0FBQ0MsTUFBTSxDQUFDQyxnQkFBUCxDQUF3QlYsUUFBUSxDQUFDVyxJQUFqQyxFQUF1Q0MsZ0JBQXZDLENBQXdELFdBQXhELENBQUQsQ0FBekI7RUFDQSxPQUFPTixHQUFHLEdBQUdDLFFBQWI7QUFDQSxFQUVEO0FBQ0E7QUFDQTtBQUVBOzs7QUFFQSxTQUFTTSxlQUFULEdBQTJCO0VBQzFCLElBQUlkLE9BQUosRUFBYTtJQUNaQSxPQUFPLENBQUNlLFNBQVIsQ0FBa0JDLEdBQWxCLENBQXNCLGtCQUF0QjtFQUNBO0FBQ0Q7O0FBRUQsU0FBU0Msc0JBQVQsR0FBa0M7RUFDakMsSUFBSWIsZUFBZSxDQUFDYyxNQUFoQixHQUF5QixDQUE3QixFQUFnQztJQUMvQixLQUFLLElBQUlDLENBQUMsR0FBRyxDQUFiLEVBQWdCQSxDQUFDLEdBQUdmLGVBQWUsQ0FBQ2MsTUFBcEMsRUFBNENDLENBQUMsRUFBN0MsRUFBaUQ7TUFDaERmLGVBQWUsQ0FBQ2UsQ0FBRCxDQUFmLENBQW1CQyxnQkFBbkIsQ0FBb0MsT0FBcEMsRUFBNkNOLGVBQTdDO0lBQ0E7RUFDRDtBQUNELEVBRUQ7QUFDQTtBQUNBO0FBRUE7OztBQUNBYixRQUFRLENBQUNtQixnQkFBVCxDQUEwQixZQUExQixFQUF3QyxZQUFXLENBQUUsQ0FBckQsRUFBc0QsS0FBdEQsR0FFQTs7QUFFQUgsc0JBQXNCLEciLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9wdWJsaWMvYXNzZXRzL2pzL2FwcC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyIvLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBEQVRBXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIFNJREVCQVIgQU5JTUFUSU9OXG5cbmNvbnN0IHNpZGViYXIgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcuc2lkZWJhcicpO1xuY29uc3Qgc2lkZWJhck5hdiA9IGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJy5zaWRlYmFyX19uYXYnKTtcbmNvbnN0IHNpZGViYXJOYXZMaW5rcyA9IHNpZGViYXJOYXYucXVlcnlTZWxlY3RvckFsbCgnLnNpZGViYXJfX25hdi1saW5rLS1pbnRlcm5hbCcpO1xuXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG4vLyBVVElMU1xuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBDb252ZXJ0IHJlbSB0byBwaXhlbHMgYnkgZ2V0dGluZyBmb250LXNpemUgQ1NTIHByb3BlcnR5XG5mdW5jdGlvbiBjb252ZXJ0UmVtVG9QaXhlbHMocmVtKSB7XG5cdGxldCBmb250U2l6ZSA9IHBhcnNlRmxvYXQod2luZG93LmdldENvbXB1dGVkU3R5bGUoZG9jdW1lbnQuYm9keSkuZ2V0UHJvcGVydHlWYWx1ZSgnZm9udC1zaXplJykpO1xuXHRyZXR1cm4gcmVtICogZm9udFNpemU7XG59XG5cbi8vIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS1cbi8vIExPR0lDXG4vLyAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tXG5cbi8vIFNJREVCQVIgQU5JTUFUSU9OXG5cbmZ1bmN0aW9uIHNsaW1Eb3duU2lkZWJhcigpIHtcblx0aWYgKHNpZGViYXIpIHtcblx0XHRzaWRlYmFyLmNsYXNzTGlzdC5hZGQoJ3NpZGViYXItLXNsaW1tZWQnKTtcblx0fVxufVxuXG5mdW5jdGlvbiBzbGltRG93blNpZGViYXJPbkNsaWNrKCkge1xuXHRpZiAoc2lkZWJhck5hdkxpbmtzLmxlbmd0aCA+IDApIHtcblx0XHRmb3IgKGxldCBpID0gMDsgaSA8IHNpZGViYXJOYXZMaW5rcy5sZW5ndGg7IGkrKykge1xuXHRcdFx0c2lkZWJhck5hdkxpbmtzW2ldLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgc2xpbURvd25TaWRlYmFyKTtcblx0XHR9XG5cdH1cbn1cblxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuLy8gUFJPR1JBTVxuLy8gLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuXG4vLyBFbmFibGUgQ1NTIDphY3RpdmUgcHNldWRvLWNsYXNzIGluIFNhZmFyaSBNb2JpbGVcbmRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoXCJ0b3VjaHN0YXJ0XCIsIGZ1bmN0aW9uKCkge30sZmFsc2UpO1xuXG4vLyBTSURFQkFSIEFOSU1BVElPTlxuXG5zbGltRG93blNpZGViYXJPbkNsaWNrKCk7XG4iXSwibmFtZXMiOlsic2lkZWJhciIsImRvY3VtZW50IiwicXVlcnlTZWxlY3RvciIsInNpZGViYXJOYXYiLCJzaWRlYmFyTmF2TGlua3MiLCJxdWVyeVNlbGVjdG9yQWxsIiwiY29udmVydFJlbVRvUGl4ZWxzIiwicmVtIiwiZm9udFNpemUiLCJwYXJzZUZsb2F0Iiwid2luZG93IiwiZ2V0Q29tcHV0ZWRTdHlsZSIsImJvZHkiLCJnZXRQcm9wZXJ0eVZhbHVlIiwic2xpbURvd25TaWRlYmFyIiwiY2xhc3NMaXN0IiwiYWRkIiwic2xpbURvd25TaWRlYmFyT25DbGljayIsImxlbmd0aCIsImkiLCJhZGRFdmVudExpc3RlbmVyIl0sInNvdXJjZVJvb3QiOiIifQ==

public/assets/css/main.scss

@@ -89,21 +89,30 @@ body {
 	left: 0;
 	padding: var(--sidebar-vertical-padding) var(--sidebar-horizontal-padding);
 	overflow-y: auto;
-	background-color: transparent;
+	background-color: var(--transparent-white);
 	transition: background-color 400ms ease-in-out;
 
 	.sidebar__nav {
 
 		.sidebar__nav-item {
+			width: 97vw;
+			transition: width 400ms ease-in-out;
 
 			+ .sidebar__nav-item {
 				margin: 0.75rem 0 0 0;
 			}
 		}
 
-		a {
+		.sidebar__nav-link {
-			color: var(--transparent-black);
+			display: inline-block;
-			transition: color 400ms ease-in-out;
+			max-width: 100vw;
+			overflow-x: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			color: var(--black);
+			transition:
+				max-width 400ms ease-in-out,
+				color 400ms ease-in-out;
 		}
 	}
 
@@ -112,42 +121,66 @@ body {
 		align-items: center;
 		margin: 1rem 0 0 0;
 
-		a {
+		.sidebar__social-link {
 			width: var(--icon-size);
 			height: var(--icon-size);
 			display: flex;
 			justify-content: center;
 			align-items: center;
 
-			+ a {
+			+ .sidebar__social-link {
 				margin: 0 0 0 1rem;
 			}
 
 			svg {
 				width: 100%;
 				height: 100%;
-				fill: var(--transparent-black);
+				fill: var(--black);
 				transition: fill 400ms ease-in-out;
 			}
 		}
 	}
 
-	&:hover {
+	&--slimmed {
-		background-color: var(--transparent-white);
+		background-color: transparent;
 
 		.sidebar__nav {
-			
+
-			a {
+			.sidebar__nav-item {
-				color: var(--black);
+				width: 15vw;
+			}
+
+			.sidebar__nav-link {
+				max-width: 15vw;
+				color: var(--transparent-black);
 			}
 		}
 
 		.sidebar__social {
 
 			svg {
-				fill: var(--black);
+				fill: var(--transparent-black);
 			}
 		}
+
+		&:hover {
+			background-color: var(--transparent-white);
+
+			.sidebar__nav {
+				
+				.sidebar__nav-link {
+					color: var(--black);
+				}
+			}
+
+			.sidebar__social {
+
+				svg {
+					fill: var(--black);
+				}
+			}
+		}
+
 	}
 }
 
@@ -155,14 +188,14 @@ body {
 // MAIN
 // ----------------------------------------------------------------------------
 
-// Home section
+// Exhibition section
 
-.exhibitions-section {
+.exhibition-section {
 	width: 100vw;
 	height: 100vh;
 }
 
-.exhibitions-section__iframe {
+.exhibition-section__iframe {
 	width: 100%;
 	height: 100%;
 }

public/assets/js/app.js

@@ -2,6 +2,12 @@
 // DATA
 // ----------------------------------------------------------------------------
 
+// SIDEBAR ANIMATION
+
+const sidebar = document.querySelector('.sidebar');
+const sidebarNav = document.querySelector('.sidebar__nav');
+const sidebarNavLinks = sidebarNav.querySelectorAll('.sidebar__nav-link--internal');
+
 // ----------------------------------------------------------------------------
 // UTILS
 // ----------------------------------------------------------------------------
@@ -16,9 +22,29 @@ function convertRemToPixels(rem) {
 // LOGIC
 // ----------------------------------------------------------------------------
 
+// SIDEBAR ANIMATION
+
+function slimDownSidebar() {
+	if (sidebar) {
+		sidebar.classList.add('sidebar--slimmed');
+	}
+}
+
+function slimDownSidebarOnClick() {
+	if (sidebarNavLinks.length > 0) {
+		for (let i = 0; i < sidebarNavLinks.length; i++) {
+			sidebarNavLinks[i].addEventListener('click', slimDownSidebar);
+		}
+	}
+}
+
 // ----------------------------------------------------------------------------
 // PROGRAM
 // ----------------------------------------------------------------------------
 
 // Enable CSS :active pseudo-class in Safari Mobile
 document.addEventListener("touchstart", function() {},false);
+
+// SIDEBAR ANIMATION
+
+slimDownSidebarOnClick();

site/templates/exhibitions.twig

@@ -9,10 +9,10 @@
 					<ul class="sidebar__nav-menu">
 						{% for exhibition in exhibitions %}
 								<li class="sidebar__nav-item">
-									{% if exhibition.external_link == false %}
+									{% if exhibition.external_link == 'false' %}
-										<a href="{{ exhibition.url }}" target="iframe">{{ exhibition.title }}</a>
+										<a class="sidebar__nav-link sidebar__nav-link--internal" href="{{ exhibition.url }}" target="exhibition_iframe">{{ exhibition.title }}</a>
-									{% elseif exhibition.external_link == true %}
+									{% else %}
-										<a href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
+										<a class="sidebar__nav-link sidebar__nav-link--external" href="{{ exhibition.url }}" target="_blank">{{ exhibition.title }}</a>
 									{% endif %}
 								</li>
 						{% endfor %}
@@ -20,12 +20,12 @@
 				{% endif %}
 			</nav>
 			<div class="sidebar__social">
-				<a class="sidebar__gallery-button" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
+				<a class="sidebar__social-link" href="#" target="_self" aria-label="Show {{ site.title }}'s image gallery">
 					<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
 						<path d="M17.25 29.15H36.8l-6.35-8.55-5.15 6.75L21.9 23ZM10 38V4h34v34Zm3-3h28V7H13Zm-9 9V10h3v31h31v3Zm9-9V7v28Z"/>
 					</svg>
 				</a>
-				<a class="sidebar__email-button" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
+				<a class="sidebar__social-link" href="mailto:{{ email }}" target="_blank" aria-label="Write an email to {{ site.title }}">
 					<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
 						<path d="M4 40V8h40v32Zm20-15.1L7 13.75V37h34V13.75Zm0-3L40.8 11H7.25ZM7 13.75V11v2.75Z"/>
 					</svg>
@@ -39,8 +39,8 @@
 {% block main %}
 	<main>
 
-		<section class="home-section">
+		<section class="exhibition-section">
-			<iframe class="home-section__iframe" src="{{ page.featured_exhibition }}" name="iframe"></iframe>
+			<iframe class="exhibition-section__iframe" name="exhibition_iframe" src=""></iframe>
 		</section>
 
 	</main>