toggle-components-library 1.24.8 → 1.24.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.24.8",
+  "version": "1.24.10",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/icons/airship-circle-user-icon-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_3" data-name="Exclusion 3" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-circle-user-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_1" data-name="Exclusion 1" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
+</svg>

package/src/assets/icons/airship-user-icon-hover.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
-  <path id="Exclusion_3" data-name="Exclusion 3" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="76.977" height="94" viewBox="0 0 76.977 94">
+  <path id="Exclusion_6" data-name="Exclusion 6" d="M-11917.125-16077.678h-.191a5.293,5.293,0,0,1-4.119-1.816,6.407,6.407,0,0,1-1.379-4.145,35.712,35.712,0,0,1,8.531-22.773c5.736-6.734,13.279-10.441,21.24-10.445h17.424a29.584,29.584,0,0,1,21.061,8.723,29.6,29.6,0,0,1,8.721,21.059,5.954,5.954,0,0,1-5.939,5.953h-.014l-65.07,3.438C-11916.949-16077.678-11917.033-16077.678-11917.125-16077.678Zm32.8-50a21.867,21.867,0,0,1-15.555-6.445,21.88,21.88,0,0,1-6.437-15.559,21.871,21.871,0,0,1,6.438-15.555,21.856,21.856,0,0,1,15.555-6.441,22.021,22.021,0,0,1,22,22A22.025,22.025,0,0,1-11884.328-16127.678Z" transform="translate(11922.814 16171.678)" fill="#477ef6"/>
 </svg>

package/src/assets/icons/airship-user-icon.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
-  <path id="Exclusion_1" data-name="Exclusion 1" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-4.034-45.308a12.917,12.917,0,0,0-9.831,4.836,16.519,16.519,0,0,0-3.95,10.54,2.967,2.967,0,0,0,.64,1.918,2.452,2.452,0,0,0,1.905.842h.089c.04,0,.081,0,.121,0l30.117-1.59h.007a2.756,2.756,0,0,0,2.749-2.756,13.7,13.7,0,0,0-4.037-9.747,13.69,13.69,0,0,0-9.745-4.039Zm4.03-25.366a10.193,10.193,0,0,0-10.181,10.181,10.191,10.191,0,0,0,10.181,10.177,10.111,10.111,0,0,0,7.2-2.981,10.1,10.1,0,0,0,2.981-7.2,10.111,10.111,0,0,0-2.981-7.2A10.111,10.111,0,0,0-11986-16099.674Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="76.977" height="94" viewBox="0 0 76.977 94">
+  <path id="Exclusion_5" data-name="Exclusion 5" d="M-11917.125-16077.678h-.191a5.293,5.293,0,0,1-4.119-1.816,6.407,6.407,0,0,1-1.379-4.145,35.712,35.712,0,0,1,8.531-22.773c5.736-6.734,13.279-10.441,21.24-10.445h17.424a29.584,29.584,0,0,1,21.061,8.723,29.6,29.6,0,0,1,8.721,21.059,5.954,5.954,0,0,1-5.939,5.953h-.014l-65.07,3.438C-11916.949-16077.678-11917.033-16077.678-11917.125-16077.678Zm32.8-50a21.867,21.867,0,0,1-15.555-6.445,21.88,21.88,0,0,1-6.437-15.559,21.871,21.871,0,0,1,6.438-15.555,21.856,21.856,0,0,1,15.555-6.441,22.021,22.021,0,0,1,22,22A22.025,22.025,0,0,1-11884.328-16127.678Z" transform="translate(11922.814 16171.678)" fill="#354b64"/>
 </svg>

package/src/assets/icons/airship-x-hover.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_4" data-name="Exclusion 4" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-13.426-64.429a3.971,3.971,0,0,0-2.828,1.172,4.005,4.005,0,0,0,0,5.657l10.233,10.229-10.233,10.229a4.006,4.006,0,0,0,0,5.656,3.977,3.977,0,0,0,2.828,1.174,3.974,3.974,0,0,0,2.828-1.174l10.229-10.229,10.229,10.225a3.971,3.971,0,0,0,2.828,1.172,3.971,3.971,0,0,0,2.828-1.172,3.971,3.971,0,0,0,1.172-2.828,3.971,3.971,0,0,0-1.172-2.828l-10.229-10.226,10.229-10.225a3.972,3.972,0,0,0,1.172-2.829,3.971,3.971,0,0,0-1.172-2.828,3.976,3.976,0,0,0-2.828-1.171,3.976,3.976,0,0,0-2.828,1.171l-10.229,10.226-10.229-10.229A3.968,3.968,0,0,0-11999.425-16093.429Z" transform="translate(12033.001 16123.001)" fill="#477ef6"/>
+</svg>

package/src/assets/icons/airship-x.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="94" height="94.001" viewBox="0 0 94 94.001">
+  <path id="Exclusion_2" data-name="Exclusion 2" d="M-11986-16029a46.689,46.689,0,0,1-18.294-3.693,46.864,46.864,0,0,1-14.941-10.071,46.871,46.871,0,0,1-10.073-14.94A46.7,46.7,0,0,1-12033-16076a46.7,46.7,0,0,1,3.693-18.294,46.869,46.869,0,0,1,10.073-14.941,46.869,46.869,0,0,1,14.941-10.073A46.7,46.7,0,0,1-11986-16123a46.7,46.7,0,0,1,18.294,3.693,46.872,46.872,0,0,1,14.939,10.073,46.864,46.864,0,0,1,10.071,14.941A46.689,46.689,0,0,1-11939-16076a46.689,46.689,0,0,1-3.693,18.294,46.871,46.871,0,0,1-10.071,14.94,46.856,46.856,0,0,1-14.939,10.071A46.689,46.689,0,0,1-11986-16029Zm-13.426-64.429a3.971,3.971,0,0,0-2.828,1.172,4.005,4.005,0,0,0,0,5.657l10.233,10.229-10.233,10.229a4.006,4.006,0,0,0,0,5.656,3.977,3.977,0,0,0,2.828,1.174,3.974,3.974,0,0,0,2.828-1.174l10.229-10.229,10.229,10.225a3.971,3.971,0,0,0,2.828,1.172,3.971,3.971,0,0,0,2.828-1.172,3.971,3.971,0,0,0,1.172-2.828,3.971,3.971,0,0,0-1.172-2.828l-10.229-10.226,10.229-10.225a3.972,3.972,0,0,0,1.172-2.829,3.971,3.971,0,0,0-1.172-2.828,3.976,3.976,0,0,0-2.828-1.171,3.976,3.976,0,0,0-2.828,1.171l-10.229,10.226-10.229-10.229A3.968,3.968,0,0,0-11999.425-16093.429Z" transform="translate(12033.001 16123.001)" fill="#354b64"/>
+</svg>

package/src/components/navs/multitiersidenav/ToggleMultiTierSideNav.vue

@@ -3,7 +3,7 @@
         <img :src="logo.src" :alt="logo.alt" class="toggle-multi-tier-sidenav-logo">
         <ul class="toggle-multi-tier-sidenav-ul">
             <!-- @slot For ToggleSideNavItems -->
-            <slot></slot>
+            <slot name="navItems"></slot>
         </ul>
 
         <div class="toggle-multi-tier-sidenav-divider"></div>
@@ -17,7 +17,19 @@
             <ToggleInputSelect type="text" placeholder="placeholder text" label="Location" :options="unitOptions" v-model="unitOptionVal" />
         </div>
 
-        <div class="toggle-multi-tier-sidenav-user-icon"></div>
+        <div  v-if="userMenuOpen" class="toggle-multi-tier-sidenav-user-menu-container">
+            <div class="toggle-multi-tier-sidenav-user-menu">
+                <ToggleHeaderTextLarge class="toggle-multi-tier-sidenav-user-name">
+                    {{ user }}
+                </ToggleHeaderTextLarge>
+                <div class="toggle-multi-tier-sidenav-user-menu-divider"></div>
+                <ul class="toggle-multi-tier-sidenav-user-menu-ul">
+                    <slot name="userMenu"></slot>
+                </ul>
+            </div>
+        </div>
+        <div @click="userMenuOpen = !userMenuOpen" :class="userMenuOpen ? 'toggle-multi-tier-sidenav-user-icon-menu-open' : 'toggle-multi-tier-sidenav-user-icon'">
+        </div>
     </nav>
 </template>
 
@@ -28,6 +40,11 @@ import ToggleInputSelect from '../../forms/ToggleInputSelect.vue';
 
 export default {
     name: 'ToggleMultiTierSideNav',
+    data() {
+        return {
+            userMenuOpen: false,
+        }
+    },
     props: {
         value: {},
         /**
@@ -44,6 +61,13 @@ export default {
             type: String,
             default: 'Airship'
         },
+        /**
+         * Name of the user, displayed in the user menu
+         */
+        user: {
+            type: String,
+            default: 'User'
+        },
         unitOptions: {
             type: Array,
             required: true

package/src/sass/includes/_as_navs.scss

@@ -148,22 +148,115 @@
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
-    background-image: url("../assets/icons/airship-user-icon.svg");
+    background-image: url("../assets/icons/airship-circle-user-icon.svg");
     width: 2rem;
     height: 2rem;
-    margin: 2rem 0 1rem 0.6rem;
+    margin: 1rem 0 1rem 0.6rem;
     cursor: pointer;
 
     &:hover {
         animation: tilt-shake 0.4s;
-        background-image: url("../assets/icons/airship-user-icon-hover.svg");
+        background-image: url("../assets/icons/airship-circle-user-icon-hover.svg");
     }
   }
 
+  .toggle-multi-tier-sidenav-user-icon-menu-open {
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url("../assets/icons/airship-x.svg");
+    width: 2rem;
+    height: 2rem;
+    margin: 1rem 0 1rem 0.6rem;
+    cursor: pointer;
+
+    &:hover {
+        animation: tilt-shake 0.4s;
+        background-image: url("../assets/icons/airship-x-hover.svg");
+    }
+  }
+
+  .toggle-multi-tier-sidenav-user-menu-container {
+    padding: 0;
+    position: relative;
+    bottom: 3.9rem;
+    z-index: 99;
+  }
+
+  .toggle-multi-tier-sidenav-user-menu {
+    position: absolute;
+    background-color: #ffffff;
+    border-radius: 0.5rem;
+    padding: 0;
+    bottom: -4rem;
+    height: fit-content;
+    margin: 2rem 0 0 0.6rem;
+    width: 96%;
+  }
+
+ .toggle-multi-tier-sidenav-user-menu:after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 15px;
+	width: 0px;
+	height: 0;
+	border: 8px solid transparent;
+	border-top-color: #ffffff;
+	border-bottom: 0px;
+	margin-left: -8px;
+	margin-bottom: -8px;
+}
+
+  .toggle-multi-tier-sidenav-user-menu-divider {
+    width: 92%;
+    margin: 0.9rem 0rem 1.2rem .6rem;
+    border-bottom: 1px solid #E9EDF2;
+  }
+
   .toggle-multi-tier-sidenav-title {
     margin: 2rem 0 0 .6rem;
   }
 
+  .toggle-multi-tier-sidenav-user-name {
+    margin: 0 0 0 1.5rem;
+    padding: .8rem 0 0 .6rem;
+    font-size: .9rem
+  }
+
+  .toggle-multi-tier-sidenav-user-menu:before {
+    content: '';
+    position: absolute;
+    background-position: center;
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: .9rem;
+    height: .9rem;
+    margin: 1rem 0 1rem 0.6rem;
+    background-image: url("../assets/icons/airship-user-icon.svg");
+  }
+
+  .toggle-multi-tier-sidenav-user-menu-ul {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    li {
+      list-style: none;
+      font-family: $toggle-font-family;
+      font-size: .9rem;
+      padding: 0 0 1.5rem 0.6rem;
+      a, span {
+          color: #354b64;
+        }
+    }
+    li:hover {
+      a, span {
+          color: $toggle-blue;
+        }
+    }
+  }
+
   .toggle-multi-tier-sidenav-select-container {
     height: max-content;
     overflow: hidden;