feat: added navbar

todo/src/components/navbar.js

@@ -0,0 +1,38 @@
+function navbar(projects) {
+    let nav = document.createElement('nav');
+    nav.classList.add('nav');
+
+    let projectsDiv = projectButtons(projects);
+    let addProjectBtn = addProject();
+
+    nav.appendChild(projectsDiv);
+    nav.appendChild(addProjectBtn);
+    
+    return nav;
+}
+
+function projectButtons(projects) {
+    let projectsDiv = document.createElement('div');
+    projectsDiv.classList.add(['projects']);
+
+    projects.forEach(e => {
+        if (e.name !== 'default') {
+            let btn = document.createElement('button');
+            btn.classList.add(['btn', 'project-btn']);
+            btn.textContent = e.name; 
+            projectsDiv.append(btn);
+        };
+    });
+    return projectsDiv;
+}
+
+function addProject() {
+    let btn = document.createElement('button');
+    btn.classList.add(['btn', 'add-project']);
+    btn.textContent = 'New Project';
+    return btn;
+
+}
+
+
+export { navbar };

todo/src/components/todo.js

@@ -85,10 +85,10 @@ class todoHandler {
     } 
 
     getProjects () {
-        return this.projects.map(item => item.name);
+        return this.projects;
     }
 
-    delProject = name => {
+    delProject(name) {
         let index = this.projects.findIndex(proj => proj.name === name);
         let tempArr = this.projects.filter(item => {
             if (item !== this.projects[index] || name === 'default' ){

todo/src/index.js

@@ -1,7 +1,9 @@
+import { navbar } from "./components/navbar";
 import { todoHandler } from "./components/todo";
 import { save, load } from "./components/storage";
 
-let todos; let data = load();
+let todos; 
+let data = load();
 
 // if there's local data save it in the array 
 if (data) {
@@ -15,6 +17,10 @@ if (data) {
 todos.addProject('job');
 todos.addTodo('default', 'test default 2', 'some stuff', 'today', 5);
 todos.addTodo('default', 'default 2', 'some stuff', 'today', 5);
+
+
+document.body.appendChild(navbar(todos.getProjects()));
+
 // todos.addTodo('chores', 'choretest', 'some stuff', 'today', 5);
 // todos.delProject('de');
 // todos.editTodo('default', 'test', 'stuffing', 'tomorrow', 4);