stuff

jcelaya775 · Jan 13, 2022 · 372e505 · 372e505
1 parent 60cd5bb
commit 372e505
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 50 deletions.
diff --git a/components/Navbar.js b/components/Navbar.js
@@ -7,6 +7,7 @@ import { WiDaySunny } from 'react-icons/wi'
 import { MdNightlightRound } from 'react-icons/md'
 import { FaBeer } from 'react-icons/fa'
 import { CgLogOff } from 'react-icons/cg'
+import { MdOutlineClose } from 'react-icons/md'
 
 export default function Navbar() {
   const [sidebar, setSidebar] = useState(false)
@@ -19,20 +20,20 @@ export default function Navbar() {
     const toggle = toggleContainerRef.current
     const burger = burgerRef.current
 
-    toggle.addEventListener('click', onClick)
+    toggle.addEventListener('click', handleTheme)
     burger.addEventListener('mouseenter', mouseEnter)
-    burger.addEventListener('click', mouseClick)
+    burger.addEventListener('click', handleBurgerClick)
     burger.addEventListener('mouseleave', mouseLeave)
 
     return () => {
-      toggle.removeEventListener('click', onClick)
+      toggle.removeEventListener('click', handleTheme)
       burger.removeEventListener('mouseenter', mouseEnter)
-      burger.removeEventListener('click', mouseClick)
+      burger.removeEventListener('click', handleBurgerClick)
       burger.removeEventListener('mouseleave', mouseLeave)
     }
   }, [])
 
-  const onClick = (event) => {
+  const handleTheme = (event) => {
     event.preventDefault()
 
     if (!toggleRef.current.classList.contains('dark')) {
@@ -41,58 +42,82 @@ export default function Navbar() {
       toggleRef.current.classList.remove('bg-green-600')
       toggleRef.current.classList.add('bg-red-600')
       toggleRef.current.classList.add('ml-[1.4rem]')
+      // set state
     } else {
       console.log('dark mode deactivated!')
       toggleRef.current.classList.remove('dark')
       toggleRef.current.classList.remove('bg-red-600')
       toggleRef.current.classList.add('bg-green-600')
       toggleRef.current.classList.remove('ml-[1.4rem]')
+      // set state
     }
   }
 
   const mouseEnter = (event) => {
     event.preventDefault()
-    const [b1, b2, b3] = document.querySelectorAll('.block')
 
-    b1.classList.remove('w-5')
-    b1.classList.add('w-8')
-    b3.classList.remove('w-8')
-    b3.classList.add('w-5')
-  }
-
-  const mouseClick = (event) => {
-    // event.preventDefault()
     console.log(sidebar)
 
-    setSidebar(prev => !prev)
+    if (!sidebar) {
+      const [b1, b2, b3] = document.querySelectorAll('.block')
+
+      b1.classList.remove('w-5')
+      b1.classList.add('w-8')
+      b3.classList.remove('w-8')
+      b3.classList.add('w-5')
+    }
   }
 
   const mouseLeave = (event) => {
     event.preventDefault()
-    const [b1, b2, b3] = document.querySelectorAll('.block')
 
-    b1.classList.remove('w-8')
-    b1.classList.add('w-5')
-    b3.classList.remove('w-5')
-    b3.classList.add('w-8')
+    if (!sidebar) {
+      console.log('mouse leave on burger')
+      // if sidebar not enabled -> animate burger
+      const [b1, b2, b3] = document.querySelectorAll('.block')
+
+      b1.classList.remove('w-8')
+      b1.classList.add('w-5')
+      b3.classList.remove('w-5')
+      b3.classList.add('w-8')
+    }
+  }
+
+  const handleBurgerClick = (event) => {
+    event.preventDefault()
+    const burger = burgerRef.current
+
+    setSidebar((prev) => !prev)
   }
 
   return (
     <div>
-      {sidebar ? <Sidebar /> : ''}
-      <div className='w-full h-16 gradient-blue drop-shadow-2xl flex justify-center items-center px-10'>
+      {sidebar && <Sidebar />}
+      <div className='{"mt-20"} z-2 w-full h-16 gradient-blue drop-shadow-2xl flex justify-center items-center px-10'>
         {/* Navbar items */}
         <div className='container flex justify-center items-center lg:max-w-screen-2xl sm:max-w-screen-md max-w-xs'>
           {/* Hamburger and Logo Container */}
           <div className='h-full flex justify-left items-center'>
             {/* Logo */}
             {/* <CgLogOff className='w-10 h-10 text-white' /> */}
             {/* Hamburger */}
-            <div ref={burgerRef} className='space-y-2 rounded-md p-6'>
-              <span className='block w-5 h-[0.20rem] bg-white ease-out duration-500'></span>
-              <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
-              <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
-            </div>
+            {!sidebar ? (
+              <div
+                ref={burgerRef}
+                className='space-y-2 rounded-md p-6 hover:cursor-pointer'
+              >
+                <span className='block w-5 h-[0.20rem] bg-white ease-out duration-500'></span>
+                <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
+                <span className='block w-8 h-[0.20rem] bg-white ease-out duration-500'></span>
+              </div>
+            ) : (
+              <div
+                ref={burgerRef}
+                className='p-6 ease-out hover:cursor-pointer hover:animate-spin delay-500 duration-200'
+              >
+                <MdOutlineClose id='exit' className='text-white w-10 h-10' />
+              </div>
+            )}
           </div>
           {/* end Hamburger and Logo Section */}
           {/* Links */}
@@ -123,7 +148,7 @@ export default function Navbar() {
           {/* bg-slate-200 hover:opacity:20 */}
           <div
             ref={toggleContainerRef}
-            className='w-[4rem] h-10 mx-2 bg-[#03024b] dark:bg-black rounded-full flex items-center pl-[0.21rem]'
+            className='w-[4rem] h-10 mx-2 bg-[#03024b] dark:bg-black rounded-full flex items-center pl-[0.21rem] hover:cursor-pointer'
           >
             <div
               ref={toggleRef}

diff --git a/components/Sidebar.js b/components/Sidebar.js
@@ -1,13 +1,29 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 
 const items = ['Home', 'About', 'Projects', 'Testimonials']
 
 export default function Sidebar() {
+  useEffect(() => {
+    const wrapper = document.querySelector('#wrapper')
+
+    wrapper.classList.add('translate-x-[-100%]')
+    wrapper.classList.remove('translate-x-[-100%]')
+    wrapper.classList.add('translate-x-0')
+  })
+
   return (
-    <div className='absolute py-32 h-screen max-w-[25rem] w-[40%] bg-black'>
+    <div
+      id='wrapper'
+      className='absolute ease-in-out duration-700 z-1 py-32 h-screen max-w-[25rem] w-[40%] bg-black '
+    >
       <div className='h-full w-full flex flex-col justify-start items-start pl-[15%] text-white text-4xl font-robo'>
-        {items.map((item) => (
-          <h1>{item}</h1>
+        {items.map((item, key) => (
+          <h1
+            key={key}
+            className='hover:font-bold hover:decoration-slice hover:cursor-pointer'
+          >
+            {item}
+          </h1>
         ))}
       </div>
     </div>

diff --git a/pages/index.js b/pages/index.js
@@ -27,37 +27,32 @@ export default function Home() {
   const theme = useSelector((state) => state.theme.value)
 
   return (
-    <div className='w-screen h-screen bg-[#001325]'>
+    // bg-[#001325]
+    <div className='w-screen h-screen bg-zinc-900'>
       <Navbar />
       {/* Hero */}
       <h1 className='text-6xl text-center font-robo font-bold pt-20 text-white'>
         Welcome Back
       </h1>
-      {/* Image */}
-      <div className='flex justify-center items-center my-16 rounded'>
-        <Image
-          className='transparent rounded-md'
-          width={500}
-          height={300}
-          src={pic}
-        />
+      <div className='container max-w-xl mx-auto'>
+        <h1 className='my-20 text-center text-white text-xl font-normal font-prompt'>
+          We bring your projects to life with our professional development
+          skills. Whether you need a new website for your business or are simply
+          looking to take things to the next level, we are here to help.
+        </h1>
       </div>
-      {/* end Image */}
+
       {/* Buttons */}
       <div className='container mx-auto flex justify-center items-center my-20'>
-        <button className='btn btn-primary'>Button</button>
-        <button className='text-[palevioletred] border border-[palevioletred] hover:bg-[palevioletred] hover:text-white font-bold py-2 px-4 h-fit rounded-full'>
-          Button
-        </button>
         <button
           type='button'
           className='btn gradient-blue gradient-hover ease-out duration-500'
         >
-          Hover me
+          Contact Us
         </button>
-        <Button variant='contained' sx={{ background: 'blue' }}>
-          Materiaul UI
-        </Button>
+        {/* <Button variant='contained' sx={{ background: 'blue' }}>
+          Contact Us
+        </Button> */}
       </div>
       {/* end Hero */}
     </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
       },
     },
   },
+  darkMode: 'class',
   sassOptions: {
     includePaths: [path.join(__dirname, 'styles')],
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ module.exports = { @@
           },
         },
       },
+      darkMode: 'class',
       sassOptions: {
         includePaths: [path.join(__dirname, 'styles')],
       },
@@ Expand Down @@