Update Search Bar. Fix dropdown menus.

cloud/static/assets/js/layout.min.js

@@ -1,26 +1,56 @@
+/* Variables
+   ================================================================== */
+var searchToggleStatus = false
+
+/* Selectors
+   ================================================================== */
+var searchButton = document.querySelector('#searchButton')
+var searchCloseButton = document.querySelector('#searchCloseButton')
+var searchNav = document.querySelector('#searchNav')
+var searchNavInput = document.querySelector('#searchNav input')
+var navbarNav = document.querySelector('#navbarNav')
+var profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
 
 /* Interactions
    ================================================================== */
-$('#searchButton').click(function(){
+searchButton.addEventListener('click', showSearch)
-  showSearch()
+searchCloseButton.addEventListener('click', closeSearch)
-})
-$('#searchCloseButton').click(function(){
-  closeSearch()
-})
-
 
 
 /* Functions
    ================================================================== */
 function showSearch() {
-  $('#searchbarNav').addClass('active')
+  searchToggleStatus = true
-  $('#searchbarNav input').focus()
+  searchNav.classList.add('active')
-  $('#navbarNav').addClass('invisible')
+  searchNavInput.focus()
+  navbarNav.classList.add('invisible')
+  profileMenu.classList.add('visible')
   // $('#search-overlay').addClass('active')
+  // if (searchToggleStatus == true) {
+  //   // $(document.body).click(function() {
+  //     // console.log('detect click outside');      
+  //     //   searchToggleStatus = false
+  //     // })
+  //     console.log(searchToggleStatus);
+  //     console.log('detect click outside');      
+  //     searchToggleStatus = false
+  //     console.log(searchToggleStatus);
+  // } else {
+  //   console.log(searchToggleStatus);
+  //   console.log('not detecting clicks');
+    
+  // }
+    // $(document.body).click(function () {
+    //   console.log('detected click outside');
+    //   searchToggleStatus == false
+    // }) else {
+    // }
 }
 
 function closeSearch() {
-  $('#searchbarNav').removeClass('active')
+  console.log('close button working')
-  $('#navbarNav').removeClass('invisible')
+  searchNav.classList.remove('active')
+  navbarNav.classList.remove('invisible')
+  profileMenu.classList.remove('visible')
   // $('#search-overlay').removeClass('active')
 }

src/scripts/layout.js

@@ -1,26 +1,56 @@
+/* Variables
+   ================================================================== */
+var searchToggleStatus = false
+
+/* Selectors
+   ================================================================== */
+var searchButton = document.querySelector('#searchButton')
+var searchCloseButton = document.querySelector('#searchCloseButton')
+var searchNav = document.querySelector('#searchNav')
+var searchNavInput = document.querySelector('#searchNav input')
+var navbarNav = document.querySelector('#navbarNav')
+var profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
 
 /* Interactions
    ================================================================== */
-$('#searchButton').click(function(){
+searchButton.addEventListener('click', showSearch)
-  showSearch()
+searchCloseButton.addEventListener('click', closeSearch)
-})
-$('#searchCloseButton').click(function(){
-  closeSearch()
-})
-
 
 
 /* Functions
    ================================================================== */
 function showSearch() {
-  $('#searchbarNav').addClass('active')
+  searchToggleStatus = true
-  $('#searchbarNav input').focus()
+  searchNav.classList.add('active')
-  $('#navbarNav').addClass('invisible')
+  searchNavInput.focus()
+  navbarNav.classList.add('invisible')
+  profileMenu.classList.add('visible')
   // $('#search-overlay').addClass('active')
+  // if (searchToggleStatus == true) {
+  //   // $(document.body).click(function() {
+  //     // console.log('detect click outside');      
+  //     //   searchToggleStatus = false
+  //     // })
+  //     console.log(searchToggleStatus);
+  //     console.log('detect click outside');      
+  //     searchToggleStatus = false
+  //     console.log(searchToggleStatus);
+  // } else {
+  //   console.log(searchToggleStatus);
+  //   console.log('not detecting clicks');
+    
+  // }
+    // $(document.body).click(function () {
+    //   console.log('detected click outside');
+    //   searchToggleStatus == false
+    // }) else {
+    // }
 }
 
 function closeSearch() {
-  $('#searchbarNav').removeClass('active')
+  console.log('close button working')
-  $('#navbarNav').removeClass('invisible')
+  searchNav.classList.remove('active')
+  navbarNav.classList.remove('invisible')
+  profileMenu.classList.remove('visible')
   // $('#search-overlay').removeClass('active')
 }

src/styles/_navbar.sass

@@ -38,20 +38,17 @@ nav.navbar
       box-shadow: none
   li:last-of-type
     // profile menu
+    z-index: 1002
     .dropdown-menu
       right: 0
       left: auto
-      min-width: 10rem
+      top: 54px
       padding: .5rem 0
-      margin: -1px 0 0
+      margin: .125rem 0 0
-      font-size: 1rem
+      &.visible
-      color: #111
+        visibility: visible
-      text-align: left
+      li a
-      list-style: none
+        padding: 0 15px 0 12px
-      background-color: #fff
-      background-clip: padding-box
-      border: 1px solid rgba(0,0,0,.15)
-      border-radius: .25rem
     li:hover
       background-color: #f8f9fa
   .dropdown ul.dropdown-menu li a
@@ -67,7 +64,7 @@ nav.navbar
     +media-breakpoint-up(lg)
       padding: 6px 18px
     &:hover
-      color: $muted
+      color: $primary
   .navbar-toggler
     border: 0
     display: block
@@ -103,6 +100,8 @@ nav.navbar
     &::before
       color: rgba(17,17,17,0.75)
       font-size: 16px
+      &:hover
+        color: $primary
   .nav-notifications
     display: flex
     align-items: center
@@ -129,17 +128,30 @@ nav.navbar
     display: block
   .nav-notifications-icon
     color: rgba(17,17,17,0.75)
+    &:hover
+      color: $primary
   .gravatar
     width: 32px
     border-radius: 50%
   .dropdown-menu
     margin-top: -1px
-  .dropdown:hover>.dropdown-menu
+    border: 0
+    border-radius: 0 0 4px 4px
+    box-shadow: none
+    font-size: 1rem
+    color: #111
+    text-align: left
+    list-style: none
+    background-color: #fff
+    background-clip: padding-box
+  .dropdown:hover
+    background: none
+    &>.dropdown-menu
       display: block
   .dropdown-item
     color: #111
     font-size: 18px
-    padding: 4px 8px
+    padding: 0px 15px
     i
       padding-right: 8px
 #userDropdown
@@ -149,7 +161,7 @@ nav.navbar
     padding-right: 0
     outline: none
 
-#searchbarNav
+#searchNav
   background-color: #fff
   position: absolute
   display: none
@@ -167,11 +179,11 @@ nav.navbar
     max-width: 560px
     width: 100%
   input
-    padding: 8px 20px
+    padding: 8px 20px 8px 46px
     color: #4d4e53
     box-shadow: none
-    border: 1px solid #999
+    border: 1px solid #bebebe
-    border-radius: 4
+    border-radius: 4px
     border-bottom-color: none
     background-color: #fff
     font-size: 18px
@@ -179,13 +191,15 @@ nav.navbar
     width: 100%
     max-width: 560px
   .search-icon
-    position: absolute
-    top: 11px
-    right: 0px
-#searchCloseButton
     cursor: pointer
     position: absolute
-  right: 20px
+    top: 11px
+    left: 11px
+  #searchCloseButton
+    cursor: pointer
+    position: absolute
+    right: 16px
+    top: 9px
 // #search-overlay.active {
 //   opacity: 1;
 //   visibility: visible;

src/templates/layout.pug

@@ -94,10 +94,9 @@ html(lang="en")
 					span
 					span
 				//- Search Bar
-				#searchbarNav
+				#searchNav
 					span.search-container
-						input#cloud-search(type="text", placeholder="Search assets, tutorials...")
+						input#cloud-search(type="text", placeholder="Search Blender Cloud")
-						a
 						i.search-icon.pi-search
 						a#searchCloseButton(ahref="#")
 							img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt")