add tab title navigation

emma-r-slight · Nov 8, 2020 · 5f82819 · 5f82819
1 parent afacf1b
commit 5f82819
Show file tree

Hide file tree

Showing 8 changed files with 857 additions and 5,705 deletions.
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css" />
     <title>Document</title>
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,5 +10,7 @@
   },
   "author": "Emma S",
   "license": "ISC",
-  "devDependencies": {}
+  "devDependencies": {
+    "sass": "^1.29.0"
+  }
 }
diff --git a/src/home.js b/src/home.js
@@ -0,0 +1,6 @@
+import { addContent, elementContent } from './utils'
+
+const tabContent = () => {
+  const tabPanel = document.createElement('div')
+  elementContent.appendChild(tabPanel)
+}
diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,43 @@
-import { container } from './utils'
-const newEl = document.createElement('h1')
-const text = document.createTextNode('Hello World')
-newEl.appendChild(text)
-container.appendChild(newEl)
+import { elementContent, container } from './utils'
+import { tabNav } from './navigation'
+
+function initTab(elem) {
+  //addEventListener on mouse click
+  document.addEventListener('click', function (e) {
+    //check is the right element clicked
+    if (!e.target.matches('.tab-btn')) return
+    else {
+      if (!e.target.classList.contains('active')) {
+        //if option true remove active class from all other t-btn and t-panel
+        findActiveElementAndRemoveIt('.tab-btn')
+        console.log('click1')
+        // findActiveElementAndRemoveIt(elem+' .t-panel');
+
+        //add active class on clicked tab
+        e.target.classList.add('active')
+
+        // setTimeout(function(){
+        //     var panel = document.querySelectorAll(elem+' .t-panel.'+e.target.dataset.name);
+        //     Array.prototype.forEach.call(panel, function (el) {
+        //         //add active class on right t-panel after 200ms because of the smooth animation
+        //         el.classList.add('active');
+        //     });
+        // }, 200);
+      }
+    }
+  })
+}
+
+//if option true remove active class from added element
+function findActiveElementAndRemoveIt(elem) {
+  var elementList = document.querySelectorAll(elem)
+  Array.prototype.forEach.call(elementList, function (e) {
+    e.classList.remove('active')
+    console.log('remove')
+  })
+}
+
+//activate tabs function
+initTab('.tabs')
+
+tabNav()
diff --git a/src/navigation.js b/src/navigation.js
@@ -0,0 +1,13 @@
+import { addContent, container, elementContent, flexContainer } from './utils'
+
+const tabNav = () => {
+  const tabBtn = document.createElement('div')
+  tabBtn.classList.add('tab-container')
+  elementContent.appendChild(tabBtn)
+  container.appendChild(elementContent)
+  addContent(tabBtn, 'p', 'home-tab', 'tab-btn', 'Home')
+  addContent(tabBtn, 'p', 'menu-tab', 'tab-btn', 'Menu')
+  addContent(tabBtn, 'p', 'contact-tab', 'tab-btn', 'Contact')
+}
+
+export { tabNav }
diff --git a/src/utils.js b/src/utils.js
@@ -1,10 +1,11 @@
 const container = document.getElementById('container')
+container.classList.add('container')
 const elementContent = document.createElement('div')
 elementContent.id = 'elementContent'
 const flexContainer = document.createElement('div')
 flexContainer.id = 'flexContainer'
 
-const addContent = (parentElement, element, addName, addClass, text) => {
+const addContent = (parentElement, element, addId, addClass, text) => {
   const elementNode = document.createElement(element)
   const textNode = document.createTextNode(text)
   if (addId !== null) {

diff --git a/style.css b/style.css
@@ -0,0 +1,62 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: auto;
+  min-height: 300px;
+  font-family: monospace;
+}
+
+.tab-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 60px;
+  align-items: flex-end;
+  justify-content: center;
+  background-color: #262626;
+  border-radius: 5px;
+  padding: 0 20px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15),
+    0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
+  position: s;
+}
+
+.tab-btn {
+  padding: 0.5rem 2rem;
+  margin-right: 50px;
+  color: #b3b3b3;
+  font-weight: 400;
+  display: flex;
+  justify-content: stretch;
+  align-items: center;
+  font-size: 15px;
+  /* padding-left: 10px; */
+  font-weight: 400;
+  cursor: pointer;
+  border-radius: 5px 0 0 0;
+  transition: all 0.3s ease-in-out;
+}
+
+.tab-btn .active {
+  color: #fff;
+}
+
+.t-panel-container {
+  padding: 20px;
+}
+
+.t-panel {
+  color: #262626;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  height: auto;
+  max-height: 0px;
+  overflow: hidden;
+}
+
+.t-panel .active {
+  opacity: 1;
+  height: auto;
+  max-height: 500px;
+}