Commit 482c9ed

committed

galleria to pages

1 parent 9270e74 commit 482c9edCopy full SHA for 482c9ed

File tree

+86

-19

lines changed

+86

-19

lines changed

Lines changed: 54 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,54 @@`
	`1`	`+/* HAMBURGER */`
	`2`	`+`
	`3`	`+.hamburger-sunny-container {`
	`4`	`+ width: 26px;`
	`5`	`+ height: 16px;`
	`6`	`+ cursor: pointer;`
	`7`	`+ z-index: 1000;`
	`8`	`+ border: none;`
	`9`	`+ background-color: transparent;`
	`10`	`+ display: none;`
	`11`	`+}`
	`12`	`+`
	`13`	`+@media only screen and (max-width: 700px) {`
	`14`	`+ .hamburger-sunny-container {`
	`15`	`+ display: block;`
	`16`	`+ }`
	`17`	`+}`
	`18`	`+`
	`19`	`+.hamburger-sunny {`
	`20`	`+ width: 26px;`
	`21`	`+ height: 2px;`
	`22`	`+ transition: all 300ms ease-in-out;`
	`23`	`+ display: block;`
	`24`	`+ transform-origin: 3px 1px;`
	`25`	`+ margin-bottom: 5.75px;`
	`26`	`+ background-color: white;`
	`27`	`+}`
	`28`	`+`
	`29`	`+.hamburger-sunny:first-of-type,`
	`30`	`+.hamburger-sunny:last-of-type {`
	`31`	`+ content: "";`
	`32`	`+ display: block;`
	`33`	`+ transition: all 300ms ease-in-out;`
	`34`	`+}`
	`35`	`+`
	`36`	`+.hamburger-sunny:last-of-type {`
	`37`	`+ margin-bottom: 0px;`
	`38`	`+}`
	`39`	`+`
	`40`	`+/* HAMBURGER ACTIVE */`
	`41`	`+`
	`42`	`+.hamburger-sunny-active:nth-of-type(2) {`
	`43`	`+ opacity: 0;`
	`44`	`+}`
	`45`	`+`
	`46`	`+.hamburger-sunny-active:first-of-type {`
	`47`	`+ transform: rotate(45deg);`
	`48`	`+ width: 28px;`
	`49`	`+}`
	`50`	`+`
	`51`	`+.hamburger-sunny-active:last-of-type {`
	`52`	`+ transform: rotate(-45deg);`
	`53`	`+ width: 28px;`
	`54`	`+}`

Lines changed: 16 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,16 @@`
	`1`	`+import React from 'react'`
	`2`	`+import './HamburgerSunny.css'`
	`3`	`+`
	`4`	`+const HamburgerSunny = ({ handleMobileNav, showMenu }) => {`
	`5`	`+ // delete class all-hamburger-containers when copypasting.`
	`6`	`+ return (`
	`7`	`+ <button className='hamburger-sunny-container'`
	`8`	`+ onClick={handleMobileNav}>`
	`9`	`+ <span className={showMenu ? 'hamburger-sunny hamburger-sunny-active' : 'hamburger-sunny'}></span>`
	`10`	`+ <span className={showMenu ? 'hamburger-sunny hamburger-sunny-active' : 'hamburger-sunny'}></span>`
	`11`	`+ <span className={showMenu ? 'hamburger-sunny hamburger-sunny-active' : 'hamburger-sunny'}></span>`
	`12`	`+ </button>`
	`13`	`+ )`
	`14`	`+}`
	`15`	`+`
	`16`	`+export default HamburgerSunny`

Lines changed: 0 additions & 13 deletions

Original file line number	Diff line number	Diff line change
`@@ -79,15 +79,6 @@`
`79`	`79`	`color: white;`
`80`	`80`	`}`
`81`	`81`
`82`		`-/* HAMBURGER */`
`83`		`-`
`84`		`-.sunnySide-nav-hamburger-btn {`
`85`		`- background-color: transparent;`
`86`		`- border: none;`
`87`		`- cursor: pointer;`
`88`		`- display: none;`
`89`		`-}`
`90`		`-`
`91`	`82`	`/* MOBILE NAV */`
`92`	`83`
`93`	`84`	`.sunnySide-nav-mobile-links {`
`@@ -165,10 +156,6 @@`
`165`	`156`	`display: flex;`
`166`	`157`	`}`
`167`	`158`
`168`		`- .sunnySide-nav-hamburger-btn {`
`169`		`- display: block;`
`170`		`- }`
`171`		`-`
`172`	`159`	`.sunnySide-header-nav {`
`173`	`160`	`margin-right: 0;`
`174`	`161`	`}`

Lines changed: 7 additions & 6 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,17 @@`
`1`		`-import React from 'react'`
	`1`	`+import React,{useState} from 'react'`
`2`	`2`	`import './Nav.css'`
`3`	`3`	`import logo from '../assets/sunnyside-agency-landing-page-main/images/logo.svg'`
`4`	`4`	`import hamburger from '../assets/sunnyside-agency-landing-page-main/images/icon-hamburger.svg'`
	`5`	`+import HamburgerSunny from './HamburgerSunny'`
`5`	`6`
`6`	`7`	`const Nav = () => {`
`7`	`8`
	`9`	`+ const [showMenu, setShowMenu] = useState(false)`
	`10`	`+ const toggleMenu = () => setShowMenu(prev => !prev)`
	`11`	`+`
`8`	`12`	`const handleMobileNav = () => {`
`9`	`13`	`document.querySelector('.sunnySide-nav-mobile-links').classList.toggle('sunnySide-nav-mobile-links-active')`
	`14`	`+ toggleMenu();`
`10`	`15`	`}`
`11`	`16`
`12`	`17`	`return (`
`@@ -23,11 +28,7 @@ const Nav = () => {`
`23`	`28`	`<button>Contact</button>`
`24`	`29`	`</li>`
`25`	`30`	`</ul>`
`26`		`- <button className='sunnySide-nav-hamburger-btn'`
`27`		`- onClick={handleMobileNav}`
`28`		`- >`
`29`		`- <img src={hamburger} alt="" />`
`30`		`- </button>`
	`31`	`+ <HamburgerSunny handleMobileNav={handleMobileNav} showMenu={showMenu}></HamburgerSunny>`
`31`	`32`	`<ul className='sunnySide-nav-mobile-links'`
`32`	`33`	`>`
`33`	`34`	`<li className="sunnySide-nav-mobile-link">About</li>`

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,13 @@`
`1`	`1`	`export const pagesData = [`
	`2`	`+ {`
	`3`	`+ id:"8",`
	`4`	`+ title: "Galleria slideshow site",`
	`5`	`+ desc: "Art Gallery Slideshow with masonry layout, slideshow logic with auto/manual play and lightbox view",`
	`6`	`+ img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/mctvqcomxdsv3cgawo4f.jpg",`
	`7`	`+ category:"intermediate",`
	`8`	`+ type: "multi",`
	`9`	`+ link:"https://galleria-demo.netlify.app/",`
	`10`	`+ },`
`2`	`11`	`{`
`3`	`12`	`id:"7",`
`4`	`13`	`title: "Photosnap multi-page website",`

Comments

(0)