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
@@ -92,17 +89,19 @@ nav.navbar
       display:none !important
     &.show
       padding-bottom: 75vh
-  .search-icon
+    .search-icon
-    display: flex
+      display: flex
-    align-items: center
+      align-items: center
-    justify-content: center
+      justify-content: center
-    padding: 0 8px
+      padding: 0 8px
-    +media-breakpoint-up(lg)
+      +media-breakpoint-up(lg)
-      padding: 0 16px
+        padding: 0 16px
   .pi-search
     &::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
-    display: block
+    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
+    cursor: pointer
     position: absolute
     top: 11px
-    right: 0px
+    left: 11px
-#searchCloseButton
+  #searchCloseButton
-  cursor: pointer
+    cursor: pointer
-  position: absolute
+    position: absolute
-  right: 20px
+    right: 16px
+    top: 9px
 // #search-overlay.active {
 //   opacity: 1;
 //   visibility: visible;

src/templates/layout.pug

@@ -94,13 +94,12 @@ 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
-							i.search-icon.pi-search
+						a#searchCloseButton(ahref="#")
-					a#searchCloseButton(ahref="#")
+							img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt")
-						img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt")
 				//- Links
 				#navbarNav.collapse.navbar-collapse.justify-content-end
 					ul.navbar-nav