ទំព័រមានរបារសងខាង

 
<div style="background-color: white" class="overflow-auto">

  <!--Main Nav Component-->
  <nav aria-label="navbar" class="cgds navbar flex-column navbar-expand-lg">
    <header class="container d-flex flex-nowrap p-0">
      <div class="w-100 d-flex align-items-center justify-content-between px-4 px-md-5 py-4 py-sm-6 py-md-3 py-lg-4">
        <a class="navbar-brand d-flex justify-content-start" href="#">
          <img src="/assets/uncompressed_images/rachana.svg" alt="Home" height="80">
        </a>
      </div>
      <div class="d-flex align-items-center me-5">
        <nav aria-label="social-media" class="social d-flex me-3">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <a class="nav-link" aria-current="page" href="">
                <i class="bi bi-github" target="_blank" style="line-height: 1;"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div class="d-flex flag-icon text-center me-2">
          <a role="button" class="cgds btn" href=""><img src="/assets/uncompressed_images/cambodia-flag-icon.svg"
              width="32px" height="24px" alt="Home">
          </a>
        </div>
        <nav aria-label="social-media" class="social d-lg-block me-1">
          <ul id="menu-social-menu" class="d-flex">
            <li class="nav-icon-social">
              <span class="cgds-line"></span>
            </li>
          </ul>
        </nav>
        <ul class="navbar-nav">
          <li class="nav-item align-self-center">
            <a class="cgds btn-gt" aria-current="page" href="">ចូលគណនី</a>
          </li>
        </ul>
        <div class="mobile-toggle d-flex align-items-center d-lg-none">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavExample1"
            aria-controls="navbarNavExample1" aria-expanded="false" aria-label="Toggle navigation">
            <i class="bi bi-list"></i>
          </button>
        </div>
      </div>
    </header>
    <div class="px-4 px-md-5">
      <div class="collapse navbar-collapse px-4 px-md-5" id="navbarNavExample1">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">ទំព័រដើម</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="">បញ្ជាប់</a>
          </li>
          <li class="nav-item cgds dropdown">
            <a class="nav-link cgds dropdown-toggle" href="" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              ទម្លាក់ចុះ <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="">សកម្មភាព</a></li>
              <li><a class="dropdown-item" href="">សកម្មភាពមួយទៀត</a></li>
              <li><a class="dropdown-item" href="">អ្វីមួយ</a></li>
              <div class="dropdown-divider"></div>
              <li><a class="dropdown-item" href="">បញ្ជាប់ដាច់ដោយឡែក</a></li>
            </ul>
          </li>
          <li class="nav-item cgds dropdown has-megamenu">
            <a class="nav-link cgds dropdown-toggle" href="#" id="megamenu" role="button" data-bs-toggle="dropdown"
              aria-expanded="false">
              បណ្តុំបញ្ជី<i class="bi bi-chevron-down"></i>
            </a>
            <div class="dropdown-menu megamenu p-3" aria-labelledby="megamenu">
              <div class="d-flex justify-content-start">
                <div>
                  <b>សហការបង្កើតដំណោះស្រាយឌីជីថលប្រកបដោយភាពច្នៃប្រឌិតជាមួយរដ្ឋាភិបាល</b>
                  <p>ស្វែងរកព្រឹត្តិការណ៍ ប្លុក បច្ចេកវិទ្យាប្រភពបើកចំហ និងឱកាសសហការផ្សេងទៀត។</p>
                </div>
                <div>
                  <a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="">លក្ខណៈពិសេស</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                  <a class="dropdown-item" href="#">លក្ខណៈពិសេស</a>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="search-bar d-flex align-items-center ms-auto">
          <form class="w-100" action="">
            <div class="search-wrapper d-flex ps-2">
              <input type="text">
              <button>
                <i class="bi bi-search" target="_blank"></i>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </nav>
  <div class="row m-8">
    <!-- Side Nav component -->
    <div class="col-lg-3 d-none d-lg-block">
      <nav class="sidenav cgds list-unstyled open1" aria-label="side-navigation menu">
        <ul>
          <li class="sidenav-item">
            <button class="cgds btn collapsed active" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleA" aria-expanded="false" aria-controls="collapseExampleA">
              <i class="bi bi-layers"></i>ម៉ឺនុយ
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse show" id="collapseExampleA" data-bs-parent=".open1">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link active">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
              </ul>
            </div>
          </li>
          <li class="sidenav-item">
            <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleB" aria-expanded="false" aria-controls="collapseExampleB">
              <i class="bi bi-layers"></i>ម៉ឺនុយ
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse" id="collapseExampleB" data-bs-parent=".open1">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
              </ul>
            </div>
          </li>
          <li class="sidenav-item">
            <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleC" aria-expanded="false" aria-controls="collapseExampleC">
              <i class="bi bi-layers"></i>ម៉ឺនុយ
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse" id="collapseExampleC" data-bs-parent=".open1">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
                <li><a href="#" class="nav-link">ម៉ឺនុយរង</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-lg-7">
      <!--Breadcrumb component-->
      <nav class="cgds" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>ទំព័រដើម</a></li>
          <li class="breadcrumb-item"><a href="#">បណ្ណាល័យ</a></li>
          <li class="breadcrumb-item active" aria-current="page">ទិន្នន័យ</li>
        </ol>
      </nav>
      <!--Content section-->
      <h2>ចំណងជើងទំព័រ</h2>
      <p>
        នេះគ្រាន់តែជាអក្សរឧទាហរណ៍សម្រាប់ដាក់បំពេញចន្លោះទទេរឱ្យទំព័រនេះមើលទៅឃើញស្អាតតែប៉ុំណ្ណោះ។
      </p>
      <h4>ទិដ្ឋភាពទូទៅ</h4>
      <p>
        ក្នុងយុគសម័យប្រកួតប្រជែងយ៉ាងស្វិតស្វាញដើម្បីពង្រឹងអំណាចបន្ថែម ក៏ដូចជាក្នុងការពង្រីកឥទ្ធិពលប្រទេសមហាអំណាចផ្សេងៗ
        ជាពិសេសពីសំណាក់ប្រទេសបារាំង និងប្រទេសអង់គ្លេស ដែលខំប្រឹងវាតទីឥទ្ធិពលខ្លួនទៅតាមបណ្ដារដ្ឋទន់ខ្សោយជាងខ្លួន
        ក្នុងន័យទាញយកនូវប្រយោជន៍។ ចាប់តាំងពីមានវត្តមាននៃការឈានជើងចូលរបស់បណ្ដាប្រទេសអ៊ឺរ៉ុបមកក្នុងដែនដីអាស៊ីអាគ្នេយ៍ដីគោក
        ដែលរួមមានដូចជាប្រទេសកម្ពុជា ថៃ វៀតណាម និងភូមា សង្កេតឃើញថា
        ក្នុងប្រទេសទាំងនេះមានបដិវត្តន៍ថ្មីៗកើតមានឡើងជាបន្តបន្ទាប់ ដែលជះឥទ្ធិពលយ៉ាងសម្បើមទៅលើវិស័យផ្សេងៗ
        ជាពិសេសនោះគឺវិស័យនយោបាយដែលមានទំនោរទៅរកការផ្លាស់ប្ដូរប្លែកថ្មីមួយចំពោះជនជាតិអម្បូរស្បែកស្រអែម​នៅដែនដីសុវណ្ណភូមិមួយនេះ។
        ក្នុងនោះទៀតសោតក៏ឃើញផងដែរថា បម្រែបម្រួលនេះហាក់ហុចផលជាអាវុធមុខពីរទៅលើកិច្ចការការបរទេសដោយសម្លឹងទៅរកផលប្រយោជន៌
        និងកិច្ចការពារជាតិរៀងៗខ្លួន។
      </p>
    </div>
    <!--Table of Contents section-->
    <div class="col-lg-2 d-none d-lg-block">
      <aside aria-label="Table of Content">
        <h4>នៅលើទំព័រនេះ</h4>
        <ul style="list-style: none">
          <li>
            <a href="#" style="text-decoration: none">ចំណងជើងទំព័រ</a>
            <ul>
              <li style="list-style: none">
                <a href="#" style="text-decoration: none">ទិដ្ឋភាពទូទៅ</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" style="text-decoration: none">ឧទាហរណ៍</a>
          </li>
        </ul>
      </aside>
    </div>
  </div>
  <!-- Footer component -->
  <footer class="cgds footer">
    <section class="footer-top">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="widget flex-column">
              <div class="logo">
                <img src="/assets/uncompressed_images/rachana.svg" style="width: 200px" alt="dgc logo">
              </div>
              <div class="social-icon">
                <ul>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Facebook.svg" alt="facebook-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/YouTube.svg" alt="youtube-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Telegram.svg" alt="telegram-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Tiktok.svg" alt="tiktok-icon">
                    </a>
                  </li>
                  <li>
                    <a href="">
                      <img src="/assets/uncompressed_images/icon/Linkin.svg" alt="linkin-icon">
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី១
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី២
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              ជួរទី៣
            </div>
            <ul class="links">
              <li><a href="">អំពីយើង</a></li>
              <li><a href="">អក្សរនេះសម្រាប់មើលតេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
              <li><a href="">តេស្ត</a></li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <section class="footer-bottom">
      <div class="container-fluid">
        <div class="row footer-copyrights">
          <div class="col">
            <div class="d-flex justify-content-lg-start text-start">
              DGC © 2023 ~ រក្សាសិទ្ធិដោយគណៈកម្មាធិការរដ្ឋាភិបាលឌីជីថល
            </div>
          </div>
          <div class="col">
            <dev class="d-flex justify-content-lg-end text-end">
              <ul>
                <li><a href="" target="_blank" rel="noopener noreferrer">រាយការណ៍ពីភាពខ្វះខាត</a></li>
                <li><a href="">ឯកជនភាព</a></li>
                <li><a href="">លក្ខខណ្ឌនៃប្រើប្រាស់</a></li>
              </ul>
            </dev>
          </div>
        </div>
      </div>
    </section>
  </footer>
</div>