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

moved styles outside the class and fixed react error #130 where site doesn't work on production mode

Browse source
This commit is contained in:
Kim, Jimin 2021-05-30 20:43:34 +09:00
parent cdbe754071
commit cd8cbba973
11 changed files with 431 additions and 438 deletions
Download patch file Download diff file Expand all files Collapse all files

82
source/src/components/SubMenu.tsx
View file

@ -4,6 +4,39 @@ import styled from "styled-components"
import theming from "../theming"
import { Item } from "../data/NavbarData"
const SidebarLink = styled(Link)`
${theming.styles.navbarButtonStyle};
display: flex;
width: 100%;
margin: 0;
border-radius: 0;
justify-content: space-between;
height: 2rem;
align-items: center;
padding: 20px;
list-style: none;
`
const SidebarLabel = styled.span`
margin-left: 16px;
`
const DropdownLink = styled(Link)`
background: #414757;
height: 60px;
padding-left: 3rem;
display: flex;
align-items: center;
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
&:hover {
background: #632ce4;
cursor: pointer;
}
`
interface SubMenuProps {
item: Item
}
@ -16,39 +49,6 @@ export default class SubMenu extends React.Component<
SubMenuProps,
SubMenuState
> {
SidebarLink = styled(Link)`
${theming.styles.navbarButtonStyle};
display: flex;
width: 100%;
margin: 0;
border-radius: 0;
justify-content: space-between;
height: 2rem;
align-items: center;
padding: 20px;
list-style: none;
`
SidebarLabel = styled.span`
margin-left: 16px;
`
DropdownLink = styled(Link)`
background: #414757;
height: 60px;
padding-left: 3rem;
display: flex;
align-items: center;
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
&:hover {
background: #632ce4;
cursor: pointer;
}
`
constructor(props) {
super(props)
this.state = {
@ -61,15 +61,13 @@ export default class SubMenu extends React.Component<
render() {
return (
<>
<this.SidebarLink
<SidebarLink
to={this.props.item.path}
onClick={this.props.item.subNav && this.showSubNav}
>
<div>
{this.props.item.icon}
<this.SidebarLabel>
{this.props.item.title}
</this.SidebarLabel>
<SidebarLabel>{this.props.item.title}</SidebarLabel>
</div>
<div>
{this.props.item.subNav && this.state.isSubNavOpen
@ -78,7 +76,7 @@ export default class SubMenu extends React.Component<
? this.props.item.iconClosed
: null}
</div>
</this.SidebarLink>
</SidebarLink>
{/* not used as of the moment */}
{this.state.isSubNavOpen && // check if subNav is open
@ -86,12 +84,10 @@ export default class SubMenu extends React.Component<
this.props.item.subNav.map((item, index) => {
// shows all items in subNav
return (
<this.DropdownLink to={item.path} key={index}>
<DropdownLink to={item.path} key={index}>
{item.icon}
<this.SidebarLabel>
{item.title}
</this.SidebarLabel>
</this.DropdownLink>
<SidebarLabel>{item.title}</SidebarLabel>
</DropdownLink>
)
})}
</>