ve3 · August 9, 2023 15:22 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>ความช่วยเหลือ &amp; สนับสนุน</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
         <link rel="stylesheet" href="../assets/css/support-style.css">
     </head>
     <body>

diff --git a/index.html b/index.html
@@ -5,7 +5,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>ความช่วยเหลือ &amp; สนับสนุน</title>
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
         <link rel="stylesheet" href="../assets/css/support-style.css">
     </head>
     <body>

diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="th">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>ความช่วยเหลือ &amp; สนับสนุน</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+        <link rel="stylesheet" href="../assets/css/support-style.css">
+    </head>
+    <body>
+
+
+        <main id="page-wrapper" class="d-flex">
+            <nav id="page-sidebar" class="bg-light border-end">
+                <div id="sidebar-header" class="bg-primary h3 my-0">
+                    <a class="d-block h-100 link-light link-underline-opacity-0 py-2 px-3" href="../index.html">Support</a>
+                </div><!-- #sidebar-header -->
+                <ul class="list-group list-group-flush">
+                    <li class="list-group-item list-group-item-transparent list-group-item-action active"><a class="d-block" href="./">Category 1</a></li>
+                    <li class="list-group-item list-group-item-transparent list-group-item-action"><a class="d-block" href="./">Category 2</a></li>
+                    <li class="list-group-item list-group-item-transparent list-group-item-action"><a class="d-block" href="./">Category 3</a></li>
+                </ul>
+            </nav><!-- #page-sidebar -->
+            <div id="page-content-wrapper">
+                <div id="page-topbar" class="border-bottom">
+                    <button id="btn-toggle-sidebar" class="btn btn-light btn-invisible-bg border border-0 rounded-0 px-4 h-100 d-lg-none d-xl-none d-xxl-none" type="button" title="แสดง/ซ่อน บาร์ด้านข้าง">
+                        <i class="fa-solid fa-ellipsis-vertical"></i>
+                        <span class="visually-hidden-focusable">แสดง/ซ่อน บาร์ด้านข้าง</span>
+                    </button>
+                </div><!-- #page-topbar -->
+                <div class="container-fluid">
+                    <h1>Category 1</h1>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                </div><!-- .container-fluid -->
+            </div><!-- #page-content-wrapper -->
+        </main><!-- #page-wrapper -->
+
+
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+        <script src="../assets/js/support-script.js"></script>
+    </body>
+</html>
diff --git a/support-script.js b/support-script.js
@@ -0,0 +1,46 @@
+/**
+ * Support pages JS.
+ * 
+ * @author Vee W.
+ */
+
+
+class SupportScript {
+
+
+    /**
+     * Listen on click side bar toggler button.
+     */
+    #listenClickSidebarToggler() {
+        const targetBtnId = 'btn-toggle-sidebar';
+
+        document.addEventListener('click', (event) => {
+            let thisTarget = event.target;
+            if (thisTarget.closest('button')) {
+                thisTarget = thisTarget.closest('button');
+            }
+
+            if (thisTarget.getAttribute('id') === targetBtnId) {
+                event.preventDefault();
+                thisTarget.classList.toggle('active');
+                document.getElementById('page-sidebar')?.classList.toggle('active');
+            }
+        });
+    }// #listenClickSidebarToggler
+
+
+    /**
+     * Initialize the script.
+     */
+    run() {
+        this.#listenClickSidebarToggler();
+    }// run
+
+
+}// SupportScript
+
+
+document.addEventListener('DOMContentLoaded', () => {
+    const supportScriptObj = new SupportScript();
+    supportScriptObj.run();
+});
diff --git a/support-style.css b/support-style.css
@@ -0,0 +1,63 @@
+/*
+CSS for support pages.
+*/
+.list-group-item-transparent {
+    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
+    --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
+    --bs-list-group-action-active-color: var(--bs-emphasis-color);
+    --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
+    --bs-list-group-active-color: var(--bs-light-bg-subtle);
+    --bs-list-group-active-bg: var(--bs-light-text-emphasis);
+    --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
+}
+
+
+#page-sidebar {
+    --sp-sidebar-width: 250px;
+}
+
+
+.btn-invisible-bg {
+    background-color: transparent;
+}
+
+
+.list-group-item a {
+    color: inherit;
+    text-decoration: none;
+}
+.list-group-item-transparent {
+    background-color: transparent;
+}
+
+
+#page-content-wrapper {
+    min-height: 100vh;
+    width: 100%;
+}
+
+
+#page-sidebar {
+    max-width: var(--sp-sidebar-width);
+    min-height: 100vh;
+    min-width: var(--sp-sidebar-width);
+    transition: all .3s;
+}
+#page-sidebar {
+    margin-left: calc(var(--sp-sidebar-width) * -1);
+}
+#page-sidebar.active {
+    margin-left: 0;
+}
+@media (min-width: 992px) {
+    #page-sidebar,
+    #page-sidebar.active {
+        margin-left: 0;
+    }
+}
+
+
+#page-topbar,
+#sidebar-header {
+    height: 50px;
+}
No results found