Skip to content

Commit 55f940d

Browse files
dc7devsdc7devs
committed
configured dark theme to navbar an man content
1 parent 10e29c7 commit 55f940d

8 files changed

Lines changed: 90 additions & 61 deletions

File tree

‎src/components/background.tsx‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/components/layout.tsx‎

Lines changed: 3 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,15 @@ import Head from "next/head"
22
import { useRouter } from 'next/router'
33
import Link from "next/link"
44
import { ReactNode, useState } from "react"
5-
import { SquaresFour, X } from "phosphor-react"
6-
import Modal from "./modal"
5+
import NavBar from "./navbar"
76

87
type PropsChildren = {
98
children: ReactNode
109
}
1110

1211
export default function Layout({ children }: PropsChildren) {
1312
const router = useRouter();
14-
1513
const [checkRouter, setCheckRouter] = useState(router.pathname == "/");
16-
const [isOpenedModal, setIsOpenedModal] = useState(false);
17-
18-
function changeCurrentStateModal() {
19-
setIsOpenedModal(!isOpenedModal);
20-
}
2114

2215
return (
2316
<div className="h-screen w-full font-pontserrat">
@@ -26,42 +19,8 @@ export default function Layout({ children }: PropsChildren) {
2619
<meta name="description" content="Generated by create next app" />
2720
<link rel="icon" href="/favicon.png" />
2821
</Head>
29-
30-
<nav className="h-12 w-full text-base text-zinc-800/70 flex justify-between items-center px-8 border-b border-dashed border-black/50 md:px-0 md:justify-around md:border-0 md:h-16 absolute top-0">
31-
<Link href="/">
32-
<div className="w-10 h-10 md:w-12 md:h-12 rounded-full ring-2 ring-violet-700/25 shadow-lg shadow-violet-700/25 bakcdrop-blur relative">
33-
<img className="object-cove rounded-full" src="/images/My.png" alt="Althor image" />
34-
</div>
35-
</Link>
36-
37-
<div className="flex justify-center items-center">
38-
<ul className="hidden sm:flex justify-stretch items-cente gap-x-3">
39-
<li className={`${router.pathname == "/" ? "text-zinc-800/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20 `}>
40-
<Link href="/">Home</Link>
41-
</li>
42-
<li className={`${router.pathname == "/about" ? "text-zinc-800/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
43-
<Link href="/about">About</Link>
44-
</li>
45-
<li className={`${router.pathname == "/contact" ? "text-zinc-800/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
46-
<Link href="/contact">Contact</Link>
47-
</li>
48-
<li className={`${router.pathname == "/projects" ? "text-zinc-800/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
49-
<Link href="/projects">Projects</Link>
50-
</li>
51-
</ul>
52-
53-
<hr className="hidden sm:block w-px h-4 bg-separator/80 mx-5 shadow-md md:mx-7" />
54-
55-
<button
56-
onClick={() => changeCurrentStateModal()}
57-
className="relative z-50 text-3xl hover:text-violet-900/80 transition duration-75 ease-in-out"
58-
>
59-
{isOpenedModal ? <X size={32} /> : <SquaresFour />}
60-
</button>
61-
</div>
62-
63-
{isOpenedModal && <Modal />}
64-
</nav>
22+
23+
<NavBar />
6524

6625
<main className="w-full h-full pt-16 sm:pt-24">
6726
<div className={`px-4 py-7 sm:p-y sm:pr-0 sm:w-4/5 h-full mx-auto overflow-y-auto relative ${checkRouter ? "" : "md:border-l-2 border-dotted border-black/25"}`}>

‎src/components/navbar.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Link from "next/link";
2+
import { useRouter } from "next/router";
3+
import { SquaresFour, X } from "phosphor-react";
4+
import { useState } from "react";
5+
import Modal from "./modal";
6+
import ToggleThemeBtn from "./toggle-theme";
7+
8+
export default function NavBar() {
9+
const router = useRouter();
10+
const [isOpenedModal, setIsOpenedModal] = useState(false);
11+
12+
function changeCurrentStateModal() {
13+
setIsOpenedModal(!isOpenedModal);
14+
}
15+
16+
return(
17+
<nav className="h-auto w-full pt-4 text-base text-zinc-800/70 dark:text-white/70 flex justify-between items-center px-8 md:px-0 md:justify-around md:h-16 absolute top-0">
18+
<Link href="/">
19+
<div className="w-10 h-10 md:w-12 md:h-12 rounded-full ring-2 ring-violet-700/5 shadow-md shadow-violet-700/10 bakcdrop-blur relative">
20+
<img className="object-cove rounded-full" src="/images/My.png" alt="Althor image" />
21+
</div>
22+
</Link>
23+
24+
<div className="flex justify-center items-center">
25+
<ul className="hidden sm:flex justify-stretch items-cente gap-x-3">
26+
<li className={`${router.pathname == "/" ? "text-zinc-800/90 dark:text-white/90 font-semibold" : "text-base" } font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20 `}>
27+
<Link href="/">Home</Link>
28+
</li>
29+
<li className={`${router.pathname == "/about" ? "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
30+
<Link href="/about">About</Link>
31+
</li>
32+
<li className={`${router.pathname == "/contact" ? "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
33+
<Link href="/contact">Contact</Link>
34+
</li>
35+
<li className={`${router.pathname == "/projects" ? "text-z300-700/90 dark:text-white/90 font-semibold" : "text-base"} font-medium sm:min-w-max sm:w-16 sm:flex sm:justify-center sm:hover:text-violet-900/80 dark:sm:hover:text-violet-300/70 sm:hover:medium transition duration-75 ease-in-out md:text-lg md:w-20`}>
36+
<Link href="/projects">Projects</Link>
37+
</li>
38+
</ul>
39+
40+
<hr className="hidden sm:block w-0.5 h-5 bg-separator/80 dark:bg-white/25 mx-5 md:mx-7 shadow-md rounded-full" />
41+
42+
<button
43+
onClick={() => changeCurrentStateModal()}
44+
className="relative z-50 text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70 transition duration-75 ease-in-out mr-3"
45+
>
46+
{isOpenedModal ? <X size={32} /> : <SquaresFour />}
47+
</button>
48+
49+
<ToggleThemeBtn />
50+
</div>
51+
52+
{isOpenedModal && <Modal />}
53+
</nav>
54+
)
55+
}

‎src/components/toggle-theme.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { useTheme } from "next-themes";
2+
import { MoonStars, SunDim } from "phosphor-react";
3+
import { useEffect, useState } from "react";
4+
5+
export default function ToggleThemeBtn() {
6+
const [mounted, setMounted] = useState(false);
7+
const { theme, setTheme } = useTheme();
8+
9+
10+
useEffect(() => {
11+
setMounted(true)
12+
}, [])
13+
14+
if(!mounted) return null;
15+
16+
function isDark() {
17+
return theme == "dark";
18+
}
19+
20+
return (
21+
<button
22+
className="text-2xl hover:text-violet-900/80 dark:hover:text-violet-300/70"
23+
onClick={() => setTheme(isDark() ? "light" : "dark")}
24+
>
25+
{isDark() ? <MoonStars size={25} /> : <SunDim size={26} />}
26+
</button>
27+
)
28+
}

‎src/pages/_app.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import '../../styles/globals.css'
22
import type { AppProps } from 'next/app'
33

4-
import Bg from '../components/background'
54
import { ThemeProvider } from 'next-themes'
65

76
export default function App({ Component, pageProps }: AppProps) {

‎src/pages/_document.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import Document, { Html, Main, NextScript } from 'next/document'
22

33
export default class MyDocument extends Document {
44
return () {
5-
<Html className="" lang="pt-BR">
5+
<Html lang="pt-BR">
66
<body>
77
<Main />
88
<NextScript />

‎src/pages/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Link from 'next/link'
22

33
import Layout from '../components/layout'
4+
import ToggleThemeBtn from '../components/toggle-theme'
45

56
export default function Home() {
67
return (

‎tailwind.config.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/** @type {import('tailwindcss').Config} */
22
module.exports = {
33
darkMode: 'class',
4-
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
4+
purge: ["./src/pages/**/*.{js,ts,jsx,tsx}", "./src/components/**/*.{js,ts,jsx,tsx}"],
55
content: [
66
"./src/pages/**/*.{js,ts,jsx,tsx}",
77
"./src/components/**/*.{js,ts,jsx,tsx}",
@@ -15,7 +15,7 @@ module.exports = {
1515
black: '#161616',
1616
white: '#FFFFFF',
1717

18-
gray: '#AEAEAE'
18+
gray: '#AEAEAE',
1919
},
2020
backgroundImage: {
2121
'paper-pattern': "radial-gradient(50% 50% at 50% 50%, rgba(174, 174, 174, 0) 0%, rgba(174, 174, 174, 0.94) 100%), linear-gradient(rgba(22, 22, 22, 0.1) 1.6px, transparent 1.6px), linear-gradient(90deg, rgba(22, 22, 22, 0.1) 1.6px, transparent 1.6px), linear-gradient(rgba(22, 22, 22, 0.1) 0.8px, transparent 0.8px), linear-gradient(90deg, rgba(22, 22, 22, 0.1) 0.8px, rgba(173, 173, 173, 0) 0.8px)",

0 commit comments

Comments
 (0)