Skip to content

Commit

Permalink
Merge pull request #134 from Go-phie/mobile-sidebar
Browse files Browse the repository at this point in the history 
Fixed the server menu issue to display on movies page and not on musi…
  • Loading branch information
@wizzywit
wizzywit authored Apr 17, 2021
2 parents 8ed70af + 8da433d commit 3603a3d
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 65 deletions.
10 changes: 5 additions & 5 deletions src/components/navbar/Navbar.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import styled from "styled-components";
import styled from 'styled-components'

const Style = {
Navbar: styled.div`
Expand Down Expand Up @@ -26,7 +26,7 @@ const Style = {
&:before {
width: 3em;
height: 0.3em;
content: "";
content: '';
display: block;
background: ${({ theme }) => theme.yellowDark};
border-radius: 1.5em;
Expand Down Expand Up @@ -107,7 +107,7 @@ const Style = {
border-image: initial;
outline: none !important;
}
`,
};
`
}

export default Style;
export default Style
111 changes: 57 additions & 54 deletions src/components/pageSidebar/PageSidebar.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
import React, { useState } from "react";
import Style from "./PageSidebar.styles";
import React, { useState } from 'react'
import Style from './PageSidebar.styles'
import {
GophieLogo,
MovieReel,
MusicNotes,
ExpandIcon,
CollapseIcon,
GoToIcon,
} from "../../utils/icons";
import { Link } from "react-router-dom";
GoToIcon
} from '../../utils/icons'
import { Link, useLocation } from 'react-router-dom'

const PageSidebar = (props) => {
let pathname = window.location.pathname;
const [isMovieDropdown, setMovieDropdown] = useState(false);
const PageSidebar = props => {
let pathname = window.location.pathname
const [isMovieDropdown, setMovieDropdown] = useState(false)
const location = useLocation()

const handleMovieDropdown = () => {
setMovieDropdown(!isMovieDropdown);
};
setMovieDropdown(!isMovieDropdown)
}

return (
<Style.Sidebar>
Expand All @@ -29,122 +30,124 @@ const PageSidebar = (props) => {
<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${
pathname.match("/Server1") ||
pathname.match("/Server2") ||
pathname.match("/Server3") ||
pathname.match("/Server4") ||
pathname.match("/Server5") ||
pathname.match("/Server6") ||
pathname.match("/Server7")
? "active"
: ""
pathname.match('/Server1') ||
pathname.match('/Server2') ||
pathname.match('/Server3') ||
pathname.match('/Server4') ||
pathname.match('/Server5') ||
pathname.match('/Server6') ||
pathname.match('/Server7')
? 'active'
: ''
} dropdown-header`}
onClick={handleMovieDropdown}
data-tour="movies"
data-value="movies"
data-tour='movies'
data-value='movies'
>
<Style.DropDown__TitleContainer>
<MovieReel /> Movies{" "}
<MovieReel /> Movies{' '}
{isMovieDropdown ? <ExpandIcon /> : <CollapseIcon />}
</Style.DropDown__TitleContainer>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.DropDown__Content
className={`${isMovieDropdown ? "open" : ""}`}
className={`${isMovieDropdown ? 'open' : ''} ${
location.pathname === '/music' ? 'music-page' : ''
}`}
>
<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server1") ? "active" : ""}`}
className={`${pathname.match('/Server1') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server1"
data-value="Server1"
data-tour='server1'
data-value='Server1'
>
Server1 <small>(Movies)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server2") ? "active" : ""}`}
className={`${pathname.match('/Server2') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server2"
data-value="Server2"
data-tour='server2'
data-value='Server2'
>
Server2 <small>(Anime)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server3") ? "active" : ""}`}
className={`${pathname.match('/Server3') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server3"
data-value="Server3"
data-tour='server3'
data-value='Server3'
>
Server3 <small>(HD)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server4") ? "active" : ""}`}
className={`${pathname.match('/Server4') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server4"
data-value="Server4"
data-tour='server4'
data-value='Server4'
>
Server4 <small>(Series)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server5") ? "active" : ""}`}
className={`${pathname.match('/Server5') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server5"
data-value="Server5"
data-tour='server5'
data-value='Server5'
>
Server5 <small>(Movies)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server6") ? "active" : ""}`}
className={`${pathname.match('/Server6') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server6"
data-value="Server6"
data-tour='server6'
data-value='Server6'
>
Server6 <small>(Korean)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>

<Style.Sidebar__NavListItem>
<Style.Sidebar__NavLink
className={`${pathname.match("/Server7") ? "active" : ""}`}
className={`${pathname.match('/Server7') ? 'active' : ''}`}
onClick={props.handleServerChange}
onChange={props.handleServerChange}
data-tour="server6"
data-value="Server7"
data-tour='server6'
data-value='Server7'
>
Server7 <small>(Anime)</small>
</Style.Sidebar__NavLink>
</Style.Sidebar__NavListItem>
</Style.DropDown__Content>

<Style.Sidebar__NavListItem>
<Link to="/music">
<Link to='/music'>
<Style.Sidebar__NavLink
className={`${pathname.match("/music") ? "active" : ""}`}
className={`${pathname.match('/music') ? 'active' : ''}`}
onClick={props.handleServerChange}
data-tour="music"
data-value="music"
data-tour='music'
data-value='music'
>
<Style.DropDown__TitleContainer>
<MusicNotes /> Music <GoToIcon />
Expand All @@ -156,10 +159,10 @@ const PageSidebar = (props) => {

<Style.Sidebar__Footer>
<h3>
Gophie.cam —{" "}
Gophie.cam —{' '}
<small>
{" "}
<Style.Sidebar__FooterLink to={"/terms"}>
{' '}
<Style.Sidebar__FooterLink to={'/terms'}>
Terms
</Style.Sidebar__FooterLink>
</small>
Expand All @@ -168,7 +171,7 @@ const PageSidebar = (props) => {
</Style.Sidebar__Footer>
</Style.Sidebar__Main>
</Style.Sidebar>
);
};
)
}

export default PageSidebar;
export default PageSidebar
20 changes: 14 additions & 6 deletions src/components/pageSidebar/PageSidebar.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import styled from "styled-components";
import { Link } from "react-router-dom";
import styled from 'styled-components'
import { Link } from 'react-router-dom'

const Style = {
// Man sidebar container
Expand Down Expand Up @@ -47,7 +47,7 @@ const Style = {
&:before {
width: 3em;
height: 0.3em;
content: "";
content: '';
display: block;
background: ${({ theme }) => theme.yellowDark};
border-radius: 1.5em;
Expand Down Expand Up @@ -188,8 +188,16 @@ const Style = {
}
@media (max-width: 678px) {
opacity: 1;
visibility: visible;
margin-bottom: 0px;
height: auto;
display: flex;
flex-direction: row;
&.music-page {
visibility: hidden;
}
}
`,

Expand Down Expand Up @@ -228,7 +236,7 @@ const Style = {
color: ${({ theme }) => theme.text};
opacity: 0.5;
}
`,
};
`
}

export default Style;
export default Style

0 comments on commit 3603a3d

Please sign in to comment.