adjust two-tone header depending on page and toolbar state

package.json

@@ -9,6 +9,7 @@
     "build-storybook": "build-storybook",
     "eslint:config": "eslint config",
     "lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:prettier-css",
+    "fl": "npm run format && npm run lint",
     "format": "npm run format:eslint && npm run format:prettier && npm run format:prettier-css",
     "format:lit": "prettier my-element.js test/* --write",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",

sakai-trinity/components/sakai-header.css

@@ -1,3 +1,6 @@
+:host {
+  display: block;
+}
 header {
   display: flex;
   align-items: center;
@@ -77,10 +80,11 @@ input[type='date'] {
   display: block;
   width: calc(var(--toolBarOpenWidth) - 40px);
   height: var(--headerHeight);
-  margin-left: -40px;
+  margin-left: var(--logoMargin, -40px);
   background: url('../images/logo-jewel.png') no-repeat center center;
   background-size: auto 40px;
   font-size: 0;
+  transition: margin 0.3s var(--toolbarTransition, ease-in-out);
 }
 .sakai-headerSearch {
   display: flex;

sakai-trinity/components/sakai-header.js

@@ -28,8 +28,30 @@ export class SakaiHeader extends LitElement {
   _toggleQuickSideBar() {
     document.querySelector('sakai-quick-sidebar').toggleAttribute('open');
   }
-  _toggleToolBar() {
+
+  _toggleToolBar(e) {
+    e.preventDefault();
     document.querySelector('sakai-toolbar').toggleAttribute('open');
+    if (document.querySelector('sakai-toolbar').open) {
+      this._toggleMargin(false);
+    } else if (document.querySelector('sakai-toolbar').open === false) {
+      this._toggleMargin(true);
+    }
+  }
+
+  _toggleMargin(state) {
+    if (window.location.href.endsWith('sakai-trinity/index.html')) {
+      if (state) {
+        document.firstElementChild.style.setProperty('--logoMargin', '28px');
+      } else if (state === false) {
+        document.firstElementChild.style.setProperty('--logoMargin', '-40px');
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._toggleMargin(true);
   }
 
   render() {
@@ -39,7 +61,7 @@ export class SakaiHeader extends LitElement {
         rel="stylesheet"
         type="text/css"
       />
-      <header role="banner" class="sakai-topHeader">
+      <header id="sakai-header" role="banner" class="sakai-topHeader">
         <div id="logoWrapper" class="sakai-headerItem">
           <a
             href="#"
@@ -73,17 +95,26 @@ export class SakaiHeader extends LitElement {
 
         <ul class="sakai-systemIndicators">
           <li>
-            <a href="https://sakai.screenstepslive.com/s/sakai_help/m/101295/l/1339923-what-is-the-assignments-tool" class="sakai-headerItem sak-sysInd-help"
-              target="_blank"><ion-icon name="help-circle-outline"></ion-icon>Help</a
+            <a
+              href="https://sakai.screenstepslive.com/s/sakai_help/m/101295/l/1339923-what-is-the-assignments-tool"
+              class="sakai-headerItem sak-sysInd-help"
+              target="_blank"
+              ><ion-icon name="help-circle-outline"></ion-icon>Help</a
             >
           </li>
           <li>
-            <a href="#" class="sakai-headerItem sak-sysInd-systemAlerts" onclick="alert('The PA System Announcements would appear here');"
+            <a
+              href="#"
+              class="sakai-headerItem sak-sysInd-systemAlerts"
+              onclick="alert('The PA System Announcements would appear here');"
               ><ion-icon name="alert-circle-outline"></ion-icon>System Alerts</a
             >
           </li>
           <li>
-            <a href="#" class="sakai-headerItem sak-sysInd-notifications" onclick="alert('Your event notifications would appear here');"
+            <a
+              href="#"
+              class="sakai-headerItem sak-sysInd-notifications"
+              onclick="alert('Your event notifications would appear here');"
               ><ion-icon name="notifications-circle-outline"></ion-icon
               >Notifications</a
             >

sakai-trinity/components/sakai-quicksidebar.js

@@ -14,7 +14,7 @@ export class SakaiQuickSidebar extends LitElement {
     };
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    console.log('attribute change: ', name, newVal);
+    // console.log('attribute change: ', name, newVal);
     super.attributeChangedCallback(name, oldVal, newVal);
     this.toggleOpen();
   }
@@ -35,11 +35,15 @@ export class SakaiQuickSidebar extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.toggleOpen();
+    // this.toggleOpen();
   }
 
   static get styles() {
-    return css``;
+    return css`
+      :host {
+        display: none;
+      }
+    `;
   }
   // _onClick() {
   //   const portalWrapper = document.querySelector('.sakai-portalWrapper');

sakai-trinity/components/sakai-toolbar-site.js

@@ -16,7 +16,7 @@ export class SakaiToolbarSite extends LitElement {
     let oldVal = this._emoji;
     this._emoji = val;
     let newVal = val === '' ? '<ion-icon name="star"></ion-icon>' : oldVal;
-    console.log(typeof val, val, typeof oldVal, oldVal, typeof newVal, newVal);
+    // console.log(typeof val, val, typeof oldVal, oldVal, typeof newVal, newVal);
     this.requestUpdate('emoji', newVal);
   }
   get emoji() {
@@ -33,12 +33,12 @@ export class SakaiToolbarSite extends LitElement {
     this.toolId = '';
   }
   attributeChangedCallback(name, oldVal, newVal) {
-    console.log('attribute change: ', name, newVal);
+    // console.log('attribute change: ', name, newVal);
     super.attributeChangedCallback(name, oldVal, newVal);
     // this.toggleOpen();
   }
-  toggleOpen(e) {
-    console.log(e);
+  toggleOpen() {
+    // console.log(e);
     this.toggleAttribute('open');
   }
   isCurrentTool(toolId) {

sakai-trinity/components/sakai-toolbar.css

@@ -1,14 +1,21 @@
 :host {
   display: none;
+  /* visibility: hidden; */
+  /* opacity: 0; */
+  /* width:0; */
 }
 :host([open]) {
+  transition: all 0.3s var(--toolbarTransition, ease-in-out);
+  background: var(--layoutBackgroundColor);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   overflow-y: scroll;
   height: 1vh;
   min-height: 100%;
-  background: var(--layoutBackgroundColor);
+  /* visibility: visible; */
+  /* opacity: 1; */
+  /* width: 100%; */
 }
 
 #sakaiToolBar {

sakai-trinity/components/sakai-toolbar.js

@@ -55,11 +55,15 @@ export class SakaiToolbar extends LitElement {
   // }
   connectedCallback() {
     super.connectedCallback();
-    this.toggleOpen();
+    // this.toggleOpen();
   }
 
   static get styles() {
-    return css``;
+    return css`
+      :host {
+        display: none;
+      }
+    `;
   }
 
   render() {

sakai-trinity/styles.css

@@ -6,6 +6,8 @@
   --quickSideBarClosedWidth: 0;
   --quickSideBarOpenWidth: 372px;
   --headerHeight: 60px;
+  --dashboardCourseCardWidth: 350px;
+  --logoMargin: -40px;
   --white: #fff;
   --black: #000;
   --gray-10: #f3f3f4;