feat(topbar): add search bar

src/components/topbar/topbar.module.css

@@ -2,16 +2,19 @@
 .boardNavDesktop {
   font-size: var(--topbar-font-size);
   color: var(--topbar-separator-color);
+  position: relative;
 }
 
-.boardNavDesktop a {
+.boardNavDesktop a, .navTopRight span {
   color: var(--topbar-desktop-link-text-color);
   text-decoration: var(--topbar-desktop-link-text-decoration);
+  text-transform: capitalize;
 }
 
-.boardNavDesktop a:hover {
+.boardNavDesktop a:hover, .navTopRight span:hover {
   color: var(--topbar-desktop-link-text-color-hover);
   text-decoration: var(--topbar-desktop-link-text-decoration-hover);
+  cursor: pointer;
 }
 
 .navTopRight {
@@ -19,6 +22,20 @@
   text-transform: capitalize;
 }
 
+.searchBar {
+  position: absolute;
+  right: 0;
+  padding: 3px 5px 0 0;
+}
+
+.searchBar input[type="text"] {
+  outline: none;
+  margin: 2px;
+  padding: 1px;
+  border: 1px solid #000;
+  width: 220px;
+}
+
 .boardNavMobile {
   padding: 2px 4px;
   background-color: var(--topbar-mobile-background-color);
@@ -32,11 +49,15 @@
   justify-content: space-around;
 }
 
-.boardNavMobile .pageJump a {
+.boardNavMobile .pageJump a, .boardNavMobile .pageJump span {
   color: var(--topbar-mobile-button-color);
   text-decoration: var(--button-text-decoration-mobile);
 }
 
+.pageJump {
+  position: relative;
+}
+
 .boardNavMobile strong {
   text-transform: capitalize;
   padding-right: 5px;
@@ -55,11 +76,10 @@
   padding: 3px 5px 0 0;
 }
 
-.pageJump a, .mobileSearchButton {
+.pageJump a, .pageJump span {
   padding-right: 5px;
   color: var(--homepage-box-link-text-color);
   text-decoration: var(--homepage-box-link-text-decoration);
-  text-transform: capitalize;
 }
 
 @media (max-width: 640px) {