This repository has been archived by the owner on Feb 27, 2024. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #281 from nekochans/feature/issue276/modify-global…
…-menu GlobalMenu をCSSModuleに置換え
- Loading branch information
Showing
3 changed files
with
144 additions
and
119 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| .wrapper { | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| width: 69px; | ||
| height: 35px; | ||
| padding: 10px 22px 7px 0; | ||
| } | ||
|
|
||
| .header-wrapper { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| padding: 10px 22px 7px 0; | ||
| } | ||
|
|
||
| .fa-times-wrapper { | ||
| flex: none; | ||
| flex-grow: 0; | ||
| order: 0; | ||
| width: 30px; | ||
| height: 30px; | ||
| } | ||
|
|
||
| .fa-times { | ||
| font-style: normal; | ||
| font-weight: 900; | ||
| font-size: 30px; | ||
| line-height: 30px; | ||
| color: var(--primary-color); | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .fa-cloud-upload-alt { | ||
| font-style: normal; | ||
| font-weight: 900; | ||
| font-size: 16px; | ||
| line-height: 30px; | ||
| color: var(--primary-color); | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .link-group-wrapper { | ||
| position: absolute; | ||
| top: 73px; | ||
| left: 15px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| width: 305px; | ||
| height: 180px; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .link-wrapper { | ||
| flex: none; | ||
| flex-grow: 0; | ||
| order: 0; | ||
| width: 305px; | ||
| height: 45px; | ||
| } | ||
|
|
||
| .link-text { | ||
| display: flex; | ||
| align-items: center; | ||
| font-family: Roboto, sans-serif; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 30px; | ||
| color: var(--primary-color); | ||
| text-decoration-line: underline; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .underline { | ||
| box-sizing: border-box; | ||
| background: var(--background-color); | ||
| border-bottom: 1px solid var(--sub-color); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| declare const styles: { | ||
| readonly wrapper: string; | ||
| readonly 'header-wrapper': string; | ||
| readonly 'fa-times-wrapper': string; | ||
| readonly 'fa-times': string; | ||
| readonly 'fa-cloud-upload-alt': string; | ||
| readonly 'link-group-wrapper': string; | ||
| readonly 'link-wrapper': string; | ||
| readonly 'link-text': string; | ||
| readonly underline: string; | ||
| }; | ||
| export = styles; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1,80 @@ | ||
| import type { FC } from 'react'; | ||
| import Link from 'next/link'; | ||
| import { FaTimes, FaCloudUploadAlt } from 'react-icons/fa'; | ||
| import styled from 'styled-components'; | ||
| import { | ||
| createPrivacyPolicyLinksFromLanguages, | ||
| createTermsOfUseLinksFromLanguages, | ||
| } from '../../features'; | ||
| import { mixins } from '../../styles'; | ||
|
|
||
| import type { Language } from '../../types'; | ||
|
|
||
| const _Wrapper = styled.div` | ||
| position: relative; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| width: 69px; | ||
| height: 35px; | ||
| padding: 10px 22px 7px 0; | ||
| `; | ||
|
|
||
| const _HeaderWrapper = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 10px; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| padding: 10px 22px 7px 0; | ||
| `; | ||
|
|
||
| const _FaTimesWrapper = styled.div` | ||
| flex: none; | ||
| flex-grow: 0; | ||
| order: 0; | ||
| width: 30px; | ||
| height: 30px; | ||
| `; | ||
|
|
||
| const faTimesStyle = { | ||
| fontStyle: 'normal', | ||
| fontWeight: 900, | ||
| fontSize: '30px', | ||
| lineHeight: '30px', | ||
| color: `${mixins.colors.primary}`, | ||
| cursor: 'pointer', | ||
| }; | ||
|
|
||
| const _LinkGroupWrapper = styled.div` | ||
| position: absolute; | ||
| top: 73px; | ||
| left: 15px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| width: 305px; | ||
| height: 180px; | ||
| padding: 0; | ||
| `; | ||
|
|
||
| const _LinkWrapper = styled.div` | ||
| flex: none; | ||
| flex-grow: 0; | ||
| order: 0; | ||
| width: 305px; | ||
| height: 45px; | ||
| `; | ||
|
|
||
| const _LinkText = styled.span` | ||
| display: flex; | ||
| align-items: center; | ||
| font-family: Roboto, sans-serif; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 30px; | ||
| color: ${mixins.colors.primary}; | ||
| text-decoration-line: underline; | ||
| cursor: pointer; | ||
| `; | ||
|
|
||
| const _UnderLine = styled.div` | ||
| box-sizing: border-box; | ||
| background: ${mixins.colors.background}; | ||
| border-bottom: 1px solid ${mixins.colors.sub}; | ||
| `; | ||
|
|
||
| const faCloudUploadAltStyle = { | ||
| fontStyle: 'normal', | ||
| fontWeight: 900, | ||
| fontSize: '16px', | ||
| lineHeight: '30px', | ||
| color: `${mixins.colors.primary}`, | ||
| marginRight: '10px', | ||
| }; | ||
| import styles from './GlobalMenu.module.css'; | ||
|
|
||
| export type Props = { | ||
| language: Language; | ||
| onClickCloseButton: () => void; | ||
| }; | ||
|
|
||
| // eslint-disable-next-line max-lines-per-function | ||
| export const GlobalMenu: FC<Props> = ({ language, onClickCloseButton }) => { | ||
| const termsOfUseLinks = createTermsOfUseLinksFromLanguages(language); | ||
|
|
||
| const privacyPolicyLinks = createPrivacyPolicyLinksFromLanguages(language); | ||
|
|
||
| return ( | ||
| <_Wrapper> | ||
| <_HeaderWrapper> | ||
| <_FaTimesWrapper onClick={onClickCloseButton}> | ||
| <FaTimes style={faTimesStyle} /> | ||
| </_FaTimesWrapper> | ||
| </_HeaderWrapper> | ||
| <_LinkGroupWrapper> | ||
| <_LinkWrapper> | ||
| <div className={styles.wrapper}> | ||
| <div className={styles['header-wrapper']}> | ||
| <button | ||
| className={styles['fa-times-wrapper']} | ||
| onClick={onClickCloseButton} | ||
| > | ||
| <FaTimes className={styles['fa-times']} /> | ||
| </button> | ||
| </div> | ||
| <div className={styles['link-group-wrapper']}> | ||
| <div className={styles['link-wrapper']}> | ||
| <Link href="/" prefetch={false}> | ||
| <_LinkText data-gtm-click="global-menu-top-link">TOP</_LinkText> | ||
| <span | ||
| className={styles['link-text']} | ||
| data-gtm-click="global-menu-top-link" | ||
| > | ||
| TOP | ||
| </span> | ||
| </Link> | ||
| <_UnderLine /> | ||
| </_LinkWrapper> | ||
| <_LinkWrapper> | ||
| <div className={styles.underline} /> | ||
| </div> | ||
| <div className={styles['link-wrapper']}> | ||
| <Link href="/upload" prefetch={false}> | ||
| <_LinkText data-gtm-click="global-menu-upload-cat-link"> | ||
| <FaCloudUploadAlt style={faCloudUploadAltStyle} /> | ||
| <span | ||
| className={styles['link-text']} | ||
| data-gtm-click="global-menu-upload-cat-link" | ||
| > | ||
| <FaCloudUploadAlt className={styles['fa-cloud-upload-alt']} /> | ||
| Upload new Cats | ||
| </_LinkText> | ||
| </span> | ||
| </Link> | ||
| <_UnderLine /> | ||
| </_LinkWrapper> | ||
| <_LinkWrapper> | ||
| <div className={styles.underline} /> | ||
| </div> | ||
| <div className={styles['link-wrapper']}> | ||
| <Link href={termsOfUseLinks.link} prefetch={false}> | ||
| <_LinkText data-gtm-click="global-menu-terms-link"> | ||
| <span | ||
| className={styles['link-text']} | ||
| data-gtm-click="global-menu-terms-link" | ||
| > | ||
| {termsOfUseLinks.text} | ||
| </_LinkText> | ||
| </span> | ||
| </Link> | ||
| <_UnderLine /> | ||
| </_LinkWrapper> | ||
| <_LinkWrapper> | ||
| <div className={styles.underline} /> | ||
| </div> | ||
| <div className={styles['link-wrapper']}> | ||
| <Link href={privacyPolicyLinks.link} prefetch={false}> | ||
| <_LinkText data-gtm-click="global-menu-terms-link"> | ||
| <span | ||
| className={styles['link-text']} | ||
| data-gtm-click="global-menu-terms-link" | ||
| > | ||
| {privacyPolicyLinks.text} | ||
| </_LinkText> | ||
| </span> | ||
| </Link> | ||
| <_UnderLine /> | ||
| </_LinkWrapper> | ||
| </_LinkGroupWrapper> | ||
| </_Wrapper> | ||
| <div className={styles.underline} /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; |