MinhQuan/PresentCorpo
0
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add modular sidebarLoader to all missing pages

Browse Source 
- Replace hardcoded inline sidebar markup with <div id="sidebar-container">
  on: aboutMain, newsMain, productMain, serviceMain, contactMain
- Add sidebar-container + sidebarLoader.js script to pages that had no
  sidebar at all: newsArticle1, newsArticle2, productSeparateCommerceLNG,
  productSeparateCommercePNG, productSeparateProductionPRU,
  productSeparateProductionGasMeter, productSeparateProductionVaporizer,
  productSeparateProductionPressureRegulatorValve
- Sidebar HTML/CSS/JS is now loaded dynamically from /components/sidebar/
  on all 14 pages (mobile breakpoint ≤768px)"
This commit is contained in:
hiep200311
2026-06-05 20:55:20 +07:00
parent 029d79daad
commit 9c07af001c
13 changed files with 47 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/aboutPages/aboutMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- Main Content --> <!-- Main Content -->
<div class="hero"> <div class="hero">
@@ -308,6 +254,7 @@
<!-- Scripts --> <!-- Scripts -->
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="aboutPages/aboutMain.js?v=1.2"></script> <script src="aboutPages/aboutMain.js?v=1.2"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
views/contactPages/contactMain.html
+3 -56
View File
@@ -31,62 +31,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!----- CONTACT PAGE CONTENT -----> <!----- CONTACT PAGE CONTENT ----->
<section class="contact-section container py-5 my-3 overflow-hidden"> <section class="contact-section container py-5 my-3 overflow-hidden">
@@ -200,6 +146,7 @@
<!-- Scripts --> <!-- Scripts -->
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="contactPages/contactMain.js?v=1.1"></script> <script src="contactPages/contactMain.js?v=1.1"></script>
</body> </body>
views/newsPages/newsArticle1/newsArticle1.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden"> <div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8"> <div class="col-12 col-md-10 col-lg-8">
@@ -498,6 +501,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script> <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body> </body>
views/newsPages/newsArticle2/newsArticle2.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden"> <div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8"> <div class="col-12 col-md-10 col-lg-8">
@@ -314,6 +317,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script> <script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body> </body>
views/newsPages/newsMain/newsMain.html
+3 -56
View File
@@ -31,62 +31,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- NEWS CONTENT SECTION --> <!-- NEWS CONTENT SECTION -->
<main class="news-container"> <main class="news-container">
@@ -281,6 +227,7 @@
<script src="newsPages/newsMain/newsMain.js?v=1.1"></script> <script src="newsPages/newsMain/newsMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>
views/productPages/productMain/productMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- PRODUCT HERO SECTION --> <!-- PRODUCT HERO SECTION -->
<div class="symbol-hero"> <div class="symbol-hero">
@@ -379,6 +325,7 @@
<script src="productPages/productMain/productMain.js?v=1.1"></script> <script src="productPages/productMain/productMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>
views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- LNG HERO SECTION --> <!-- LNG HERO SECTION -->
<section class="lng-hero"> <section class="lng-hero">
<div class="container"> <div class="container">
@@ -142,6 +145,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script> <script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PNG HERO SECTION --> <!-- PNG HERO SECTION -->
<section class="png-hero"> <section class="png-hero">
<div class="container"> <div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script> <script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- GAS METER HERO SECTION --> <!-- GAS METER HERO SECTION -->
<section class="gas-meter-hero"> <section class="gas-meter-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script> <script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRU HERO SECTION --> <!-- PRU HERO SECTION -->
<section class="pru-hero"> <section class="pru-hero">
<div class="container"> <div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script> <script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRESSURE REGULATOR VALVE HERO SECTION --> <!-- PRESSURE REGULATOR VALVE HERO SECTION -->
<section class="valve-hero"> <section class="valve-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script> <script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script>
</body> </body>
views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- VAPORIZER HERO SECTION --> <!-- VAPORIZER HERO SECTION -->
<section class="vaporizer-hero"> <section class="vaporizer-hero">
<div class="container"> <div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div> <div id="footer"></div>
<script src="components/header/headerLoader.js"></script> <script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script> <script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script>
</body> </body>
views/servicePages/serviceMain.html
+3 -56
View File
@@ -26,62 +26,8 @@
<!-- Header Component --> <!-- Header Component -->
<div id="header"></div> <div id="header"></div>
<!-- Floating Menu Button --> <!-- Sidebar Component -->
<button class="floating-menu-btn" id="floatingMenuBtn"> <div id="sidebar-container"></div>
<i class="bi bi-list"></i>
</button>
<!-- Sidebar Overlay -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
<div class="sidebar-header">
<img
src="https://ik.imagekit.io/1e8470bv5/companyLogo.webp?updatedAt=1754143468028"
alt="Ky Long Logo"
class="sidebar-logo"
/>
<button class="close-sidebar">
<i class="bi bi-x-lg"></i>
</button>
</div>
<nav class="sidebar-nav">
<a href="/" class="nav-link">TRANG CHỦ</a>
<a href="/aboutMain" class="nav-link">GIỚI THIỆU</a>
<a href="/productMain" class="nav-link">SẢN PHẨM</a>
<a href="/serviceMain" class="nav-link">DỊCH VỤ</a>
<a href="/newsMain" class="nav-link">TIN TỨC</a>
<a href="/contactMain" class="nav-link">LIÊN HỆ</a>
</nav>
<div class="sidebar-contact">
<div class="d-flex align-items-center mb-3">
<div
class="contact-icon2 d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-geo-alt-fill"></i>
</div>
<div>
<div>Lầu 12, số 27 Đinh Bộ Lĩnh,</div>
<div>P. Bình Thạnh, TP.Hồ Chí Minh</div>
</div>
</div>
<div class="d-flex align-items-center">
<div
class="contact-icon d-flex align-items-center justify-content-center me-2"
>
<i class="bi bi-envelope-open-fill"></i>
</div>
<div>
<div>Email:</div>
<div>info@kylongtech.com</div>
</div>
</div>
</div>
</div>
<!-- SERVICE HERO SECTION --> <!-- SERVICE HERO SECTION -->
<div class="service-hero"> <div class="service-hero">
@@ -321,6 +267,7 @@
<script src="servicePages/serviceMain.js?v=1.2"></script> <script src="servicePages/serviceMain.js?v=1.2"></script>
<script src="/components/header/headerLoader.js"></script> <script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script> <script src="/components/footer/footerLoader.js"></script>
</body> </body>
</html> </html>