HTML, CSS, JS and JAVA corrections (#810)

* CSS corrections

* HTML corrections

* JS corrections

* JAVA corrections

* remove tab

* CSS corrections 2

* JS corrections 2

* back to the roots

* max-linie 127

* add slash hr|br

* return bootstrap-icons.css

* return bootstrap-icons.min.css

* return bootstrap.min.css

* Update bootstrap-icons.css

* Update bootstrap-icons.min.css

* Update bootstrap-icons.min.css

* Update bootstrap.min.css

* CSS corrections

* HTML corrections

* JS corrections

* JAVA corrections

* remove tab

* CSS corrections 2

* JS corrections 2

* back to the roots

* max-linie 127

* add slash hr|br

* return bootstrap-icons.css

* Update bootstrap-icons.css

* Bootstrap CSS

* Update prism.css

src/main/resources/static/css/navbar.css

@@ -1,80 +1,116 @@
-
-
 #navbarSearch {
-    top: 100%;
-    right: 0;
+  top: 100%;
+  right: 0;
+  transition: all 0.3s;
+  max-height: 0;
+  overflow: hidden;
+}
+
+#navbarSearch.show {
+  max-height: 300px; /* Adjust this to your desired max height */
 }
 
 #searchForm {
-    width: 200px;  /* Adjust this value as needed */
+  width: 200px; /* Adjust this value as needed */
 }
 
 /* Style the search results to match the navbar */
 #searchResults {
-    max-height: 200px;  /* Adjust this value as needed */
-    overflow-y: auto;
-    width: 100%;
+  max-height: 200px; /* Adjust this value as needed */
+  overflow-y: auto;
+  width: 100%;
+  max-width: 300px; /* Adjust to your preferred width */
+  transition: height 0.3s ease; /* Smooth height transition */
 }
 
 #searchResults .dropdown-item {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    height: 50px;  /* Fixed height */
-    overflow: hidden;  /* Hide overflow */
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  height: 50px; /* Fixed height */
+  overflow: hidden; /* Hide overflow */
 }
 
 #searchResults .icon {
-    margin-right: 10px;
+  margin-right: 10px;
 }
 
 #searchResults .icon-text {
-    display: inline;
-    overflow: hidden;  /* Hide overflow */
-    text-overflow: ellipsis;  /* Add ellipsis for long text */
+  display: inline;
+  overflow: hidden; /* Hide overflow */
+  text-overflow: ellipsis; /* Add ellipsis for long text */
 }
 
+#search-icon i {
+  font-size: 24px; /* Adjust this to your desired size */
+  transition: color 0.3s;
+}
 
+#search-icon:hover i {
+  color: #666; /* Adjust this to your hover color */
+}
+
+.search-input {
+  transition:
+    border 0.3s,
+    box-shadow 0.3s;
+}
+
+.search-input:focus {
+  border-color: #666; /* Adjust this to your focus color */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */
+}
+
+/* Set a fixed height and styling for each search result item */
+.search-results a {
+  display: flex;
+  align-items: center;
+  gap: 10px; /* space between icon and text */
+  height: 40px; /* Adjust based on your design */
+  overflow: hidden; /* Prevent content from overflowing */
+  white-space: nowrap; /* Prevent text from wrapping to next line */
+  text-overflow: ellipsis; /* Truncate text if it's too long */
+}
 
 .main-icon {
-	width: 36px;
-	height: 36px;
-	vertical-align: middle;
-	transform: translateY(-2px);
+  width: 36px;
+  height: 36px;
+  vertical-align: middle;
+  transform: translateY(-2px);
 }
 
 .icon {
-	width: 16px;
-	height: 16px;
-	vertical-align: middle;
-	transform: translateY(-2px);
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  transform: translateY(-2px);
 }
 
-.icon+.icon {
-	margin-left: -4px;
+.icon + .icon {
+  margin-left: -4px;
 }
 
 .icon-text {
-	margin-left: 4px;
+  margin-left: 4px;
 }
 
 .nav-item-separator {
-	position: relative;
-	margin: 0 4px; /* Adjust the margin as needed */
+  position: relative;
+  margin: 0 4px; /* Adjust the margin as needed */
 }
 
 .nav-item-separator::before {
-	content: '';
-	position: absolute;
-	left: 0;
-	top: 10%; /* Adjust the top and bottom margins as needed */
-	bottom: 10%;
-	width: 1px;
-	background-color: #ccc; /* Adjust the color as needed */
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 10%; /* Adjust the top and bottom margins as needed */
+  bottom: 10%;
+  width: 1px;
+  background-color: #ccc; /* Adjust the color as needed */
 }
 
 .navbar-icon {
-	width: 20px;
-	height: 20px;
-	transform: translateY(-2px);
-}
+  width: 20px;
+  height: 20px;
+  transform: translateY(-2px);
+}