css changes (navbar, settings page, contacts page)

app/javascript/packs/application.js

@@ -4,6 +4,26 @@ import { triggerModalEvent } from "../components/modal.js";
 
 triggerModalEvent();
 
-// import { profilePageAnimation } from '../users/lesson';
+const links = document.querySelector('links');
+const linksList = document.querySelectorAll('.links div');
 
-// profilePageAnimation();
+const getSiblings = function (elem) {
+  const siblings = [];
+  let sibling = elem.parentNode.firstChild;
+  const skipMe = elem;
+  for ( ; sibling; sibling = sibling.nextSibling )
+    if ( sibling.nodeType == 1 && sibling != elem )
+      siblings.push( sibling );
+  return siblings;
+}
+
+linksList.forEach(link => {
+  link.addEventListener('click', event => {
+    // event.preventDefault()
+    link.classList.add('active')
+    const siblings = getSiblings(link)
+    siblings.forEach(sibling => {
+      sibling.classList.remove('active');
+    })
+  })
+})

app/javascript/packs/notifications.js

@@ -1,6 +1,6 @@
 import ActionCable from 'actioncable'
 
-// create App object with key cable == new cosumer
+// create App object with key cable == new consumer
 (function() {
   window.App || (window.App = {});
 
@@ -40,10 +40,9 @@ App.cable.subscriptions.create({
   }
 })
 
-
+// Receive information from index.html.erb
 const acceptButton = document.getElementById('accept-button')
 
 acceptButton.addEventListener('click', event => {
-  // event.preventDefault()
   document.getElementById('chat-room-id').value = chatRoomId
 })

app/javascript/packs/settings_video.js

@@ -0,0 +1,14 @@
+const contactsVideo = document.getElementById("settings-video")
+
+try {
+  const contactsStream = navigator.mediaDevices.getUserMedia({
+    audio: false,
+    video: true
+  }).then(stream => {
+    contactsVideo.srcObject = stream;
+    contactsVideo.muted = true;
+  })
+} catch(e) {
+  console.error(e);
+  contactsVideo.innerHTML = "Unable to getUserMedia()";
+}