pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

added larg screen support

Browse source
This commit is contained in:
Kim, Jimin 2021-05-31 14:38:58 +09:00
parent 893556cbd5
commit 6ee2f0443f
3 changed files with 50 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

1
source/src/App.tsx
View file

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

81
source/src/components/Navbar.tsx
View file

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

1
source/src/theming.ts
View file

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