added larg screen support

source/src/App.tsx

@@ -65,6 +65,7 @@ body::-webkit-scrollbar-thumb {
 	display:inline-block;
 	flex: 1 1 auto;
 	margin-bottom: 3rem;
+	margin-top: 3rem;
 }
 
 code {

source/src/components/Navbar.tsx

@@ -14,11 +14,8 @@ import Sidebar from "./Sidebar"
 import ThemeToggleButton from "./ThemeToggleButton"
 
 const StyledNav = styled.nav`
-	display: flex;
-	align-items: center;
-	height: 2rem;
-	margin: 0;
-	padding: 1rem;
+	position: absolute;
+	width: 100%;
 	background-color: ${(props) =>
 		theming.theme(props.theme.currentTheme, {
 			light: theming.light.backgroundColor0,
@@ -29,8 +26,22 @@ const StyledNav = styled.nav`
 			light: theming.light.color0,
 			dark: theming.dark.color0,
 		})};
+`
+
+const StyledContainer = styled.div`
+	margin: 0 auto;
+	align-items: center;
+	display: flex;
+	height: 2rem;
+	padding: 1rem;
 	box-shadow: 0 4px 10px rgb(0 0 0 / 5%);
 
+	/* 20px is for scrollbar */
+	@media only screen and (min-width: calc(${theming.size
+			.screen_size2} + 20px)) {
+		width: calc(${theming.size.screen_size2} - 20px);
+	}
+
 	.right {
 		margin-left: auto;
 	}
@@ -59,37 +70,41 @@ export default class Navbar extends React.Component {
 	render() {
 		return (
 			<StyledNav>
-				<Link to="/">
-					<StyledImg
-						src={process.env.PUBLIC_URL + "/icon/icon_circle.svg"}
-					/>
-				</Link>
-				<StyledNavLinks>
-					{NavbarData.map((item, index) => (
-						<StyledLink key={index} to={item.path}>
-							{item.title}
-						</StyledLink>
-					))}
-				</StyledNavLinks>
+				<StyledContainer>
+					<Link to="/">
+						<StyledImg
+							src={
+								process.env.PUBLIC_URL + "/icon/icon_circle.svg"
+							}
+						/>
+					</Link>
+					<StyledNavLinks>
+						{NavbarData.map((item, index) => (
+							<StyledLink key={index} to={item.path}>
+								{item.title}
+							</StyledLink>
+						))}
+					</StyledNavLinks>
 
-				<ThemeToggleButton />
+					<ThemeToggleButton />
 
-				<StyledALink
-					data-tip
-					data-for="github"
-					href="https://github.com/developomp/developomp-site"
-					target="_blank"
-				>
-					<FontAwesomeIcon icon={faGithub} />
-				</StyledALink>
-				{!isMobile && (
-					<ReactTooltip id="github" type="dark" effect="solid">
-						<span>View source code</span>
-					</ReactTooltip>
-				)}
+					<StyledALink
+						data-tip
+						data-for="github"
+						href="https://github.com/developomp/developomp-site"
+						target="_blank"
+					>
+						<FontAwesomeIcon icon={faGithub} />
+					</StyledALink>
+					{!isMobile && (
+						<ReactTooltip id="github" type="dark" effect="solid">
+							<span>View source code</span>
+						</ReactTooltip>
+					)}
 
-				<SearchBox />
-				<Sidebar />
+					<SearchBox />
+					<Sidebar />
+				</StyledContainer>
 			</StyledNav>
 		)
 	}

source/src/theming.ts

@@ -23,6 +23,7 @@ export default {
 		large: 0,
 		x_large: 0,
 		screen_size1: "1000px",
+		screen_size2: "1500px",
 	},
 	color: {
 		linkColor: "#3273dc",