https://technogemsinc.com/Components/Header-component.js

1class Header extends HTMLElement {
2constructor() {
3super();
4}
5
6connectedCallback() {
7this.innerHTML = `
8<!-- Navbar Section -->
9<div class="container header-container">
10    <header id="headerContainer">
11        <nav class="nav_bar container" aria-label="Main Navigation">
12            <a href="/" class="logo_box">
13                <img src="./images/svg/Technogems-logo.svg" alt="Technogems logo" loading="lazy">
14            </a>
15            <!-- as -->
16            <div class="nav_menu" id="nav_menu">
17                <div class="nav_list container" id="nav_list">
18                    <li><a class="nav_links navlink" id="active_home" href="/">Home</a></li>
19
20                    <li>
21                        <span>
22                            <a href="/best-software-development-services-in-virginia.html" id="active_service" class="nav_links navlink">Services <i class="ri-arrow-down-s-line drop_arrow desk_drop_arrow" id="Services_down" role="presentation"></i></a> <i class="ri-arrow-down-s-line drop_arrow" id="Services_down" role="presentation"></i>
23                        </span>
24                        <ul class="dropdown Services_Drop">
25                            <li><a class="navlink" href="/best-mobile-app-development-company-in-virginia-fairfax.html" id="Mobile_App">Mobile App Development</a></li>
26                            <li><a class="navlink" href="/best-web-app-development-services-in-virginia-fairfax.html" id="Web_App">Web App Development</a></li>
27                            <li><a class="navlink" href="/best-devops-services-in-virginia-fairfax.html" id="Dev_Ops">Dev Ops Services</a></li>
28                            <li><a class="navlink" href="/best-agile-software-development-in-virginia-fairfax.html" id="Agile_software">Agile Software Development</a></li>
29                            <li><a class="navlink" href="/best-lms-development-company-in-virginia-fairfax.html" id="LMS_Development">LMS Development</a></li>
30                        </ul>
31                    </li>
32
33                    <li><span><a class="nav_links navlink" href="/Products.html" id="active_product">Products</a></span></span>
34                    </li>
35
36                    <li>
37                        <span>
38                            <a href="/Industry-Solutions.html" class="nav_links navlink" id="active_solution">Industry Solutions <i class="ri-arrow-down-s-line drop_arrow desk_drop_arrow d-none" id="Solution_down"></i></a> <i class="ri-arrow-down-s-line d-none drop_arrow" id="Solution_down"></i>
39                        </span>
40                        <ul class="dropdown Solution_Drop d-none">
41                            <li><a class="navlink" href="/Government-Solutions.html" id="active_gover_solution">Government Solutions</a></li>
42                            <li><a class="navlink" href="/CRM-Platforms.html" id="active_CRM_plateform">CRM Platforms</a></li>
43                            <li><a class="navlink" href="/White-Label-Applications.html" id="active_whiteApp">White Label Applications</a></li>
44                            <li><a class="navlink" href="/Startup-Solutions.html" id="active_startup">Startup Solutions</a></li>
45                        </ul>
46                    </li>
47
48                    <li>
49                        <span>
50                            <a href="/Portfolio.html" class="nav_links navlink" id="active_caseStudie">Portfolio</a> <i class="ri-arrow-down-s-line drop_arrow d-none" id="Portfolio_down"></i>
51                        </span>
52                        <ul class="dropdown Portfolio_Drop d-none">
53                            <li><a class="navlink" href="/Document-Management.html" id="Docu_Manage">Document Management</a></li>
54                            <li><a class="navlink" href="/Legacy-System-Modernization.html" id="active_legacy">Legacy System Modernization</a></li>
55                            <li><a class="navlink" href="/Mobile-CRM-Solution.html" id="active_crm">Mobile CRM Solution</a></li>
56                            <li><a class="navlink" href="/Learning-Management-Solution.html" id="active_learning">Learning Management Solution</a></li>
57                        </ul>
58                    </li>
59
60                    <!-- <li><a href="/Blog.html" class="nav_links navlink" id="Blog_Page">Blog</a></li> -->
61
62                    <li><a href="/blogs/" class="nav_links navlink" id="active_blog">Blogs</a></li>
63                    <li><a href="/Contact-Us.html" class="nav_links navlink" id="contactUs">Contact Us</a></li>
64                </div>
65                <a type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop" class="nav_schedule_btn btn_box schedule_btn Open__Schedule__btn">
66                    SCHEDULE APPOINTMENT
67                </a>
68            </div>
69            <div class="Hamburger" id="toggle_btn">
70                <a class="lines_button x2" type="button" role="button" aria-label="Toggle Navigation">

71                    <span class="lines"></span>
72                </a>
73            </div>
74        </nav>
75    </header>
76</div>
77`
78}
79}
80customElements.define('header-component', Header)
81
82
83var currentPage = window.location.pathname;
84var navLinks = document.querySelectorAll('.navlink');
85navLinks.forEach(function(link) {
86    const HomeActive = document.getElementById('active_home')
87    if(currentPage === '/') {
88        HomeActive.classList.add('active')
89    }
90
91    var linkHref = new URL(link.getAttribute("href"), window.location.href).pathname;
92
93    if(linkHref === currentPage) {
94        link.classList.add("active");
95    } else {
96        link.classList.remove("active");
97    }
98});
99
100
101var subNavLinks = document.querySelectorAll('.Services_Drop .navlink');
102var activeService = document.getElementById('active_service')
103subNavLinks.forEach(function(sublink) {
104    if(sublink.classList.contains('active')) {
105        activeService.classList.add('active')
106    }
107})
108
109
110var subNavLinks = document.querySelectorAll('.Solution_Drop .navlink');
111var activeService = document.getElementById('active_solution')
112subNavLinks.forEach(function(sublink) {
113    if(sublink.classList.contains('active')) {
114        activeService.classList.add('active')
115    }
116})
117
118var subNavLinks = document.querySelectorAll('.Portfolio_Drop .navlink');
119var activeService = document.getElementById('active_caseStudie')
120subNavLinks.forEach(function(sublink) {
121    if(sublink.classList.contains('active')) {
122        activeService.classList.add('active')
123    }
124})
125
126
127function navHideOnScroll() {
128    let pageWidth = screen.width;
129    
130    if (pageWidth <= 991) {
131    } else {
132        var c, currentScrollTop = 0,
133            navbar = $('#headerContainer');
134        $(window).scroll(function () {
135            var a = $(window).scrollTop();
136            var b = navbar.height();
137            currentScrollTop = a;
138
139            if (c < currentScrollTop && a > b + b) {
140                navbar.addClass("scrollUp");
141            } else if (c > currentScrollTop && !(a <= b)) {
142                navbar.removeClass("scrollUp");
143            }
144            c = currentScrollTop;
145        });
146    }
147}
148
149navHideOnScroll();
150window.addEventListener("load", () => {navHideOnScroll()})
151window.addEventListener("resize", () => {navHideOnScroll()})
152
153$(document).ready(function () {
154    $('#toggle_btn').click(function () {
155        $('#nav_menu').toggleClass('show-nav');
156        $('html').toggleClass('overflowHidden');
157
158    });
159
160    $('.lines_button').on('click', function (e) {
161        $(this).toggleClass('close');
162    });
163
164});
165
166document.addEventListener('click', (evt) => {
167    const target = evt.target;
168    const dropdowns = {
169        'Services_down': '.Services_Drop',
170        'Solution_down': '.Solution_Drop',
171        'Portfolio_down': '.Portfolio_Drop'
172    };
173    
174    const toggledDropdown = dropdowns[target.id];
175    if (toggledDropdown) {
176        $(toggledDropdown).slideToggle();
177        for (const id in dropdowns) {
178            if (id !== target.id) {
179                $(dropdowns[id]).slideUp();
180            }
181        }
182        $('.drop_arrow').toggleClass('drop_arrow_rotate', target.id === 'Services_down');
183    }
184});
185
186
187function copyRightYear() {
188
189    const currentYear = new Date().getFullYear();
190    const footerYears = document.querySelectorAll('.rights__year');
191
192    for (let i = 0; i < footerYears.length; i++) {
193        const yearLable = footerYears[i];
194        var isYear = yearLable.innerHTML === "2024"
195        if (!isYear) {
196            yearLable.innerHTML = currentYear
197        } else {
198            clearInterval(intervalId)
199        }
200    }
201}
202var intervalId = setInterval(copyRightYear, 100);