Removed all top level imports (bundle size), added search to appbar

src/components/Layout.tsx

@@ -1,10 +1,15 @@
 import { FC } from "react";
 
+import Box from "@mui/material/Box";
+
 import Navbar from "@components/Navbar";
 
 const Layout: FC = ({ children }) => (
 	<>
 		<Navbar />
+		<Box
+			sx={{ height: { sm: 64, xs: 56 }, display: "block", width: "100%" }}
+		></Box>
 		{children}
 	</>
 );

src/components/Navbar/Drawer.tsx

@@ -13,23 +13,24 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Typography from "@mui/material/Typography";
 
-import { Settings } from "@mui/icons-material";
+import Settings from "@mui/icons-material/Settings";
 
-const MuiDrawer: FC<{
+const AppDrawer: FC<{
 	drawerIsOpen: boolean;
 	toggleDrawer: (
 		isOpen: boolean
 	) => (event: React.KeyboardEvent | React.MouseEvent) => void;
+	width: number;
 	pages: {
 		name: string;
 		icon: JSX.Element;
 		link: string;
 	}[];
-}> = ({ drawerIsOpen, toggleDrawer, pages }) => {
+}> = ({ drawerIsOpen, toggleDrawer, pages, width }) => {
 	return (
 		<Drawer anchor="left" open={drawerIsOpen} onClose={toggleDrawer(false)}>
 			<Box
-				sx={{ width: 250 }}
+				sx={{ width }}
 				role="presentation"
 				onClick={toggleDrawer(false)}
 				onKeyDown={toggleDrawer(false)}
@@ -62,4 +63,4 @@ const MuiDrawer: FC<{
 	);
 };
 
-export default MuiDrawer;
+export default AppDrawer;

src/components/Navbar/Search.tsx

@@ -0,0 +1,43 @@
+import InputBase from "@mui/material/InputBase";
+import { alpha, styled } from "@mui/material/styles";
+
+const Search = styled("div")(({ theme }) => ({
+	position: "relative",
+	borderRadius: theme.shape.borderRadius,
+	backgroundColor: alpha(theme.palette.common.white, 0.15),
+	"&:hover": {
+		backgroundColor: alpha(theme.palette.common.white, 0.25)
+	},
+	marginRight: theme.spacing(2),
+	marginLeft: 0,
+	width: "100%",
+	[theme.breakpoints.up("sm")]: {
+		marginLeft: theme.spacing(3),
+		width: "auto"
+	}
+}));
+
+export const SearchIconWrapper = styled("div")(({ theme }) => ({
+	padding: theme.spacing(0, 2),
+	height: "100%",
+	position: "absolute",
+	pointerEvents: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center"
+}));
+
+export const StyledInputBase = styled(InputBase)(({ theme }) => ({
+	color: "inherit",
+	"& .MuiInputBase-input": {
+		padding: theme.spacing(1, 1, 1, 0),
+		paddingLeft: `calc(1em + ${theme.spacing(4)})`,
+		transition: theme.transitions.create("width"),
+		width: "100%",
+		[theme.breakpoints.up("md")]: {
+			width: "20ch"
+		}
+	}
+}));
+
+export default Search;

src/components/Navbar/index.tsx

@@ -1,6 +1,7 @@
 import packageInfo from "../../../package.json";
 
 import Link from "next/link";
+import { useRouter } from "next/router";
 
 import { FC, useState } from "react";
 
@@ -11,20 +12,26 @@ import IconButton from "@mui/material/IconButton";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 
-import {
-	History,
-	Subscriptions,
-	Menu,
-	Whatshot,
-	PlaylistAddCheck,
-	Settings,
-	PlayCircleOutline
-} from "@mui/icons-material";
+import History from "@mui/icons-material/History";
+import Menu from "@mui/icons-material/Menu";
+import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline";
+import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck";
+import SearchIcon from "@mui/icons-material/Search";
+import Settings from "@mui/icons-material/Settings";
+import Subscriptions from "@mui/icons-material/Subscriptions";
+import Whatshot from "@mui/icons-material/Whatshot";
 
 import Drawer from "@components/Navbar/Drawer";
+import Search, {
+	SearchIconWrapper,
+	StyledInputBase
+} from "@components/Navbar/Search";
+
+export const drawerWidth = 240;
 
 const Navbar: FC = () => {
 	const [drawerIsOpen, setDrawerState] = useState(false);
+	const router = useRouter();
 
 	const toggleDrawer =
 		(open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
@@ -61,12 +68,13 @@ const Navbar: FC = () => {
 	return (
 		<>
 			<Drawer
+				width={drawerWidth}
 				drawerIsOpen={drawerIsOpen}
 				toggleDrawer={toggleDrawer}
 				pages={pages}
 			/>
 			<Box sx={{ flexGrow: 1 }}>
-				<AppBar position="static" enableColorOnDark>
+				<AppBar position="fixed" enableColorOnDark>
 					<Toolbar>
 						<IconButton
 							size="large"
@@ -74,10 +82,11 @@ const Navbar: FC = () => {
 							color="inherit"
 							aria-label="menu"
 							sx={{ mr: 2, display: { md: "none", xs: "flex" } }}
-							onClick={toggleDrawer(true)}
+							onClick={() => setDrawerState(!drawerIsOpen)}
 						>
 							<Menu />
 						</IconButton>
+
 						<Typography
 							variant="h6"
 							component="div"
@@ -86,14 +95,20 @@ const Navbar: FC = () => {
 							<PlayCircleOutline sx={{ mr: 1 }} />
 							{packageInfo.displayName}
 						</Typography>
-						<Box sx={{ flexGrow: 1, display: { md: "flex", xs: "none" } }}>
+
+						<Box
+							sx={{
+								flexGrow: 1,
+								display: "flex",
+								alignItems: "center"
+							}}
+						>
 							{pages.map((page, i) => (
 								<Link key={i} href={"/" + page.link} passHref>
 									<Button
 										sx={{
-											my: 2,
 											color: "white",
-											display: "flex",
+											display: { lg: "flex", xs: "none" },
 											alignItems: "center"
 										}}
 									>
@@ -104,7 +119,21 @@ const Navbar: FC = () => {
 									</Button>
 								</Link>
 							))}
+
+							<Search>
+								<SearchIconWrapper>
+									<SearchIcon />
+								</SearchIconWrapper>
+								<form action={`${router.basePath}/results`} method="get">
+									<StyledInputBase
+										name="search_query"
+										placeholder="Search…"
+										inputProps={{ "aria-label": "search" }}
+									/>
+								</form>
+							</Search>
 						</Box>
+
 						<Link href="/settings" passHref>
 							<IconButton
 								sx={{ display: { md: "flex", xs: "none" } }}

src/components/Video/Grid.tsx

@@ -1,6 +1,6 @@
 import { FC } from "react";
 
-import { Grid } from "@mui/material";
+import Grid from "@mui/material/Grid";
 
 import { Video as VideoModel } from "@interfaces/video";
 

src/components/Video/index.tsx

@@ -1,3 +1,5 @@
+import axios, { AxiosError } from "axios";
+
 import Link from "next/link";
 import { useRouter } from "next/router";
 
@@ -11,14 +13,18 @@ import Card from "@mui/material/Card";
 import CardActionArea from "@mui/material/CardActionArea";
 import CardContent from "@mui/material/CardContent";
 import CardMedia from "@mui/material/CardMedia";
+import CircularProgress from "@mui/material/CircularProgress";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 
 import { abbreviateNumber } from "@src/utils";
 
-import { Channel, Quality } from "@interfaces/channel";
 import { Video as VideoModel } from "@interfaces/video";
 
+interface Channel {
+	authorThumbnails: { url: string; width: number; height: number }[];
+}
+
 const Video: FC<VideoModel> = ({
 	thumbnail,
 	title,
@@ -27,6 +33,24 @@ const Video: FC<VideoModel> = ({
 	views,
 	published
 }) => {
+	const requestFields = ["authorThumbnails"];
+
+	const { isLoading, error, data } = useQuery<Channel, AxiosError<Error>>(
+		`channelData-${author.id}`,
+		() =>
+			axios
+				.get(`https://invidious.privacy.gd/api/v1/channels/${author.id}`, {
+					params: {
+						fields: requestFields.join(",")
+					}
+				})
+				.then((res) => res.data),
+		{
+			retry: 1,
+			retryDelay: 5000
+		}
+	);
+
 	const router = useRouter();
 
 	return (
@@ -46,7 +70,18 @@ const Video: FC<VideoModel> = ({
 					</Tooltip>
 					<Link passHref href={`/channel/${author.id}`}>
 						<Box sx={{ display: "flex", alignItems: "center" }}>
-							<Avatar sx={{ mr: 2 }} alt={author.name} />
+							{isLoading && <CircularProgress sx={{ mr: 2 }} />}
+							{data && (
+								<Avatar
+									sx={{ mr: 2 }}
+									alt={author.name}
+									src={
+										data.authorThumbnails.find(
+											(thumbnail) => thumbnail.width == 100
+										)?.url as string
+									}
+								/>
+							)}
 							<Typography color="text.secondary" variant="subtitle1">
 								{author.name}
 							</Typography>

src/pages/index.tsx

@@ -8,7 +8,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Typography from "@mui/material/Typography";
 
-import { PlayCircleOutline } from "@mui/icons-material";
+import PlayCircleOutline from "@mui/icons-material/PlayCircleOutline";
 
 import Layout from "@components/Layout";