Skip to content

Commit 8955832

Browse files
leticiadialeticiadia
authored
Merge pull request #78 from techknowledge-blog/feature/responsive-navbar-update
Navbar Update
2 parents 977e25d + c84b7b7 commit 8955832

28 files changed

Lines changed: 273 additions & 197 deletions

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from "react";
22
import { BrowserRouter } from "react-router-dom";
33

4-
import { Header } from "./components/header/Header";
5-
import { Footer } from "./components/footer/Footer";
4+
import { Header } from "./components/layout/header/Header";
5+
import { Footer } from "./components/layout/footer/Footer";
66

77
import { AppRouter } from "./AppRouter";
88

‎src/AppRouter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Post } from "./components/posts/post/Post";
2+
import { Post } from "./components/ui/posts/post/Post";
33
import { About } from "./pages/About";
44
import { Knowledgers } from "./pages/Knowledgers";
55
import { Home } from "./pages/Home";

src/components/footer/Footer.tsx renamed to src/components/layout/footer/Footer.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useContext } from "react";
22

3-
import TechknowledgeMiniLogo from "../../assets/images/new-logo-darkmode.svg";
4-
import TechknowledgeMiniLogoLight from "../../assets/images/new-logo-lightmode.svg";
5-
import { ThemeContext } from "../../context/ThemeContext";
3+
import TechknowledgeMiniLogo from "../../../assets/images/new-logo-darkmode.svg";
4+
import TechknowledgeMiniLogoLight from "../../../assets/images/new-logo-lightmode.svg";
5+
import { ThemeContext } from "../../../context/ThemeContext";
66

77
export function Footer() {
88
const { darkMode } = useContext(ThemeContext);

src/components/header/Header.module.css renamed to src/components/layout/header/Header.module.css

File renamed without changes.

src/components/header/Header.tsx renamed to src/components/layout/header/Header.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { Moon, Sun } from "@phosphor-icons/react";
33
import { Link } from "react-router-dom";
44

55
import { Navbar } from "../navbar/Navbar";
6-
import { ThemeContext } from "../../context/ThemeContext";
6+
import { ThemeContext } from "../../../context/ThemeContext";
77
import styles from "./Header.module.css";
88

9-
import techknowledgeLogoDark from "../../assets/images/new-logo-darkmode.svg";
10-
import techknowledgeLogoLight from "../../assets/images/new-logo-lightmode.svg";
9+
import techknowledgeLogoDark from "../../../assets/images/new-logo-darkmode.svg";
10+
import techknowledgeLogoLight from "../../../assets/images/new-logo-lightmode.svg";
1111

1212
export function Header() {
1313
const { darkMode, toggleDarkMode } = useContext(ThemeContext);

‎src/components/layout/navbar/Navbar.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useContext, useState } from "react";
2+
import { Link } from "react-router-dom";
3+
import { List } from "@phosphor-icons/react";
4+
5+
import { ThemeContext } from "../../../context/ThemeContext";
6+
import { MenuModal } from "../../ui/menuModal/menuModal";
7+
8+
export function Navbar() {
9+
const [open, setOpen] = useState(false);
10+
const { darkMode } = useContext(ThemeContext);
11+
12+
const routes = [
13+
{ path: "/", label: "" },
14+
{ path: "/about", label: "Sobre" },
15+
{ path: "/posts", label: "Posts" },
16+
{ path: "/techlab", label: "TechLab" },
17+
{ path: "/knowledgers", label: "Knowledgers" },
18+
];
19+
20+
return (
21+
<nav>
22+
<button
23+
onClick={() => setOpen(!open)}
24+
className="absolute right-4 top-8 cursor-pointer md:hidden"
25+
>
26+
{darkMode ? (
27+
<span className="inline-flex items-center justify-center w-12 h-9 border border-white/10 rounded-full">
28+
<List
29+
size={24}
30+
color="#ffffff"
31+
className={`transition-all duration-300 ${
32+
open
33+
? "opacity-0 rotate-90 scale-75"
34+
: "opacity-100 rotate-0 scale-100"
35+
}`}
36+
/>
37+
</span>
38+
) : (
39+
<span className="inline-flex items-center justify-center w-12 h-9 border border-black/10 rounded-full">
40+
<List size={24} color="#000000" />
41+
</span>
42+
)}
43+
</button>
44+
45+
<ul className="hidden md:flex md:items-center gap-4 text-xl">
46+
{routes.map(({ path, label }) => (
47+
<li key={label} className="relative md:ml-2 md:my-0 my-7">
48+
<Link
49+
to={path}
50+
className="text-base relative after:content-[''] after:absolute after:left-0 after:bottom-[-4px] after:w-full after:h-[2px] dark:after:bg-blue-300 after:bg-blue-500 after:scale-x-0 after:transition-transform after:duration-300 hover:after:scale-x-100"
51+
>
52+
{label}
53+
</Link>
54+
</li>
55+
))}
56+
</ul>
57+
58+
<MenuModal isOpen={open} onClose={() => setOpen(false)} routes={routes} />
59+
</nav>
60+
);
61+
}

‎src/components/navbar/Navbar.tsx‎

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

‎src/components/posts/mockPost.ts‎

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

src/components/button/Button.tsx renamed to src/components/ui/button/Button.tsx

File renamed without changes.

src/components/cardknowledger/CardKnowledger.tsx renamed to src/components/ui/cardknowledger/CardKnowledger.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useEffect, useState } from "react";
22

3-
import { getUsers } from "../../services/usersService";
3+
import { getUsers } from "../../../services/usersService";
44
import { mockKnowledgers } from "./mockKnowledgers";
55

6-
import flagBrasil from "../../assets/images/bandeira-de-brasil.png";
7-
import flagAlagoas from "../../assets/images/bandeira-de-alagoas.png";
8-
import flagPara from "../../assets/images/bandeira-do-para.png";
6+
import flagBrasil from "../../../assets/images/bandeira-de-brasil.png";
7+
import flagAlagoas from "../../../assets/images/bandeira-de-alagoas.png";
8+
import flagPara from "../../../assets/images/bandeira-do-para.png";
99
import { Link } from "react-router";
1010

1111
interface UserProps {

0 commit comments

Comments
 (0)