titaned-frontend-library 1.0.1

package/dist/components/MainHeader.scss

@@ -0,0 +1,915 @@
+.mainHeaderContainer {
+  display: flex;
+}
+
+.navbarContainer {
+  background-color: var(--bg-surface);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  height: 6rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  // padding-left: 3rem;
+  padding-right: 3rem;
+  // .d-flex.align-items-center {
+  //     display: flex;
+  //     align-items: center;
+  //     gap: 1rem;
+  // }
+
+  .navbar-brand {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      
+      img {
+          max-width: 100%;
+          height: auto;
+          object-fit: contain;
+          max-height: 5rem;
+          padding-top: 0.5rem;
+          padding-bottom: 0.5rem;
+      }
+  }
+
+  .navbar-collapse {
+      background-color: var(--c8);
+      border-radius: 0 0 0.5rem 0.5rem;
+      padding: 1rem;
+  }
+
+  // Center search container
+  .d-flex.align-items-center.justify-content-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      z-index: 1;
+  }
+
+  .toggle-sidebar-icon {
+      display: flex;
+      align-items: center;
+      margin: 0;
+      margin-right: 1rem;
+  }
+
+  .search-field-custom {
+      max-width: 30rem;
+  }
+
+  // .icon-curved-square {
+  //     display: flex;
+  //     align-items: center;
+  //     justify-content: center;
+  //     // width: 2.5rem;
+  //     // height: 2.5rem;
+  //     // border-radius: 0.5rem;
+  //     background-color: #f5f5f5;
+  //     margin: 0 0.25rem;
+  //     cursor: pointer;
+  //     transition: background-color 0.2s;
+
+  //     &:hover {
+  //         background-color: #e5e5e5;
+  //     }
+  // }
+
+  // .language-dropdown {
+  //     margin: 0 0.5rem;
+  // }
+
+  // .usermenu-dropdown {
+  //     margin-left: 0.5rem;
+  // }
+
+  // Mobile styles
+  @media (max-width: 767px) {
+      // padding-left: 1rem;
+      padding-right: 0.25rem;
+
+      // .d-flex.align-items-center {
+      //     gap: 0.5rem;
+      // }
+
+      .navbar-brand {
+          img {
+              max-width: 5rem;
+              height: auto;
+              object-fit: contain;
+              max-height: 5rem;
+              padding-top: 0.2rem;
+              padding-bottom: 0.2rem;
+          }
+      }
+
+      .toggle-sidebar-icon {
+          margin: 0;
+          padding: 0;
+      }
+      .more-menu-dropdown {
+          position: absolute;
+          top: 100%;
+          right: 1rem;
+          background-color: var(--bg-surface);
+          border-radius: 0.5rem;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+          padding: 1rem;
+          z-index: 1000;
+          display: flex;
+          flex-direction: column;
+          min-width: 200px;
+
+          .more-menu-icons-row {
+              display: flex;
+              flex-direction: row;
+              gap: 0.5rem;
+              width: 100%;
+              margin-bottom: 0.5rem;
+
+              .icon-curved-square {
+                  flex: 1;
+                  display: flex;
+                  
+                  .btn-icon {
+                      width: 100%;
+                      height: 100%;
+                      padding: 0.5rem;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                  }
+              }
+          }
+
+          .language-dropdown {
+              width: 100%;
+              margin-top: 0.5rem;
+              margin-bottom: 0.5rem;
+          }
+      }
+      // .navbar-brand,
+      // .toggle-sidebar-icon {
+      //     flex: 0 0 auto;
+      //     min-width: unset;
+      //     max-width: unset;
+      // }
+      // .navbar-brand {
+      //     margin-right: 0;
+      //     padding-right: 0;
+      //     img {
+      //         max-width: 5rem;
+      //         height: auto;
+      //         object-fit: contain;
+      //         max-height: 5rem;
+      //         padding-top: 0.5rem;
+      //         padding-bottom: 0.5rem;
+      //     }
+      // }
+      .toggle-sidebar-icon {
+          margin-left: 0;
+          padding-left: 0;
+      }
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      height: 5rem;
+      justify-content: flex-start;
+  }
+
+  @media (max-width: 400px) {
+      // .d-flex.align-items-center {
+      //     gap: 0.3rem;
+      // }
+
+      // .toggle-sidebar-icon {
+      //     max-width: 2rem;
+      //     min-width: 2rem;
+      //     width: 2rem;
+      //     height: 2rem;
+      //     margin: 0 1px;
+      //     padding: 0;
+      //     flex-shrink: 0;
+      // }
+
+      // .navbar-brand {
+      //     img {
+      //         max-width: 4rem;
+      //         max-height: 4rem;
+      //         padding: 0.1rem 0;
+      //     }
+      // }
+      // .icon-curved-square,
+      // .language-dropdown {
+      //     max-width: 2rem;
+      //     min-width: 2rem;
+      //     width: 2rem;
+      //     height: 2rem;
+      //     margin: 0 1px;
+      //     padding: 0;
+      //     flex-shrink: 0;
+      // }
+      // .usermenu-dropdown {
+      //     min-width: 0;
+      //     max-width: 100%;
+      //     flex-shrink: 1;
+      //     margin: 0 1px;
+      //     padding: 0;
+      // }
+      // .d-flex.align-items-center.gap-2.ms-auto {
+      //     gap: 0.15rem !important;
+      //     min-width: 0;
+      // }
+
+      
+  }
+}
+
+.buttonListContainer {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  flex: 1;
+}
+
+.navbarList {
+  display: flex;
+  gap: 2rem;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+.navbarList li {
+  cursor: pointer;
+  color: var(--c6);
+}
+
+.navbarList li:hover {
+  color: var(--c2);
+}
+
+.navbarButtons {
+  display: flex;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+.navbarListLeft {
+  justify-self: start;
+  margin-left: 4rem;
+}
+
+.navbarListCenter {
+  justify-self: center;
+}
+
+.navbarListRight {
+  justify-self: end;
+  margin-right: 4rem;
+} 
+
+.menuButton {
+  padding: 0.75rem 1.25rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: var(--c6); /* or your preferred text color */
+  background-color: var(--bg-surface);
+  outline: none !important;
+  border-color: var(--bg-surface) !important;
+  width: 8rem;
+}
+
+.mainHeaderContainer {
+  display: flex;
+  position: relative;
+  // z-index: 100;
+}
+
+// .btn-outline-primary {
+//     border: none;
+//   }
+
+
+.nav-gap {
+  gap: 3rem;
+}
+
+.dropdown-menu {
+  min-width: 15rem !important;
+}
+
+.search-field-custom {
+background: var(--bg-surface);
+border: 2px solid var(--primary-light) !important;
+border-radius: 30px !important;
+padding: 0.3rem 0.6rem !important;
+display: flex;
+align-items: center;
+box-shadow: none !important;
+min-height: 35px;
+position: relative;
+pointer-events: auto !important;
+
+input {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  color: var(--text-light) !important;
+  font-size: 1.1rem;
+  font-weight: 500;
+  pointer-events: auto !important;
+  user-select: text !important;
+  &::placeholder {
+    color: var(--text-secondary, #697586) !important;
+    opacity: 1;
+  }
+}
+
+//   .btn-icon.btn-icon-primary {
+//         width: 42px;
+//         height: 42px;
+//         border-radius: 12px;
+//     }
+
+.pgn__searchfield-form {
+  outline: none !important;
+  border: none !important;
+}
+
+}
+
+.search-field-custom input:focus {
+outline: none !important;
+box-shadow: none !important;
+}
+
+.pgn__searchfield.has-focus:not(.pgn__searchfield--external)::after {
+  border: none !important;
+}
+
+.pgn__searchfield:hover, .pgn__searchfield:active {
+  border: 2px solid var(--primary) !important;
+}
+
+.icon-curved-square .btn-icon.btn-icon-primary {
+  background-color: var(--primary-light) !important;
+  margin-right: 1rem;
+  // width: 42px;
+  // height: 42px;
+  // border-radius: 12px;
+
+  &:hover {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  &:active {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  &:focus {
+      background-color: var(--primary-light);
+      color: var(--primary);
+
+      &:hover {
+          background-color: var(--primary) !important;
+          color: var(--primary-light) !important;
+      }
+  }
+}
+
+.language-dropdown {
+
+
+  .btn-tertiary {
+      background-color: var(--primary-light);
+      border-radius: 25px;
+  }
+  
+  .btn-tertiary:hover {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  .btn-tertiary.dropdown-toggle {
+      background-color: var(--primary-light) !important;
+      color: var(--primary) !important;
+
+      &:hover {
+          background-color: var(--primary) !important;
+          color: var(--primary-light) !important;
+      }
+  }
+}
+
+.usermenu-dropdown {
+  // margin: 0 6px;
+  margin-left: 1rem;
+
+  .btn-tertiary {
+      // background-color: var(--primary-light);
+      border-radius: 10px;
+  }
+
+  // .btn-tertiary:hover {
+  //     background-color: var(--primary) !important;
+  //     color: var(--primary-light) !important;
+  // }
+
+  // .btn-tertiary.dropdown-toggle {
+  //     background-color: var(--primary-light) !important;
+  //     color: var(--primary) !important;
+
+  //     &:hover {
+  //         background-color: var(--primary) !important;
+  //         color: var(--primary-light) !important;
+  //     }
+  // }
+}
+
+.toggle-sidebar-icon .btn-icon.btn-icon-primary {
+  background-color: var(--primary-light);
+  // width: 42px;
+  // height: 42px;
+  // border-radius: 12px;
+
+  &:hover {
+      background-color: var(--primary);
+      color: var(--primary-light) !important;
+  }
+
+  &:active {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  &:focus {
+      background-color: var(--primary-light);
+      color: var(--primary);
+
+      &:hover {
+          background-color: var(--primary) !important;
+          color: var(--primary-light) !important;
+      }
+  }
+}
+
+// Search modal styles
+.search-modal {
+.modal-content {
+  border-radius: 0.5rem;
+}
+
+.modal-header {
+  border-bottom: none;
+  padding: 1rem 1.5rem;
+}
+
+.modal-body {
+  padding: 0 1.5rem 1.5rem;
+}
+}
+
+.fixed-search-bar {
+position: fixed;
+top: 0;
+left: 0;
+width: 100vw;
+z-index: 2000;
+background: rgba(255,255,255,0.98);
+box-shadow: 0 2px 8px rgba(0,0,0,0.10);
+padding: 1rem 0.5rem;
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+.fixed-search-bar-inner {
+width: 100%;
+max-width: 600px;
+position: relative;
+display: flex;
+align-items: center;
+}
+
+.fixed-search-bar .close-search-bar {
+background: none;
+border: none;
+font-size: 2rem;
+color: var(--text-muted);
+margin-left: 0.5rem;
+cursor: pointer;
+line-height: 1;
+transition: color 0.2s;
+}
+
+.fixed-search-bar .close-search-bar:hover {
+color: var(--text-primary);
+}
+
+.no-results-message {
+text-align: center;
+padding: 1rem;
+margin-top: 1rem;
+color: var(--text-muted);
+font-size: 1rem;
+background-color: var(--bg-surface);
+border-radius: 0.5rem;
+border: 1px solid var(--border-color);
+
+p {
+  margin: 0;
+  font-weight: 400;
+}
+}
+
+.no-results-message-desktop {
+position: absolute;
+top: 100%;
+left: 0;
+right: 0;
+z-index: 1000;
+background-color: var(--bg-surface);
+border: 1px solid var(--border-color);
+border-radius: 0.5rem;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+padding: 1rem;
+margin-top: 0.5rem;
+text-align: center;
+color: var(--text-muted);
+font-size: 0.9rem;
+
+p {
+  margin: 0;
+  font-weight: 400;
+}
+}
+
+.search-loading-spinner {
+display: inline-block;
+width: 16px;
+height: 16px;
+border: 2px solid var(--border-color);
+border-top: 2px solid var(--primary);
+border-radius: 50%;
+animation: spin 1s linear infinite;
+margin-right: 8px;
+}
+
+@keyframes spin {
+0% { transform: rotate(0deg); }
+100% { transform: rotate(360deg); }
+}
+
+.search-loading-spinner-container {
+position: absolute;
+top: 100%;
+left: 0;
+right: 0;
+z-index: 1000;
+background-color: var(--bg-surface);
+border: 1px solid var(--border-color);
+border-radius: 0.5rem;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+padding: 1rem;
+margin-top: 0.5rem;
+display: flex;
+align-items: center;
+justify-content: center;
+color: var(--text-muted);
+font-size: 0.9rem;
+}
+
+.search-error-message-desktop {
+position: absolute;
+top: 100%;
+left: 0;
+right: 0;
+z-index: 1000;
+background-color: var(--bg-surface);
+border: 1px solid var(--danger);
+border-radius: 0.5rem;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+padding: 1rem;
+margin-top: 0.5rem;
+text-align: center;
+color: var(--danger);
+font-size: 0.9rem;
+
+p {
+  margin: 0;
+  font-weight: 400;
+}
+}
+
+.search-results-dropdown {
+position: absolute;
+top: 100%;
+left: 0;
+right: 0;
+z-index: 1000;
+background-color: var(--bg-surface);
+border: 1px solid var(--border-color);
+border-radius: 0.5rem;
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+margin-top: 0.5rem;
+max-height: 400px;
+overflow-y: auto;
+
+.search-results-header {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-body);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.search-results-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.search-result-item {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--bg-hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .search-result-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .search-result-icon {
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+    color: var(--text-muted);
+  }
+
+  .search-result-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .search-result-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.25rem;
+    font-size: 0.9rem;
+    line-height: 1.3;
+  }
+
+  .search-result-description {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    line-height: 1.4;
+    margin-bottom: 0.5rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .search-result-breadcrumbs {
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    line-height: 1.2;
+    margin-top: 0.25rem;
+  }
+
+  .search-result-actions {
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+  }
+
+  .search-result-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .search-result-type {
+      background-color: var(--bg-surface);
+      color: var(--text-muted);
+      padding: 0.125rem 0.5rem;
+      border-radius: 0.25rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+  }
+}
+
+// Search highlight styles
+.search-highlight {
+  background-color: var(--bg-hover);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-weight: 600;
+}
+
+.search-results-more {
+  padding: 0;
+  text-align: center;
+  background-color: var(--bg-body);
+  border-top: 1px solid var(--border-color);
+  
+  button {
+    background: none;
+    border: none;
+    color: var(--primary);
+    cursor: pointer;
+    padding: 8px 16px;
+    width: 100%;
+    text-align: center;
+    font-size: 14px;
+    transition: background-color 0.2s;
+    
+    &:hover {
+      background-color: var(--bg-hover);
+    }
+  }
+}
+}
+
+.search-results-mobile {
+margin-top: 1rem;
+background-color: var(--bg-surface);
+border-radius: 0.5rem;
+box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+max-height: 60vh;
+overflow-y: auto;
+
+.search-results-header {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-body);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.search-results-list {
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.search-result-item {
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: var(--bg-hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .search-result-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .search-result-icon {
+    flex-shrink: 0;
+    margin-top: 0.25rem;
+    color: var(--text-muted);
+  }
+
+  .search-result-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .search-result-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+    line-height: 1.3;
+  }
+
+  .search-result-description {
+    color: var(--text-muted);
+    font-size: 0.875rem;
+    line-height: 1.4;
+    margin-bottom: 0.75rem;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .search-result-breadcrumbs {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    line-height: 1.2;
+    margin-top: 0.5rem;
+  }
+
+  .search-result-actions {
+    flex-shrink: 0;
+    margin-top: 0.25rem;
+  }
+
+  .search-result-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    .search-result-type {
+      background-color: var(--bg-hover);
+      color: var(--text-secondary);
+      padding: 0.25rem 0.75rem;
+      border-radius: 0.375rem;
+      font-size: 0.75rem;
+      font-weight: 500;
+      text-transform: uppercase;
+    }
+  }
+}
+}
+
+.search-error-message {
+margin-top: 1rem;
+padding: 1rem;
+background-color: var(--bg-disabled);
+border: 1px solid var(--danger);
+border-radius: 0.5rem;
+color: var(--danger);
+text-align: center;
+
+p {
+  margin: 0;
+  font-weight: 400;
+}
+}
+
+.navbar-buttons .btn-icon.btn-icon-primary {
+  background-color: var(--primary-light);
+  // width: 42px;
+  // height: 42px;
+  // border-radius: 12px;
+
+  &:hover {
+      background-color: var(--primary);
+      color: var(--primary-light) !important;
+  }
+
+  &:active {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  &:focus {
+      background-color: var(--primary-light);
+      color: var(--primary);
+
+      &:hover {
+          background-color: var(--primary) !important;
+          color: var(--primary-light) !important;
+      }
+  }
+}
+
+
+.usermenu-dropdown-mobile {
+  // margin: 0 6px;
+
+  .btn-tertiary {
+      background-color: var(--primary-light);
+      border-radius: 25px;
+  }
+
+  .btn-tertiary:hover {
+      background-color: var(--primary) !important;
+      color: var(--primary-light) !important;
+  }
+
+  .btn-tertiary.dropdown-toggle {
+      background-color: var(--primary-light) !important;
+      color: var(--primary) !important;
+
+      &:hover {
+          background-color: var(--primary) !important;
+          color: var(--primary-light) !important;
+      }
+  }
+}