source/src/components/Navbar.tsx

@@ -9,9 +9,9 @@ import { isMobile } from "react-device-detect"
 import theming from "../theming"
 import NavbarData from "../data/NavbarData"
 
-import SearchBox from "./SearchBox"
 import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
+import { faSearch } from "@fortawesome/free-solid-svg-icons"
 
 const StyledNav = styled.nav`
 	position: absolute;
@@ -102,7 +102,19 @@ export default class Navbar extends React.Component {
 						</ReactTooltip>
 					)}
 
-					<SearchBox />
+					<StyledALink
+						data-tip
+						data-for="search"
+						href={`${process.env.PUBLIC_URL}/explore`}
+					>
+						<FontAwesomeIcon icon={faSearch} />
+					</StyledALink>
+					{!isMobile && (
+						<ReactTooltip id="search" type="dark" effect="solid">
+							<span>Search</span>
+						</ReactTooltip>
+					)}
+
 					<Sidebar />
 				</StyledContainer>
 			</StyledNav>

source/src/components/SearchBox.tsx

@@ -1,61 +0,0 @@
-import React from "react"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faSearch } from "@fortawesome/free-solid-svg-icons"
-import styled from "styled-components"
-
-import theming from "../theming"
-
-const StyledSearchBoxContainer = styled.div`
-	display: flex;
-	justify-content: left;
-	margin: 0.5rem;
-	align-items: center;
-	background-color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "whitesmoke",
-			dark: "#2F3136",
-		})};
-	color: ${(props) =>
-		theming.theme(props.theme.currentTheme, {
-			light: "black",
-			dark: "#CFD0D0",
-		})};
-
-	&:hover {
-		background-color: ${(props) =>
-			theming.theme(props.theme.currentTheme, {
-				light: "#eeeeee",
-				dark: "#36393F",
-			})};
-	}
-`
-
-const StyledSearchBox = styled.input`
-	width: 80%;
-	border: none;
-	border-right: 1rem;
-	outline: none;
-	padding: 10px 10px;
-	text-decoration: none;
-	background-color: inherit;
-	color: inherit;
-`
-
-const StyledSearchButton = styled(FontAwesomeIcon)`
-	cursor: pointer;
-`
-
-export default class Navbar extends React.Component {
-	render() {
-		return (
-			<StyledSearchBoxContainer>
-				<StyledSearchBox
-					type="text"
-					name="search"
-					placeholder="Search"
-				/>
-				<StyledSearchButton icon={faSearch} />
-			</StyledSearchBoxContainer>
-		)
-	}
-}