Diego branch

index.html

@@ -29,8 +29,6 @@
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
     }
 
-
-
     .topic-card {
       transition: transform 0.25s ease, box-shadow 0.25s ease;
       cursor: pointer;
@@ -201,7 +199,7 @@ <h2>Como usar o site?</h2>
         <div class="row row-cols-1 row-cols-md-3 g-4 "> <!--breakpoint médio (md), 3 colunas por linha + gap-->
           <!-- Card 1 -->
           <div class="col col-md-4 ">
-            <a href="iniciante.html" class="text-decoration-none text-dark">
+            <a href="src/iniciante.html" class="text-decoration-none text-dark">
               <div class="card h-100 text-center topic-card"> <!--tamanho dos cartões iguais-->
                 <img src="images/1-iniciante.jpg" class="card-img-top" alt="Descrição da Imagem 1">
                 <div class="card-body">
@@ -215,7 +213,7 @@ <h5 class="card-title">Iniciante</h5>
 
           <!-- Card 2 -->
           <div class="col col-md-4">
-            <a href="intermediario.html" class="text-decoration-none text-dark">
+            <a href="src/intermediario.html" class="text-decoration-none text-dark">
               <div class="card h-100 text-center topic-card">
                 <img src="images/2-intermediario.jpg" class="card-img-top" alt="Descrição da Imagem 2">
                 <div class="card-body">
@@ -229,7 +227,7 @@ <h5 class="card-title">Intermediário</h5>
 
           <!-- Card 3 -->
           <div class="col col-md-4">
-            <a href="avancado.html" class="text-decoration-none text-dark">
+            <a href="src/avancado.html" class="text-decoration-none text-dark">
               <div class="card h-100 text-center topic-card">
                 <img src="images/3-avancado.jpg" class="card-img-top" alt="Descrição da Imagem 3">
                 <div class="card-body">

src/avancado.html

@@ -86,7 +86,7 @@ <h2 class="fw-bold mb-3">Sobre este nível</h2>
 
                     <p class="text-muted">
                         No nível avançado do <strong><a 
-                            href="index.html"
+                            href="../index.html"
                             class="fw-semibold text-decoration-none link-body-emphasis">MapaDev</strong></a>, você entra na etapa que transforma desenvolvedores competentes em profissionais completos.
                         Aqui, você aprenderá a projetar, organizar e manter aplicações modernas, utilizando padrões de arquitetura, ferramentas de alta eficiência e práticas adotadas por equipes experientes em empresas reais.
                     </p>

src/header-componente.js

@@ -1,4 +1,8 @@
-const caminhoAtual = window.location.pathname.split("/").pop(); //Seleciona o caminho atual.
+const partes = window.location.pathname.split("/"); 
+const caminhoAtual = partes.pop(); //Seleciona o caminho atual.
+const pastaAtual = partes.pop(); //Seleciona o caminho atual.
+
+const dentroDeSrc = pastaAtual === "src"; //Informa se está no src
 
 class Header extends HTMLElement {
     connectedCallback(){        
@@ -28,18 +32,7 @@ class Header extends HTMLElement {
             "avancado-cloud-computing.html"
         ];
 
-        let inicianteLink = ""
-        let intermediarioLink = ""
-        let avancadoLink = ""
-        if(caminhoAtual === "index.html"){
-            inicianteLink = '"href="src/iniciante.html"'
-            intermediarioLink = '"href="src/intermediario.html"'
-            avancadoLink = '"href="src/avancado.html"'
-        }else {
-            inicianteLink = '"href="iniciante.html"'
-            intermediarioLink = '"href="intermediario.html"'
-            avancadoLink = '"href="avancado.html"'
-        }
+        const base = dentroDeSrc ? "../" : "";
 
          //data-bs-theme="light" estava travando o tema no "light"
          //troquei a class="logo-light" por class="logo-img" para trocar a logo caso tema 'dark'
@@ -53,8 +46,8 @@ class Header extends HTMLElement {
                     <span class="navbar-toggler-icon"></span>
                     </button>
 
-                    <a class="navbar-brand mx-auto me-lg-auto ms-lg-0" href="index.html">
-                        <img src="/images/mapadev-logo-light.svg" alt="MapaDev" height="40" class="logo-img"> 
+                    <a class="navbar-brand mx-auto me-lg-auto ms-lg-0" href="${base}index.html">
+                        <img src="${base}images/mapadev-logo-light.svg" alt="MapaDev" height="40" class="logo-img"> 
                     </a>
 
                     <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTopics" aria-controls="offcanvasTopics">
@@ -64,13 +57,16 @@ class Header extends HTMLElement {
                     <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
                         <ul class="navbar-nav mx-auto mb-2 mb-lg-0 nav-underline justify-content-center">
                             <li class="nav-item">
-                            <a class="nav-link ${iniciante.includes(caminhoAtual) ? "active": ""}${inicianteLink}>Iniciante</a>
+                            <a class="nav-link ${iniciante.includes(caminhoAtual) ? "active": ""}"
+                                href="${base}src/iniciante.html">Iniciante</a>
                             </li>
                             <li class="nav-item">
-                            <a class="nav-link ${intermediario.includes(caminhoAtual) ? "active": ""}${intermediarioLink}>Intermediário</a>
+                            <a class="nav-link ${intermediario.includes(caminhoAtual) ? "active": ""}"
+                                href="${base}src/intermediario.html">Intermediário</a>
                             </li>
                             <li class="nav-item">
-                            <a class="nav-link ${avancado.includes(caminhoAtual) ? "active": ""}${avancadoLink}>Avançado</a>
+                            <a class="nav-link ${avancado.includes(caminhoAtual) ? "active": ""}"
+                                href="${base}src/avancado.html">Avançado</a>
                             </li>
                         </ul>                       
 

src/iniciante.html

@@ -85,7 +85,7 @@ <h1 class="fw-bold display-5">Nível Iniciante</h1> <!--Coloque o seu nível-->
                     <h2 class="fw-bold mb-3">Sobre este nível</h2>
 
                     <p class="text-muted">
-                        No nível iniciante do <strong><a href="index.html"
+                        No nível iniciante do <strong><a href="../index.html"
                                 class="fw-semibold text-decoration-none link-body-emphasis">MapaDev</strong></a>, você começa a compreender os pilares que sustentam toda aplicação web moderna. Aqui, o foco é aprender a pensar como programador, entender como páginas são construídas e dominar as ferramentas essenciais para criar seus primeiros projetos.
                     </p>
 

src/intermediario.html

@@ -86,7 +86,7 @@ <h1 class="fw-bold display-5">Nível Intermediário</h1> <!--Coloque o seu níve
                     <h2 class="fw-bold mb-3">Sobre este nível</h2>
 
                     <p class="text-muted">
-                        No nível intermediário do <strong><a href="index.html"
+                        No nível intermediário do <strong><a href="../index.html"
                                 class="fw-semibold text-decoration-none link-body-emphasis">MapaDev</strong></a>, você
                         entra em um novo estágio da sua jornada
                         <!--Likando para a home principal e formatação para tirar a decoração azul do link-->

src/theme.js

@@ -26,11 +26,14 @@ document.addEventListener("DOMContentLoaded", () => {
     }
 
     // --- LOGO ---
+    const partes = window.location.pathname.split("/");
+    const arquivoAtual = partes[partes.length - 2];
+    const base = arquivoAtual === "src" ? "../" : "";
     if (logo) {
       if (current === "dark") {
-        logo.src = "images/mapadev-logo-dark.svg";
+        logo.src = `${base}images/mapadev-logo-dark.svg`;
       } else {
-        logo.src = "images/mapadev-logo-light.svg";
+        logo.src = `${base}images/mapadev-logo-light.svg`;
       }
     }
   }
@@ -62,4 +65,4 @@ document.addEventListener("DOMContentLoaded", () => {
     // Atualiza ícone e logo
     updateElements(current);
   });
-});
+});