Skip to content

Added reusable navbar component and integrated into all pages #654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added reusable navbar component and integrated into all pages #654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
03d20f4
Added reusable navbar component and integrated into all pages
shristhi-2908 Sep 24, 2025
fb6ed10
Update contact.html
shristhi-2908 Sep 24, 2025
7c220c7
resolved conflicts
shristhi-2908 Sep 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
501 changes: 52 additions & 449 deletions about.html
View file
Open in desktop

Large diffs are not rendered by default.

362 changes: 87 additions & 275 deletions blogListing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,197 +1,21 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blog List | GrowCraft</title>
<link rel="stylesheet" href="src/style.css" />
<link rel="stylesheet" href="src/css/style.css" />
<link rel="stylesheet" href="src/blogs.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
crossorigin="anonymous" />
<link rel="shortcut icon" href="Favicon.ico" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
.navbar {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background-color: #ffffff !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

}

.navbar-brand img {
max-height: 60px;
object-fit: contain;
vertical-align: middle;
transition: all 0.3s ease;
}

.navbar-nav .nav-link {
font-weight: 500;
padding: 0.75rem 1rem;
color: #333;
display: flex;
align-items: center;
transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: #463896;
}

/* Dark Mode Toggle Switch Alignment */
.navbar .toggle-switch {
display: flex;
align-items: center;
padding-left: 1rem;
}

/* search bar */
.search-container {
display: flex;
align-items: center;
background-color: white;
border-radius: 25px;
padding: 5px 10px;
width: 100%;
max-width: 300px;
margin-left: auto;
margin-right: 20px;
}

.search-input {
border: none;
outline: none;
padding: 8px;
font-size: 16px;
flex: 1;
}

.search-input::placeholder {
color: #aaa;
}

.search-button {
background: none;
border: none;
cursor: pointer;
color: #555;
font-size: 18px;
}

@media screen and (max-width: 600px) {
.search-container {
max-width: 200px;
}

.search-input {
font-size: 14px;
}
}


/* Responsive logo alignment fix */
@media (max-width: 991.98px) {
.navbar .navbar-brand {
margin-right: auto;
}

.navbar-collapse {
margin-top: 0.8rem;
}
}

.btn-custom-purple:focus,
.btn-custom-purple:active {
background-color: #1f0d66 !important;
border-color: #1f0d66 !important;
color: white !important;
box-shadow: 0 0 0 0.2rem rgba(41, 25, 135, 0.25) !important;
}

/* === Navbar Custom Styling === */

.navbar {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background-color: #ffffff !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);


}

.navbar-nav li {
margin: 0 10px;
/* Reduce from 20px or more if it’s higher */
}

.navbar-nav {
display: flex;
justify-content: center;
width: 100%;
gap: 20px;
}



.navbar-brand img {
max-height: 60px;
object-fit: contain;
vertical-align: middle;
transition: all 0.3s ease;
}

.navbar-nav .nav-item {
display: flex;
align-items: center;
margin-left: auto;

}

.nav-item .nav-link {
font-weight: 900;
color: #7a5a08 !important;
font-family: "Lora", serif;
display: flex;
align-items: center;
transition: color 0.3s ease;
}

/* Navbar link hover effect */
.navbar-nav .nav-link {
position: relative;
color: #333;
/* Default link color */
font-weight: 500;
transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
color: #007bff;
/* Change text color on hover */
}

/* Underline animation */
.navbar-nav .nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0%;
height: 2px;
background-color: #007bff;
transition: width 0.3s ease;
}

.navbar-nav .nav-link:hover::after {
width: 100%;
}


/* =========================
Blog Section
========================= */
Expand Down Expand Up @@ -420,98 +244,7 @@
width: 40px;
}
}

</style>

<body>

<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid d-flex justify-content-between align-items-center px-2 px-sm-5">
<a class="navbar-brand" href="index.html">
<img
src="images/logo_bg_transparent.png"
alt="GrowCraft"
width="200"
class="theme-aware-logo"
data-light-src="images/logo_bg_transparent.png"
data-dark-src="images/logo-transparent-dark-mode.png"
/>
</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active visited" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="blogListing.html">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html#about">About Us</a>
</li>
<!-- Added new "Our Work" link to navigate to the new work section on same page -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html#work">Our Work</a>
</li>

<li class="nav-item">
<a class="nav-link active" aria-current="page" href="src/contact.html">Contact Us</a>
</li>
</ul>
</div>

<!-- Responsive Search Bar -->
<div class="search-container">
<input type="text" placeholder="Search..." class="search-input">
<button class="search-button">
<i class="fas fa-search"></i> <!-- Font Awesome icon -->
</button>
</div>

</div>

</nav>

<!-- Blog Section -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Our Blog</h2>
<div class="row" id="blog-list">
<!-- Blog cards populated via JavaScript -->
</div>
</div>
</section>

<!-- FAB for creating blog -->
<a href="blogWrite.html" class="fab btn btn-primary shadow" title="Write a new blog post">+</a>

<!--Footer-->
<div id="footer-placeholder"></div>
<script>
fetch('src/components/footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer-placeholder').innerHTML = data;
});
</script>

<!-- JS Scripts -->
<script src="src/blogs.js"></script>
<script src="src/darkMode.js"></script>



<style>
.fab {
.fab {
position: fixed;
bottom: 30px;
right: 30px;
Expand All @@ -536,7 +269,86 @@ <h2 class="text-center mb-4">Our Blog</h2>
color: #ffffff !important;
}

</style>

</style>

<body>

<!-- Navbar -->
<div id="navbar"></div>

<!-- Blog Section -->
<section class="py-5 bg-light">
<div class="container">
<h2 class="text-center mb-4">Our Blog</h2>
<div class="row" id="blog-list">
<!-- Blog cards populated via JavaScript -->
</div>
</div>
</section>

<!-- FAB for creating blog -->
<a href="blogWrite.html" class="fab btn btn-primary shadow" title="Write a new blog post">+</a>

<!--Footer-->
<div id="footer-placeholder"></div>

<!-- JS Scripts -->

<script src="src/blogs.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"
defer></script>
<script src="src/darkMode.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
// Load navbar
fetch("src/components/navbar.html")
.then(response => response.text())
.then(data => {
document.getElementById("navbar").innerHTML = data;

// Initialize dark mode toggle (after navbar is loaded)
new DarkModeToggle();

// Now the logo exists — get it
const logo = document.querySelector('#logo');

if (logo) {
function updateLogo() {
const isDark = document.documentElement.getAttribute("data-bs-theme") === "dark";
logo.src = isDark
? logo.getAttribute("data-dark-src") || 'src/images/logo-transparent-dark-mode.png'
: logo.getAttribute("data-light-src") || 'src/images/logo_bg_transparent.png';
}

updateLogo();

const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
updateLogo();
}
});
});

observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-bs-theme']
});
}
})
.catch(error => console.error("Navbar load error:", error));
});

// Fetch footer normally
fetch('src/components/footer.html')
.then(response => response.text())
.then(data => {
document.getElementById('footer-placeholder').innerHTML = data;
});
</script>

</body>

Expand Down
Loading