Skip to content

Commit

Permalink
Add Dark Theme ➕
Browse files Browse the repository at this point in the history
  • Loading branch information
@MohanadOO
MohanadOO committed Sep 7, 2022
1 parent b7633ad commit 16ae898
Show file tree
Hide file tree
Showing 11 changed files with 114 additions and 58 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mohanad Alrwaihy</title>
</head>
<body>
<body class="dark:bg-slate-900 dark:text-primary-white">
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
Expand Down
106 changes: 76 additions & 30 deletions src/components/Nav.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { NavLink, Link } from 'react-router-dom'
import {
HiGlobeAlt,
Expand All @@ -11,8 +11,10 @@ import { ROUTE_PATHS } from '../App'
import { useTranslation } from 'react-i18next'

export default function Nav() {
const [darkMode, setDarkMode] = useState(
localStorage.theme || window.matchMedia('(prefers-color-scheme: dark)')
)
const [openMenu, setOpenMenu] = useState(false)

const { t, i18n } = useTranslation('translation', { keyPrefix: 'navigation' })

const currentLanguage = i18n.resolvedLanguage
Expand All @@ -21,6 +23,23 @@ export default function Nav() {
document.title =
currentLanguage === 'ar' ? 'مهند الرويحي' : 'Mohanad Alrwaihy'

useEffect(() => {
if (darkMode === 'night') {
return document.documentElement.classList.add('dark')
}
}, [])

function changeTheme() {
if (document.documentElement.classList.contains('dark')) {
setDarkMode('light')
localStorage.theme = 'light'
return document.documentElement.classList.remove('dark')
}
setDarkMode('night')
localStorage.theme = 'night'
return document.documentElement.classList.add('dark')
}

function toggleLanguage() {
return currentLanguage === 'en'
? i18n.changeLanguage('ar')
Expand All @@ -33,10 +52,10 @@ export default function Nav() {
aria-label={
currentLanguage === 'ar' ? 'الأرشادات الرئيسية' : 'Primary Navigation'
}
className='w-full fixed top-0 z-50 bg-primary-white font-bold'
className='w-full fixed top-0 z-50 font-bold bg-primary-white dark:bg-slate-900'
>
{/* Desktop Navigation */}
<ul className='hidden sm:flex items-center justify-between gap-5 shadow-md rounded-md shadow-primary-400/10 py-6 px-10 md:mx-10 lg:mx-20 xl:mx-32 2xl:mx-40 lg:text-lg'>
<ul className='hidden sm:flex items-center justify-between gap-5 shadow-md rounded-md shadow-primary-400/10 dark:shadow-primary-400/50 py-6 px-10 md:mx-10 lg:mx-20 xl:mx-32 2xl:mx-40 lg:text-lg'>
<li className='font-pattaya font-normal first-letter:text-primary-400 text-sm first-letter:text-xl md:text-base first-letter:md:text-2xl lg:text-lg first-letter:lg:text-3xl hover:text-primary-400 transition-colors duration-300 ar:font-bold'>
<Link to={ROUTE_PATHS.Home}>{t('name')}</Link>
</li>
Expand All @@ -48,8 +67,8 @@ export default function Nav() {
className={({ isActive }) =>
'py-3 px-2 md:px-2 lg:px-5 xl:px-6 text-sm md:text-base rounded-md ' +
(isActive
? 'border-b-2 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-1 ring-transparent hover:ring-primary-black en:hover:shadow-[-5px_5px_0_#042A44] ar:hover:shadow-[5px_5px_0_#042A44] transition-all')
? 'border-b-2 border-primary-400 text-primary-400 dark:text-primary-white rounded-none cursor-default'
: 'ring-1 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en:hover:shadow-left ar:hover:shadow-right dark:hover:shadow-primary-400 transition-all')
}
>
{t('home')}
Expand All @@ -60,7 +79,7 @@ export default function Nav() {
href='https://www.cakeresume.com/s--xFe5zn7_6pbOn71eYKrAOw--/mohanad-alrwaihy'
target='_blank'
title={t('resume')}
className='py-3 px-2 md:px-2 lg:px-5 xl:px-6 text-sm md:text-base rounded-md gap-3 ring-1 ring-transparent hover:ring-primary-black en:hover:shadow-[-5px_5px_0_#042A44] ar:hover:shadow-[5px_5px_0_#042A44] transition-all'
className='py-3 px-2 md:px-2 lg:px-5 xl:px-6 text-sm md:text-base rounded-md gap-3 ring-1 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en:hover:shadow-left ar:hover:shadow-right dark:hover:shadow-primary-400 transition-all'
>
{t('resume')}
</a>
Expand All @@ -75,7 +94,7 @@ export default function Nav() {
'py-3 px-2 md:px-2 lg:px-5 xl:px-6 text-sm md:text-base rounded-md cursor-default text-gray-400 line-through ' +
(isActive
? 'border-b-0 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-0 ring-transparent hover:ring-primary-black transition-all')
: 'ring-0 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 transition-all')
}
>
<>{t('projects')}...</>
Expand All @@ -91,7 +110,7 @@ export default function Nav() {
'py-3 px-2 md:px-2 lg:px-5 xl:px-6 text-sm md:text-base rounded-md cursor-default text-gray-400 line-through ' +
(isActive
? 'border-b-0 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-0 ring-transparent hover:ring-primary-black transition-all')
: 'ring-0 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 transition-all')
}
>
<>{t('blog')}...</>
Expand All @@ -101,6 +120,7 @@ export default function Nav() {
<ul className='flex items-center gap-5'>
<li>
<button
title={currentLanguage === 'ar' ? 'English' : 'عربي'}
className='flex items-center gap-1'
onClick={toggleLanguage}
aria-label={
Expand All @@ -109,23 +129,32 @@ export default function Nav() {
: 'Change Language Arabic'
}
>
<HiGlobeAlt className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 fill-primary-400' />
<span className='text-xs text-primary-400'>
<HiGlobeAlt className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 fill-primary-400 dark:fill-primary-white' />
<span className='text-xs text-primary-400 dark:text-primary-white'>
{currentLanguage === 'en' ? 'عربي' : 'English'}
</span>
</button>
</li>
<li>
<button
onClick={changeTheme}
title={
currentLanguage === 'ar'
? `${darkMode === 'night' ? 'وضع الليل' : 'وضع النهار'}`
: `${darkMode === 'night' ? 'Dark' : 'Light'}`
}
aria-label={
currentLanguage === 'ar'
? `حول الثيم ال ${'المظلم'}`
: `Change to ${'dark'} mood`
? `${darkMode === 'night' ? 'وضع الليل' : 'وضع النهار'}`
: `${darkMode === 'night' ? 'Dark Mood' : 'Light Mood'}`
}
className='flex items-center'
>
{/* <HiOutlineSun /> */}
<HiOutlineMoon className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 stroke-primary-400 hover:fill-primary-400' />
{darkMode === 'night' ? (
<HiOutlineSun className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 stroke-primary-400 hover:fill-primary-400 dark:stroke-primary-white dark:fill-primary-white' />
) : (
<HiOutlineMoon className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 stroke-primary-400 hover:fill-primary-400 dark:stroke-primary-white dark:fill-primary-white' />
)}
</button>
</li>
</ul>
Expand All @@ -142,20 +171,25 @@ export default function Nav() {
onClick={() => setOpenMenu((prevState) => !prevState)}
className='cursor-pointer'
>
<HiOutlineMenu className='fill-primary-400' />
<button
aria-expanded={openMenu}
aria-label={currentLanguage === 'ar' ? 'قائمة' : 'Menu'}
>
<HiOutlineMenu className='fill-primary-400 dark:fill-primary-white' />
</button>
</li>

{openMenu && (
<ul className='absolute flex flex-col gap-10 text-center top-20 left-0 w-full p-6 bg-primary-white rounded-md shadow-md'>
<ul className='absolute flex flex-col gap-10 text-center top-20 left-0 w-full p-6 bg-primary-white dark:bg-slate-900 rounded-md shadow-md'>
<li onClick={() => setOpenMenu(false)}>
<NavLink
to={ROUTE_PATHS.Home}
title={t('home')}
className={({ isActive }) =>
'py-3 px-5 rounded-md gap-3 ' +
(isActive
? 'border-b-2 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-1 ring-transparent hover:ring-primary-black en:hover:shadow-[-5px_5px_0_#042A44] ar:hover:shadow-[5px_5px_0_#042A44] transition-all')
? 'border-b-2 border-primary-400 text-primary-400 dark:text-primary-white rounded-none cursor-default'
: 'ring-1 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en:hover:shadow-left ar:hover:shadow-right dark:hover:shadow-primary-400 transition-all')
}
>
{t('home')}
Expand All @@ -166,7 +200,7 @@ export default function Nav() {
href='https://www.cakeresume.com/s--xFe5zn7_6pbOn71eYKrAOw--/mohanad-alrwaihy'
target='_blank'
title={t('resume')}
className='py-3 px-5 rounded-md gap-3 ring-1 ring-transparent hover:ring-primary-black en:hover:shadow-[-5px_5px_0_#042A44] ar:hover:shadow-[5px_5px_0_#042A44] transition-all'
className='py-3 px-5 rounded-md gap-3 ring-1 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en:hover:shadow-left ar:hover:shadow-right dark:hover:shadow-primary-400 transition-all'
>
{t('resume')}
</a>
Expand All @@ -181,7 +215,7 @@ export default function Nav() {
'py-3 px-5 rounded-md cursor-default text-gray-400 line-through ' +
(isActive
? 'border-b-0 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-0 ring-transparent hover:ring-primary-black en#042A44] transition-all')
: 'ring-0 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en#042A44] transition-all')
}
>
<>{t('projects')}...</>
Expand All @@ -197,7 +231,7 @@ export default function Nav() {
'py-3 px-5 rounded-md cursor-default text-gray-400 line-through ' +
(isActive
? 'border-b-0 border-primary-400 text-primary-400 rounded-none cursor-default'
: 'ring-0 ring-transparent hover:ring-primary-black en#042A44] transition-all')
: 'ring-0 ring-transparent hover:ring-primary-black dark:hover:ring-primary-400 en#042A44] transition-all')
}
>
<>{t('blog')}...</>
Expand All @@ -206,31 +240,43 @@ export default function Nav() {
<ul className='flex justify-center items-center gap-5 border-t border-primary-gray pt-5'>
<li>
<button
title={currentLanguage === 'ar' ? 'English' : 'عربي'}
className='flex items-center gap-1'
onClick={toggleLanguage}
aria-label={
currentLanguage === 'ar'
? 'تغير اللغة'
: 'Change Language'
? 'تغيير اللغة للأنجليزية'
: 'Change Language Arabic'
}
>
<HiGlobeAlt className='w-5 h-5' />
<span className='text-xs uppercase'>
<HiGlobeAlt className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 fill-primary-400 dark:fill-primary-white' />
<span className='text-xs uppercase text-primary-400 dark:text-primary-white'>
{currentLanguage === 'en' ? 'عربي' : 'English'}
</span>
</button>
</li>
<li>
<button
onClick={changeTheme}
title={
currentLanguage === 'ar'
? `${darkMode === 'night' ? 'وضع الليل' : 'وضع النهار'}`
: `${darkMode === 'night' ? 'Dark' : 'Light'}`
}
aria-label={
currentLanguage === 'ar'
? `حول الثيم ال ${'المظلم'}`
: `Change to ${'dark'} mood`
? `حول الثيم ${
darkMode === 'night' ? 'وضع الليل' : 'وضع النهار'
}`
: `${darkMode === 'night' ? 'Dark Mood' : 'Light Mood'}`
}
className='flex items-center'
>
{/* <HiOutlineSun /> */}
{/* <HiOutlineMoon className='w-5 h-5' /> */}
{darkMode === 'night' ? (
<HiOutlineSun className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 stroke-primary-400 hover:fill-primary-400 dark:stroke-primary-white dark:fill-primary-white' />
) : (
<HiOutlineMoon className='w-4 h-4 md:w-5 md:h-5 lg:w-6 lg:h-6 stroke-primary-400 hover:fill-primary-400 dark:stroke-primary-white dark:fill-primary-white' />
)}
</button>
</li>
</ul>
Expand Down
8 changes: 4 additions & 4 deletions src/components/ProjectCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function ProjectCard({ link }: ProjectCardType) {
<motion.div
variants={cardVariant}
whileHover='hover'
className='bg-white border-[1px] border-primary-black shadow-[7px_7px_0px_black] mx-auto pb-5 h-full flex flex-col'
className='bg-white dark:bg-slate-900 border border-primary-black dark:border-primary-400 shadow-[7px_7px_0px_black] mx-auto pb-5 h-full flex flex-col'
>
<div className='overflow-hidden relative [&_a]:hover:opacity-100 [&_picture_img]:hover:scale-100 [&_picture_img]:hover:brightness-75 h-full'>
<picture>
Expand Down Expand Up @@ -79,7 +79,7 @@ export default function ProjectCard({ link }: ProjectCardType) {
</a>
</div>
<div className='p-5 h-full'>
<ul className='w-full flex flex-wrap mb-7 gap-3 child:flex child:gap-2 child:py-1 child:px-3 child:items-center child:rounded-md child:bg-primary-black child:text-primary-white'>
<ul className='w-full flex flex-wrap mb-7 gap-3 child:flex child:gap-2 child:py-1 child:px-3 child:items-center child:rounded-md child:bg-primary-black child:dark:bg-primary-white child:text-primary-white child:dark:text-primary-black child:font-semibold'>
<li>
<p className='text-xs lg:text-sm'>{skills[0].name}</p>
<img
Expand Down Expand Up @@ -115,12 +115,12 @@ export default function ProjectCard({ link }: ProjectCardType) {
<h1 className='font-pattaya text-4xl mt-4 text-primary-400'>
{currentLanguage === 'ar' ? title.ar : title.en}
</h1>
<p className='max-w-xs w-full text-sm leading-6 mt-3 text-primary-black/80 my-10 h-24 overflow-hidden'>
<p className='max-w-xs w-full text-sm leading-6 mt-3 text-primary-black dark:text-primary-white my-10 h-24 overflow-hidden'>
{currentLanguage === 'ar' ? desc.ar : desc.en}
</p>
<Link
to={GOTO.ProjectDetails(link)}
className='py-3 px-6 text-primary-400 rounded-md font-bold border border-primary-400 hover:bg-primary-400 hover:text-primary-white transition-colors en:hover:shadow-[-4px_4px_0_black] ar:hover:shadow-[4px_4px_0_black] active:-translate-x-4 active:translate-y-4'
className='py-3 px-6 text-primary-400 dark:text-primary-white rounded-md font-bold border border-primary-400 hover:bg-primary-400 hover:text-primary-white transition-colors en:hover:shadow-[-4px_4px_0_black] ar:hover:shadow-[4px_4px_0_black] active:-translate-x-4 active:translate-y-4'
>
{t('checkProject')}
</Link>
Expand Down
3 changes: 1 addition & 2 deletions src/data/projects.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,8 +104,7 @@
"images": [
"/images/Projects/Room-Home-Page/1",
"/images/Projects/Room-Home-Page/2",
"/images/Projects/Room-Home-Page/3",
"/images/Projects/Room-Home-Page/4"
"/images/Projects/Room-Home-Page/3"
],
"skills": [
{ "name": "React", "icon": "/icons/react.svg" },
Expand Down
2 changes: 1 addition & 1 deletion src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@

@layer components {
.section_header {
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-primary-400 z-10 uppercase first-letter:py-5 first-letter:text-primary-white en:first-letter:pl-16 ar:first-letter:pr-16 first-letter:bg-primary-400 first-letter:rounded-md en:first-letter:shadow-[-7px_7px_0_black] ar:first-letter:shadow-[7px_7px_0_black];
@apply text-3xl md:text-4xl lg:text-5xl font-bold text-primary-400 z-10 uppercase first-letter:py-5 first-letter:text-primary-white en:first-letter:pl-16 ar:first-letter:pr-16 first-letter:bg-primary-400 first-letter:rounded-md en:first-letter:shadow-left-lg ar:first-letter:shadow-right-lg dark:first-letter:shadow-primary-white;
}
}
Loading

0 comments on commit 16ae898

Please sign in to comment.