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

Refactor: Extract sidebar into a reusable component #4

Merged
MinhQuan merged 8 commits from hiepht/PresentCorpo:dev-hiepht-old into main 2026-06-06 17:50:30 +00:00
Conversation 1 Commits 8 Files Changed 26
+47 -280
13 changed files with 47 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9c07af001c - Show all commits
views/aboutPages/aboutMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- Main Content -->
<div class="hero">
@@ -308,6 +254,7 @@
<!-- Scripts -->
<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="/components/footer/footerLoader.js"></script>
</body>
views/contactPages/contactMain.html
+3 -56
View File
@@ -31,62 +31,8 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!----- CONTACT PAGE CONTENT ----->
<section class="contact-section container py-5 my-3 overflow-hidden">
@@ -200,6 +146,7 @@
<!-- Scripts -->
<script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="contactPages/contactMain.js?v=1.1"></script>
</body>
views/newsPages/newsArticle1/newsArticle1.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
@@ -498,6 +501,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body>
views/newsPages/newsArticle2/newsArticle2.html
+4
View File
@@ -25,6 +25,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<div class="container my-4 my-md-5 overflow-hidden">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8">
@@ -314,6 +317,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="newsPages/newsArticle1/newsArticle1.js?v=1.0"></script>
</body>
views/newsPages/newsMain/newsMain.html
+3 -56
View File
@@ -31,62 +31,8 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- NEWS CONTENT SECTION -->
<main class="news-container">
@@ -281,6 +227,7 @@
<script src="newsPages/newsMain/newsMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
</body>
</html>
views/productPages/productMain/productMain.html
+3 -56
View File
@@ -25,62 +25,8 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRODUCT HERO SECTION -->
<div class="symbol-hero">
@@ -379,6 +325,7 @@
<script src="productPages/productMain/productMain.js?v=1.1"></script>
<script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
</body>
</html>
views/productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- LNG HERO SECTION -->
<section class="lng-hero">
<div class="container">
@@ -142,6 +145,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommerceLNG/productSeparateCommerceLNG.js?v=1.0"></script>
</body>
views/productPages/productSeparateCommercePNG/productSeparateCommercePNG.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PNG HERO SECTION -->
<section class="png-hero">
<div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateCommercePNG/productSeparateCommercePNG.js?v=1.0"></script>
</body>
views/productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.html
+4
View File
@@ -31,6 +31,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- GAS METER HERO SECTION -->
<section class="gas-meter-hero">
<div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionGasMeter/productSeparateProductionGasMeter.js?v=1.0"></script>
</body>
views/productPages/productSeparateProductionPRU/productSeparateProductionPRU.html
+4
View File
@@ -32,6 +32,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRU HERO SECTION -->
<section class="pru-hero">
<div class="container">
@@ -140,6 +143,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPRU/productSeparateProductionPRU.js?v=1.0"></script>
</body>
views/productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- PRESSURE REGULATOR VALVE HERO SECTION -->
<section class="valve-hero">
<div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionPressureRegulatorValve/productSeparateProductionPressureRegulatorValve.js?v=1.0"></script>
</body>
views/productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.html
+4
View File
@@ -29,6 +29,9 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- VAPORIZER HERO SECTION -->
<section class="vaporizer-hero">
<div class="container">
@@ -137,6 +140,7 @@
<div id="footer"></div>
<script src="components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
<script src="productPages/productSeparateProductionVaporizer/productSeparateProductionVaporizer.js?v=1.0"></script>
</body>
views/servicePages/serviceMain.html
+3 -56
View File
@@ -26,62 +26,8 @@
<!-- Header Component -->
<div id="header"></div>
<!-- Floating Menu Button -->
<button class="floating-menu-btn" id="floatingMenuBtn">
<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>
<!-- Sidebar Component -->
<div id="sidebar-container"></div>
<!-- SERVICE HERO SECTION -->
<div class="service-hero">
@@ -321,6 +267,7 @@
<script src="servicePages/serviceMain.js?v=1.2"></script>
<script src="/components/header/headerLoader.js"></script>
<script src="/components/sidebar/sidebarLoader.js"></script>
<script src="/components/footer/footerLoader.js"></script>
</body>
</html>