Work on desktop view
This commit is contained in:
parent
78b521e3c8
commit
57ecb5dff5
|
@ -5,10 +5,12 @@ import logoPath from '../../assets/photoview-logo.svg'
|
||||||
import { authToken } from '../../helpers/authentication'
|
import { authToken } from '../../helpers/authentication'
|
||||||
|
|
||||||
const Header = () => (
|
const Header = () => (
|
||||||
<div className="bg-white flex items-center py-3 px-4 shadow-separator">
|
<div className="bg-white flex items-center justify-between py-3 px-4 lg:px-8 lg:pt-4 shadow-separator lg:shadow-none">
|
||||||
<h1 className="mr-4 flex-shrink-0">
|
<h1 className="mr-4 lg:mr-8 flex-shrink-0 flex items-center">
|
||||||
<img className="h-12" src={logoPath} alt="logo" />
|
<img className="h-12 lg:h-10" src={logoPath} alt="logo" />
|
||||||
<span className="hidden">Photoview</span>
|
<span className="hidden lg:block ml-2 text-2xl font-light">
|
||||||
|
Photoview
|
||||||
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
{authToken() ? <SearchBar /> : null}
|
{authToken() ? <SearchBar /> : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -123,7 +123,7 @@ const SearchBar = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full max-w-xs">
|
||||||
<input
|
<input
|
||||||
className="w-full py-2 px-3 rounded-md bg-gray-50"
|
className="w-full py-2 px-3 rounded-md bg-gray-50"
|
||||||
type="search"
|
type="search"
|
||||||
|
|
|
@ -1,15 +1,11 @@
|
||||||
import React, { ReactChild } from 'react'
|
import { gql } from '@apollo/client'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import styled from 'styled-components'
|
import React from 'react'
|
||||||
import { NavLink } from 'react-router-dom'
|
|
||||||
import { Icon } from 'semantic-ui-react'
|
|
||||||
import { Sidebar, SidebarProvider } from '../sidebar/Sidebar'
|
|
||||||
import { useQuery, gql } from '@apollo/client'
|
|
||||||
import { Authorized } from '../routes/AuthorizedRoute'
|
|
||||||
import { Helmet } from 'react-helmet'
|
import { Helmet } from 'react-helmet'
|
||||||
import Header from '../header/Header'
|
import Header from '../header/Header'
|
||||||
import { authToken } from '../../helpers/authentication'
|
import { Authorized } from '../routes/AuthorizedRoute'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { SidebarProvider } from '../sidebar/Sidebar'
|
||||||
|
import MainMenu from './MainMenu'
|
||||||
|
|
||||||
export const ADMIN_QUERY = gql`
|
export const ADMIN_QUERY = gql`
|
||||||
query adminQuery {
|
query adminQuery {
|
||||||
|
@ -19,174 +15,6 @@ export const ADMIN_QUERY = gql`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
export const MAPBOX_QUERY = gql`
|
|
||||||
query mapboxEnabledQuery {
|
|
||||||
mapboxToken
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const SideMenuContainer = styled.div`
|
|
||||||
height: 100%;
|
|
||||||
width: 80px;
|
|
||||||
left: 0;
|
|
||||||
padding-top: 70px;
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
position: fixed;
|
|
||||||
background: white;
|
|
||||||
z-index: 10;
|
|
||||||
padding-top: 0;
|
|
||||||
display: flex;
|
|
||||||
bottom: 0;
|
|
||||||
box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
const Content = styled.div`
|
|
||||||
margin-top: 70px;
|
|
||||||
padding: 10px 12px 0;
|
|
||||||
width: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
`
|
|
||||||
|
|
||||||
const SideButtonLink = styled(NavLink)`
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 8px;
|
|
||||||
padding-left: 2px;
|
|
||||||
display: block;
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin: 10px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
font-size: 28px;
|
|
||||||
|
|
||||||
color: #888;
|
|
||||||
|
|
||||||
transition: transform 200ms, box-shadow 200ms;
|
|
||||||
|
|
||||||
:hover {
|
|
||||||
transform: scale(1.02);
|
|
||||||
}
|
|
||||||
`
|
|
||||||
|
|
||||||
type SideButtonProps = {
|
|
||||||
to: string
|
|
||||||
exact: boolean
|
|
||||||
label: string
|
|
||||||
gradient: string
|
|
||||||
icon?: React.ReactChild
|
|
||||||
}
|
|
||||||
|
|
||||||
const SideButton = ({ to, exact, label, gradient, icon }: SideButtonProps) => {
|
|
||||||
return (
|
|
||||||
<NavLink
|
|
||||||
to={to}
|
|
||||||
exact={exact}
|
|
||||||
className="w-12 h-12 rounded-lg"
|
|
||||||
activeClassName="ring-4 ring-gray-200"
|
|
||||||
>
|
|
||||||
<li className={`bg-gradient-to-br ${gradient} w-full h-full rounded-lg`}>
|
|
||||||
<span className="hidden">{label}</span>
|
|
||||||
<div className="p-1.5">{icon}</div>
|
|
||||||
</li>
|
|
||||||
</NavLink>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const SideMenu = () => {
|
|
||||||
const { t } = useTranslation()
|
|
||||||
|
|
||||||
const mapboxQuery = authToken() ? useQuery(MAPBOX_QUERY) : null
|
|
||||||
|
|
||||||
const mapboxEnabled = !!mapboxQuery?.data?.mapboxToken
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ul className="flex justify-around absolute w-full bottom-0 bg-white py-4 px-2 shadow-separator z-10">
|
|
||||||
<SideButton
|
|
||||||
to="/photos"
|
|
||||||
exact
|
|
||||||
label={t('sidemenu.photos', 'Photos')}
|
|
||||||
gradient="from-[#AAD4F8] to-[#80B2E8]"
|
|
||||||
icon={
|
|
||||||
<svg viewBox="0 0 24 24" fill="white">
|
|
||||||
<path d="M15.6971052,10 L23.9367603,21.526562 C23.6878671,22.9323278 22.4600272,24 20.982819,24 L5.851819,24 L15.6971052,10 Z" />
|
|
||||||
<path
|
|
||||||
d="M5.59307375,14 L15.562,24 L2.982819,24 C1.43507633,24 0.161084327,22.8279341 -3.56225466e-14,21.3229592 L5.59307375,14 Z"
|
|
||||||
fillOpacity="0.75"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<SideButton
|
|
||||||
to="/albums"
|
|
||||||
exact
|
|
||||||
label={t('sidemenu.albums', 'Albums')}
|
|
||||||
gradient="from-[#F8AAAA] to-[#E88380]"
|
|
||||||
icon={
|
|
||||||
<svg viewBox="0 0 24 24" fill="white">
|
|
||||||
<path
|
|
||||||
d="M6,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,21 C20,21.5522847 19.5522847,22 19,22 L6,22 C4.8954305,22 4,21.1045695 4,20 L4,18 C4,16.8954305 4.8954305,16 6,16 Z"
|
|
||||||
fillOpacity="0.75"
|
|
||||||
/>
|
|
||||||
<path d="M19,2 C19.5522847,2 20,2.44771525 20,3 L20,19 C20,19.5522847 19.5522847,20 19,20 L6,20 C4.8954305,20 4,19.1045695 4,18 L4,4 C4,2.8954305 4.8954305,2 6,2 L19,2 Z M14.4676845,9 L11.5079767,12.9536523 L9.50029382,10.8745763 L7,14 L18,14 L14.4676845,9 Z M10.75,9 C10.3357864,9 10,9.33578644 10,9.75 C10,10.1642136 10.3357864,10.5 10.75,10.5 C11.1642136,10.5 11.5,10.1642136 11.5,9.75 C11.5,9.33578644 11.1642136,9 10.75,9 Z" />
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
{mapboxEnabled ? (
|
|
||||||
<SideButton
|
|
||||||
to="/places"
|
|
||||||
exact
|
|
||||||
label={t('sidemenu.places', 'Places')}
|
|
||||||
gradient="from-[#B8EF7F] to-[#8CD77B]"
|
|
||||||
icon={
|
|
||||||
<svg viewBox="0 0 24 24" fill="white">
|
|
||||||
<path d="M3.4,3.34740684 C3.47896999,3.34740684 3.55617307,3.37078205 3.62188008,3.41458672 L9,7 L9,21 L3.4452998,17.2968665 C3.16710114,17.1114008 3,16.7991694 3,16.4648162 L3,3.74740684 C3,3.52649294 3.1790861,3.34740684 3.4,3.34740684 Z M15,3 L21.4961389,6.71207939 C21.8077139,6.89012225 22,7.22146569 22,7.58032254 L22,20.3107281 C22,20.531642 21.8209139,20.7107281 21.6,20.7107281 C21.5303892,20.7107281 21.4619835,20.692562 21.4015444,20.6580254 L15,17 L15,3 Z" />
|
|
||||||
<polygon
|
|
||||||
fillOpacity="0.75"
|
|
||||||
transform="translate(12, 12) scale(1, -1) translate(-12, -12)"
|
|
||||||
points="9 3 15 7 15 21 9 17"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
) : null}
|
|
||||||
<SideButton
|
|
||||||
to="/people"
|
|
||||||
exact
|
|
||||||
label={t('sidemenu.people', 'People')}
|
|
||||||
gradient="from-[#F6F16E] to-[#F3C688]"
|
|
||||||
icon={
|
|
||||||
<svg viewBox="0 0 24 24" fill="white">
|
|
||||||
<path
|
|
||||||
d="M12,15 C15.1826579,15 18.0180525,16.4868108 19.8494955,18.8037439 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4.15050454,18.8037439 C5.9819475,16.4868108 8.81734212,15 12,15 Z"
|
|
||||||
fillOpacity="0.75"
|
|
||||||
></path>
|
|
||||||
<circle cx="12" cy="11" r="6"></circle>
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<SideButton
|
|
||||||
to="/settings"
|
|
||||||
exact
|
|
||||||
label={t('sidemenu.settings', 'Settings')}
|
|
||||||
gradient="from-[#C7E2E2] to-[#96AFBA]"
|
|
||||||
icon={
|
|
||||||
<svg viewBox="0 0 24 24" fill="white">
|
|
||||||
<path
|
|
||||||
d="M13.4691754,16.7806702 L13,21 L11,21 L10.5318353,16.7809803 C10.9960818,16.9233714 11.4890921,17 12,17 C12.5112786,17 13.0046337,16.9232601 13.4691754,16.7806702 Z M16.4192861,14.3409153 L19.0710678,17.6568542 L17.6568542,19.0710678 L14.3409153,16.4192861 C15.2243208,15.9503691 15.9503691,15.2243208 16.4192861,14.3409153 Z M9.65908474,16.4192861 L6.34314575,19.0710678 L4.92893219,17.6568542 L7.5807139,14.3409153 C8.04963086,15.2243208 8.77567918,15.9503691 9.65908474,16.4192861 Z M7,12 C7,12.5112786 7.07673988,13.0046337 7.21932976,13.4691754 L3,13 L3,11 L7.21901966,10.5318353 C7.07662862,10.9960818 7,11.4890921 7,12 Z M16.7809803,10.5318353 L21,11 L21,13 L16.7806702,13.4691754 C16.9232601,13.0046337 17,12.5112786 17,12 C17,11.4890921 16.9233714,10.9960818 16.7809803,10.5318353 Z M6.34314575,4.92893219 L9.65908474,7.5807139 C8.77567918,8.04963086 8.04963086,8.77567918 7.5807139,9.65908474 L4.92893219,6.34314575 L6.34314575,4.92893219 Z M17.6568542,4.92893219 L19.0710678,6.34314575 L16.4192861,9.65908474 C15.9503691,8.77567918 15.2243208,8.04963086 14.3409153,7.5807139 L17.6568542,4.92893219 Z M13,3 L13.4691754,7.21932976 C13.0046337,7.07673988 12.5112786,7 12,7 C11.4890921,7 10.9960818,7.07662862 10.5318353,7.21901966 L11,3 L13,3 Z"
|
|
||||||
fillOpacity="0.76"
|
|
||||||
/>
|
|
||||||
<path d="M12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 Z M12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 Z" />
|
|
||||||
</svg>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
type LayoutProps = {
|
type LayoutProps = {
|
||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
title: string
|
title: string
|
||||||
|
@ -204,12 +32,12 @@ const Layout = ({ children, title, ...otherProps }: LayoutProps) => {
|
||||||
data-testid="Layout"
|
data-testid="Layout"
|
||||||
>
|
>
|
||||||
<Header />
|
<Header />
|
||||||
<div className="">
|
<div className="lg:flex">
|
||||||
<Authorized>
|
<Authorized>
|
||||||
<SideMenu />
|
<MainMenu />
|
||||||
</Authorized>
|
</Authorized>
|
||||||
<div
|
<div
|
||||||
className="px-3 py-3 w-full overflow-y-scroll h-screen flex-grow"
|
className="px-3 py-3 w-full overflow-y-scroll h-screen flex-grow lg:pt-5 lg:pl-0 lg:pr-8"
|
||||||
id="layout-content"
|
id="layout-content"
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -0,0 +1,159 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { NavLink } from 'react-router-dom'
|
||||||
|
import { useQuery, gql } from '@apollo/client'
|
||||||
|
import { authToken } from '../../helpers/authentication'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
export const MAPBOX_QUERY = gql`
|
||||||
|
query mapboxEnabledQuery {
|
||||||
|
mapboxToken
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
type MenuButtonProps = {
|
||||||
|
to: string
|
||||||
|
exact: boolean
|
||||||
|
label: string
|
||||||
|
gradient: string
|
||||||
|
activeClasses?: string
|
||||||
|
className?: string
|
||||||
|
icon?: React.ReactChild
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuButton = ({
|
||||||
|
to,
|
||||||
|
exact,
|
||||||
|
label,
|
||||||
|
gradient,
|
||||||
|
icon,
|
||||||
|
activeClasses,
|
||||||
|
className,
|
||||||
|
}: MenuButtonProps) => {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
to={to}
|
||||||
|
exact={exact}
|
||||||
|
className={`rounded-lg my-2 ${className}`}
|
||||||
|
activeClassName={`ring-4 lg:ring-4 ${activeClasses}`}
|
||||||
|
>
|
||||||
|
<li className="flex items-center">
|
||||||
|
<div
|
||||||
|
className={`w-12 h-12 p-1.5 lg:w-8 lg:h-8 lg:p-1 bg-gradient-to-br ${gradient} w-full h-full rounded-lg`}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</div>
|
||||||
|
<span className="hidden lg:block ml-2">{label}</span>
|
||||||
|
</li>
|
||||||
|
</NavLink>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const MenuSeparator = () => (
|
||||||
|
<hr className="hidden lg:block my-3 border-gray-200" />
|
||||||
|
)
|
||||||
|
|
||||||
|
export const MainMenu = () => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
const mapboxQuery = authToken() ? useQuery(MAPBOX_QUERY) : null
|
||||||
|
|
||||||
|
const mapboxEnabled = !!mapboxQuery?.data?.mapboxToken
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute lg:relative w-full bottom-0 bg-white shadow-separator lg:shadow-none lg:w-[240px] lg:mx-8 lg:my-4">
|
||||||
|
<ul className="flex justify-around py-2 px-2 z-10 max-w-lg mx-auto lg:flex-col lg:p-0">
|
||||||
|
<MenuButton
|
||||||
|
to="/photos"
|
||||||
|
exact
|
||||||
|
label={t('sidemenu.photos', 'Timeline')}
|
||||||
|
gradient="from-[#AAD4F8] to-[#80B2E8]"
|
||||||
|
activeClasses="ring-[#f1f8ff] bg-[#f1f8ff]"
|
||||||
|
className="outline-none focus:ring-2 focus:ring-blue-200 focus:ring-offset-2"
|
||||||
|
icon={
|
||||||
|
<svg viewBox="0 0 24 24" fill="white">
|
||||||
|
<path d="M15.6971052,10 L23.9367603,21.526562 C23.6878671,22.9323278 22.4600272,24 20.982819,24 L5.851819,24 L15.6971052,10 Z" />
|
||||||
|
<path
|
||||||
|
d="M5.59307375,14 L15.562,24 L2.982819,24 C1.43507633,24 0.161084327,22.8279341 -3.56225466e-14,21.3229592 L5.59307375,14 Z"
|
||||||
|
fillOpacity="0.75"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<MenuButton
|
||||||
|
to="/albums"
|
||||||
|
exact
|
||||||
|
label={t('sidemenu.albums', 'Albums')}
|
||||||
|
gradient="from-[#F8AAAA] to-[#E88380]"
|
||||||
|
activeClasses="ring-[#fff1f2] bg-[#fff1f2]"
|
||||||
|
className="outline-none focus:ring-2 focus:ring-red-200 focus:ring-offset-2"
|
||||||
|
icon={
|
||||||
|
<svg viewBox="0 0 24 24" fill="white">
|
||||||
|
<path
|
||||||
|
d="M6,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,21 C20,21.5522847 19.5522847,22 19,22 L6,22 C4.8954305,22 4,21.1045695 4,20 L4,18 C4,16.8954305 4.8954305,16 6,16 Z"
|
||||||
|
fillOpacity="0.75"
|
||||||
|
/>
|
||||||
|
<path d="M19,2 C19.5522847,2 20,2.44771525 20,3 L20,19 C20,19.5522847 19.5522847,20 19,20 L6,20 C4.8954305,20 4,19.1045695 4,18 L4,4 C4,2.8954305 4.8954305,2 6,2 L19,2 Z M14.4676845,9 L11.5079767,12.9536523 L9.50029382,10.8745763 L7,14 L18,14 L14.4676845,9 Z M10.75,9 C10.3357864,9 10,9.33578644 10,9.75 C10,10.1642136 10.3357864,10.5 10.75,10.5 C11.1642136,10.5 11.5,10.1642136 11.5,9.75 C11.5,9.33578644 11.1642136,9 10.75,9 Z" />
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
{mapboxEnabled ? (
|
||||||
|
<MenuButton
|
||||||
|
to="/places"
|
||||||
|
exact
|
||||||
|
label={t('sidemenu.places', 'Places')}
|
||||||
|
gradient="from-[#B8EF7F] to-[#8CD77B]"
|
||||||
|
activeClasses="ring-[#e3fee5] bg-[#e3fee5]"
|
||||||
|
className="outline-none focus:ring-2 focus:ring-green-100 focus:ring-offset-2"
|
||||||
|
icon={
|
||||||
|
<svg viewBox="0 0 24 24" fill="white">
|
||||||
|
<path d="M3.4,3.34740684 C3.47896999,3.34740684 3.55617307,3.37078205 3.62188008,3.41458672 L9,7 L9,21 L3.4452998,17.2968665 C3.16710114,17.1114008 3,16.7991694 3,16.4648162 L3,3.74740684 C3,3.52649294 3.1790861,3.34740684 3.4,3.34740684 Z M15,3 L21.4961389,6.71207939 C21.8077139,6.89012225 22,7.22146569 22,7.58032254 L22,20.3107281 C22,20.531642 21.8209139,20.7107281 21.6,20.7107281 C21.5303892,20.7107281 21.4619835,20.692562 21.4015444,20.6580254 L15,17 L15,3 Z" />
|
||||||
|
<polygon
|
||||||
|
fillOpacity="0.75"
|
||||||
|
transform="translate(12, 12) scale(1, -1) translate(-12, -12)"
|
||||||
|
points="9 3 15 7 15 21 9 17"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
<MenuButton
|
||||||
|
to="/people"
|
||||||
|
exact
|
||||||
|
label={t('sidemenu.people', 'People')}
|
||||||
|
gradient="from-[#F6F16E] to-[#F3C688]"
|
||||||
|
activeClasses="ring-[#fff7e4] bg-[#fff7e4]"
|
||||||
|
className="outline-none focus:ring-2 focus:ring-yellow-100 focus:ring-offset-2"
|
||||||
|
icon={
|
||||||
|
<svg viewBox="0 0 24 24" fill="white">
|
||||||
|
<path
|
||||||
|
d="M12,15 C15.1826579,15 18.0180525,16.4868108 19.8494955,18.8037439 L20,19 C20,20.6568542 18.6568542,22 17,22 L7,22 C5.34314575,22 4,20.6568542 4,19 L4.15050454,18.8037439 C5.9819475,16.4868108 8.81734212,15 12,15 Z"
|
||||||
|
fillOpacity="0.75"
|
||||||
|
></path>
|
||||||
|
<circle cx="12" cy="11" r="6"></circle>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<MenuSeparator />
|
||||||
|
<MenuButton
|
||||||
|
to="/settings"
|
||||||
|
exact
|
||||||
|
label={t('sidemenu.settings', 'Settings')}
|
||||||
|
gradient="from-[#C7E2E2] to-[#96AFBA]"
|
||||||
|
activeClasses="ring-[#e4f0f8] bg-[#e4f0f8]"
|
||||||
|
className="outline-none focus:ring-2 focus:ring-gray-200 focus:ring-offset-2"
|
||||||
|
icon={
|
||||||
|
<svg viewBox="0 0 24 24" fill="white">
|
||||||
|
<path
|
||||||
|
d="M13.4691754,16.7806702 L13,21 L11,21 L10.5318353,16.7809803 C10.9960818,16.9233714 11.4890921,17 12,17 C12.5112786,17 13.0046337,16.9232601 13.4691754,16.7806702 Z M16.4192861,14.3409153 L19.0710678,17.6568542 L17.6568542,19.0710678 L14.3409153,16.4192861 C15.2243208,15.9503691 15.9503691,15.2243208 16.4192861,14.3409153 Z M9.65908474,16.4192861 L6.34314575,19.0710678 L4.92893219,17.6568542 L7.5807139,14.3409153 C8.04963086,15.2243208 8.77567918,15.9503691 9.65908474,16.4192861 Z M7,12 C7,12.5112786 7.07673988,13.0046337 7.21932976,13.4691754 L3,13 L3,11 L7.21901966,10.5318353 C7.07662862,10.9960818 7,11.4890921 7,12 Z M16.7809803,10.5318353 L21,11 L21,13 L16.7806702,13.4691754 C16.9232601,13.0046337 17,12.5112786 17,12 C17,11.4890921 16.9233714,10.9960818 16.7809803,10.5318353 Z M6.34314575,4.92893219 L9.65908474,7.5807139 C8.77567918,8.04963086 8.04963086,8.77567918 7.5807139,9.65908474 L4.92893219,6.34314575 L6.34314575,4.92893219 Z M17.6568542,4.92893219 L19.0710678,6.34314575 L16.4192861,9.65908474 C15.9503691,8.77567918 15.2243208,8.04963086 14.3409153,7.5807139 L17.6568542,4.92893219 Z M13,3 L13.4691754,7.21932976 C13.0046337,7.07673988 12.5112786,7 12,7 C11.4890921,7 10.9960818,7.07662862 10.5318353,7.21901966 L11,3 L13,3 Z"
|
||||||
|
fillOpacity="0.76"
|
||||||
|
/>
|
||||||
|
<path d="M12,5 C15.8659932,5 19,8.13400675 19,12 C19,15.8659932 15.8659932,19 12,19 C8.13400675,19 5,15.8659932 5,12 C5,8.13400675 8.13400675,5 12,5 Z M12,8 C9.790861,8 8,9.790861 8,12 C8,14.209139 9.790861,16 12,16 C14.209139,16 16,14.209139 16,12 C16,9.790861 14.209139,8 12,8 Z" />
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MainMenu
|
|
@ -1,15 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
|
||||||
<svg width="24px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
||||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
||||||
<g id="Mobile" transform="translate(-36.000000, -692.000000)" fill="#FFFFFF">
|
|
||||||
<g id="Group" transform="translate(32.000000, 688.000000)">
|
|
||||||
<g id="Group-2" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) translate(3.000000, 4.000000)">
|
|
||||||
<g id="Group-3" transform="translate(12.517181, 12.000000) scale(-1, 1) translate(-12.517181, -12.000000) translate(0.017181, 0.000000)">
|
|
||||||
<path d="M15.6971052,10 L23.9367603,21.526562 C23.6878671,22.9323278 22.4600272,24 20.982819,24 L5.851819,24 L15.6971052,10 Z" id="Combined-Shape"></path>
|
|
||||||
<path d="M5.59307375,14 L15.562,24 L2.982819,24 C1.43507633,24 0.161084327,22.8279341 1.05627312e-14,21.3229592 L5.59307375,14 Z" id="Combined-Shape" fill-opacity="0.83"></path>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in New Issue