+
+
+
diff --git a/wp-content/themes/homeproz/inc/template-functions.php b/wp-content/themes/homeproz/inc/template-functions.php
index f1da2df7..a3ca2bce 100644
--- a/wp-content/themes/homeproz/inc/template-functions.php
+++ b/wp-content/themes/homeproz/inc/template-functions.php
@@ -132,6 +132,18 @@ function homeproz_format_price($price) {
return '$' . number_format($price);
}
+/**
+ * Fallback menu when no menu is assigned
+ */
+function homeproz_fallback_menu() {
+ echo '';
+}
+
/**
* Get theme option (placeholder for future ACF options)
*
diff --git a/wp-content/themes/homeproz/src/main.js b/wp-content/themes/homeproz/src/main.js
index 6d9f470c..c5fa37ea 100644
--- a/wp-content/themes/homeproz/src/main.js
+++ b/wp-content/themes/homeproz/src/main.js
@@ -6,12 +6,15 @@
import './main.scss';
+// Import component JS
+import '../template-parts/header/navigation.js';
+
(function($) {
'use strict';
// Document ready
$(function() {
- console.log('HomeProz theme initialized');
+ // Theme initialized
});
})(jQuery);
diff --git a/wp-content/themes/homeproz/src/main.scss b/wp-content/themes/homeproz/src/main.scss
index 5a24ceb5..c880a676 100644
--- a/wp-content/themes/homeproz/src/main.scss
+++ b/wp-content/themes/homeproz/src/main.scss
@@ -7,6 +7,9 @@
// Import Tailwind
@import 'tailwind.css';
+// Import component styles
+@import '../template-parts/header/site-header.scss';
+
// ============================================
// CSS Custom Properties (Design Tokens)
// ============================================
diff --git a/wp-content/themes/homeproz/template-parts/header/navigation.js b/wp-content/themes/homeproz/template-parts/header/navigation.js
new file mode 100644
index 00000000..317b6a4a
--- /dev/null
+++ b/wp-content/themes/homeproz/template-parts/header/navigation.js
@@ -0,0 +1,52 @@
+/**
+ * Navigation functionality
+ *
+ * @package HomeProz
+ */
+
+(function($) {
+ 'use strict';
+
+ // Mobile menu toggle
+ var $menuToggle = $('.menu-toggle');
+ var $mobileMenu = $('.mobile-navigation');
+
+ if (!$menuToggle.length) {
+ return;
+ }
+
+ $menuToggle.on('click', function() {
+ var isExpanded = $(this).attr('aria-expanded') === 'true';
+
+ $(this).attr('aria-expanded', !isExpanded);
+ $mobileMenu.toggleClass('is-open');
+
+ // Prevent body scroll when menu is open
+ if (!isExpanded) {
+ $('body').addClass('mobile-menu-open');
+ } else {
+ $('body').removeClass('mobile-menu-open');
+ }
+ });
+
+ // Close mobile menu on escape key
+ $(document).on('keydown', function(e) {
+ if (e.key === 'Escape' && $mobileMenu.hasClass('is-open')) {
+ $menuToggle.attr('aria-expanded', 'false');
+ $mobileMenu.removeClass('is-open');
+ $('body').removeClass('mobile-menu-open');
+ }
+ });
+
+ // Close mobile menu when clicking outside
+ $(document).on('click', function(e) {
+ if ($mobileMenu.hasClass('is-open') &&
+ !$(e.target).closest('.mobile-navigation').length &&
+ !$(e.target).closest('.menu-toggle').length) {
+ $menuToggle.attr('aria-expanded', 'false');
+ $mobileMenu.removeClass('is-open');
+ $('body').removeClass('mobile-menu-open');
+ }
+ });
+
+})(jQuery);
diff --git a/wp-content/themes/homeproz/template-parts/header/site-header.php b/wp-content/themes/homeproz/template-parts/header/site-header.php
new file mode 100644
index 00000000..b67f890a
--- /dev/null
+++ b/wp-content/themes/homeproz/template-parts/header/site-header.php
@@ -0,0 +1,72 @@
+
+
diff --git a/wp-content/themes/homeproz/template-parts/header/site-header.scss b/wp-content/themes/homeproz/template-parts/header/site-header.scss
new file mode 100644
index 00000000..6d4c4bc4
--- /dev/null
+++ b/wp-content/themes/homeproz/template-parts/header/site-header.scss
@@ -0,0 +1,220 @@
+/**
+ * Site Header Styles
+ *
+ * @package HomeProz
+ */
+
+.site-header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ background-color: var(--color-bg-dark);
+ border-bottom: 1px solid var(--color-border);
+}
+
+.header-container {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+.header-inner {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2rem;
+}
+
+// Logo / Branding
+.site-branding {
+ flex-shrink: 0;
+
+ .custom-logo-link {
+ display: block;
+
+ img {
+ max-height: 60px;
+ width: auto;
+ }
+ }
+
+ .site-title-link {
+ text-decoration: none;
+ }
+
+ .site-title {
+ font-family: var(--font-display);
+ font-size: 1.5rem;
+ color: var(--color-text);
+ letter-spacing: 0.02em;
+ }
+}
+
+// Desktop Navigation
+.main-navigation {
+ display: none;
+ flex-grow: 1;
+ justify-content: center;
+
+ @media (min-width: 1024px) {
+ display: flex;
+ }
+
+ .nav-menu {
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .menu-item {
+ a {
+ display: block;
+ padding: 0.5rem 0;
+ color: var(--color-text-muted);
+ font-size: 0.875rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ text-decoration: none;
+
+ &:hover {
+ color: var(--color-text);
+ }
+ }
+
+ &.current-menu-item a,
+ &.current_page_item a {
+ color: var(--color-accent-light);
+ }
+ }
+}
+
+// Mobile Menu Toggle
+.menu-toggle {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 44px;
+ height: 44px;
+ padding: 0;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+
+ @media (min-width: 1024px) {
+ display: none;
+ }
+
+ .menu-toggle-icon {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ .bar {
+ display: block;
+ width: 24px;
+ height: 2px;
+ background-color: var(--color-text);
+ }
+
+ &[aria-expanded="true"] {
+ .bar:nth-child(1) {
+ transform: translateY(7px) rotate(45deg);
+ }
+ .bar:nth-child(2) {
+ opacity: 0;
+ }
+ .bar:nth-child(3) {
+ transform: translateY(-7px) rotate(-45deg);
+ }
+ }
+}
+
+// Header CTA
+.header-cta {
+ display: none;
+ flex-shrink: 0;
+
+ @media (min-width: 1024px) {
+ display: block;
+ }
+
+ .header-phone {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.625rem 1.25rem;
+ background-color: var(--color-accent);
+ color: white;
+ font-size: 0.875rem;
+ font-weight: 600;
+ text-decoration: none;
+ border-radius: 0.25rem;
+
+ &:hover {
+ background-color: var(--color-accent-hover);
+ color: white;
+ }
+ }
+}
+
+// Mobile Navigation
+.mobile-navigation {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background-color: var(--color-bg-card);
+ border-bottom: 1px solid var(--color-border);
+ padding: 1rem;
+
+ &.is-open {
+ display: block;
+ }
+
+ @media (min-width: 1024px) {
+ display: none !important;
+ }
+
+ .mobile-nav-menu {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ }
+
+ .menu-item {
+ border-bottom: 1px solid var(--color-border);
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ a {
+ display: block;
+ padding: 1rem 0;
+ color: var(--color-text);
+ font-size: 1rem;
+ text-decoration: none;
+
+ &:hover {
+ color: var(--color-accent-light);
+ }
+ }
+ }
+
+ .mobile-menu-cta {
+ margin-top: 1.5rem;
+ padding-top: 1.5rem;
+ border-top: 1px solid var(--color-border);
+
+ .btn {
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+ }
+}