notificiation bar

client/public/components/components.js

@@ -16,14 +16,17 @@ async function loadComponents() {
     // there is a way to sideload this with express and have it do all that stuff
     // TODO: implement this
     const components = [ 
-        'navbar'
+        'navbar',
+        'notification-bar',
     ];
 
     for (let i = 0; i < components.length; i++) {
         const path = `./components/${components[i]}/${components[i]}.html`;
-        const component = await sideLoad(path);
+        let component = await sideLoad(path);
+
         const stylePath = `./components/${components[i]}/${components[i]}.css`;
         const styleComponent = await sideLoad(stylePath);
+
         const scriptPath = `./components/${components[i]}/${components[i]}.js`;
         const scriptComponent = await sideLoad(scriptPath);
 
@@ -31,10 +34,15 @@ async function loadComponents() {
             constructor() {
                 super();
             }
-            
-            async connectedCallback() {
-                const shadow = this.attachShadow({mode: 'open'});
 
+            async connectedCallback() {
+                // TODO: THIS NEEDS DOCUMENTATION / REFACTORING
+                // make a kinda generic way to do this
+                // needs to be before the shadow dom is attatched
+                component = component.replace('${innerText}', this.innerText)
+
+                const shadow = this.attachShadow({mode: 'open'});
+                
                 shadow.innerHTML = component;
                 
                 const script = document.createElement('script');

client/public/components/navbar/navbar.css

@@ -17,7 +17,6 @@
     margin-left: auto;
 }
 
-/* Menu */
 .hamburger {
     background: transparent;
     border: none;
@@ -27,7 +26,7 @@
     position: relative;
     height: 60px;
     width: 60px;
-    z-index: 4;
+    z-index: 100;
 }
 
 .hamburger-line {
@@ -114,11 +113,11 @@
 
 @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
     .nav-menu {
-        background: #E4D6FF;
+        position: fixed;
+        background: #e4d6ffde;
         flex-direction: column;
         justify-content: center;
         opacity: 0;
-        position: absolute;
         top: 0;
         right: 0;
         bottom: 0;

client/public/components/notification-bar/notification-bar.css

@@ -0,0 +1,105 @@
+.notification-bar {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 35px;
+    background-color: #00B4F5;
+    box-shadow: #222 0px 0px 5px;
+    transition: all 0.2s ease-in;
+}
+
+.notification-bar-text {
+    font-family: 'Open Sans', sans-serif;
+    text-transform: uppercase;
+    text-align: center;
+    color: #fff;
+    padding: 0px 15px;
+    height: 100%;
+    line-height: 35px;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+}
+
+.notification-bar-close {
+    display: inline-block;
+    padding: 0px 15px;
+    height: 100%;
+    line-height: 35px;
+    color: #fff;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Open Sans', sans-serif;
+}
+
+.notification-bar-close:hover {
+    color: #fff;
+}
+
+.notification-bar-close:focus {
+    outline: none;
+}
+
+.notification-bar-close:active {
+    color: #fff;
+}
+
+.notification-bar-close:hover {
+    color: #fff;
+}
+
+.notification-bar-close:focus {
+    outline: none;
+}
+
+.notification-toggler {
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    height: 30px;
+    width: 30px;
+    z-index: 100;
+    transition: all 0.2s ease-in;
+}
+
+.cross-line {
+    background: #222;
+    box-shadow: #222 0px 0px 2px;
+    position: absolute;
+    height: 2px;
+    left: 0;
+    width: 100%;
+}
+
+#notification-toggler:hover .cross-line {
+    background: #555;
+}
+
+.cross-line-top {
+    top: 50%;
+    transform: rotate(45deg) translatey(-50%);
+}
+
+.cross-line-bottom {
+    bottom: 50%;
+    transform: rotate(-45deg) translatey(50%);
+}
+
+/* move it further up the screen than the mobile toggler would */
+.notification-toggled {
+    transform: translatey(-200%);
+}
+
+/* don's show on mobile or "small mode" */
+@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) {
+    .notification-bar {
+        transform: translatey(-100%);
+    }
+}

client/public/components/notification-bar/notification-bar.html

@@ -0,0 +1,9 @@
+<div class="notification-bar">
+    <div class="notification-bar-text">
+        ${innerText}
+    </div>
+    <button class="notification-toggler">
+        <span class="cross-line cross-line-top"></span>
+        <span class="cross-line cross-line-bottom"></span>
+    </button>
+</div>

client/public/components/notification-bar/notification-bar.js

@@ -0,0 +1,6 @@
+const notificationToggler = document.querySelector('notification-bar-component').shadowRoot.querySelector('.notification-toggler');
+const notificationBar = document.querySelector('notification-bar-component').shadowRoot.querySelector('.notification-bar');
+
+notificationToggler.addEventListener('click', function() {
+    notificationBar.classList.add('notification-toggled');
+});

client/public/global.css

@@ -10,6 +10,7 @@ body {
 }
 
 limited-margin {
+    position: relative;
     display: block;
     margin-left: auto;
     margin-right: auto;

client/public/index.html

@@ -9,10 +9,11 @@
 	<script src="components/components.js"></script>
 </head>
 <body>
-	<limited-margin>
+	<notification-bar-component>
+		15:03:04 - New Limited Time Offer, Get Any Lego Set for £10!
+	</notification-bar-component>
 
+	<limited-margin>
 		<navbar-component></navbar-component>
-		
-		
 	</limited-margin>
 </body>