Detail Page Side Nav

 
<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="">Sign In</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="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" aria-current="page" href="">Link</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">
              Dropdown <i class="bi bi-chevron-down"></i>
            </a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
              <li><a class="dropdown-item" href="">Action</a></li>
              <li><a class="dropdown-item" href="">Another Action</a></li>
              <li><a class="dropdown-item" href="">Something</a></li>
              <div class="dropdown-divider"></div>
              <li><a class="dropdown-item" href="">Seperated Link</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">
              Megamenu<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>Co-create innovative digital solutions with the Government</b>
                  <p>Discover events, blogs, open-source technologies and other collaboration opportunities</p>
                </div>
                <div>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                  <a class="dropdown-item" href="">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                </div>
                <div>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</a>
                  <a class="dropdown-item" href="#">Features</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 open2" 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="#collapseExampleD" aria-expanded="false" aria-controls="collapseExampleD">
              Sub menu
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse show" id="collapseExampleD" data-bs-parent=".open2">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">Sub menu item</a></li>
                <li><a href="#" class="nav-link active">Sub menu item</a></li>
                <li><a href="#" class="nav-link">Sub menu item</a></li>
              </ul>
            </div>
          </li>
          <li class="sidenav-item">
            <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleE" aria-expanded="false" aria-controls="collapseExampleE">
              Sub menu
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse" id="collapseExampleE" data-bs-parent=".open2">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">Sub menu item</a></li>
                <li><a href="#" class="nav-link">Sub menu item</a></li>
                <li><a href="#" class="nav-link">Sub menu item</a></li>
              </ul>
            </div>
          </li>
          <li class="sidenav-item">
            <button class="cgds btn collapsed" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseExampleF" aria-expanded="false" aria-controls="collapseExampleF">
              Sub menu
              <i class="bi bi-chevron-down"></i>
            </button>
            <div class="collapse" id="collapseExampleF" data-bs-parent=".open2">
              <ul class="list-unstyled">
                <li><a href="#" class="nav-link">Sub menu item</a></li>
                <li><a href="#" class="nav-link">Sub menu item</a></li>
                <li><a href="#" class="nav-link">Sub menu item</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </nav>
    </div>
    <div class="col-lg-9">
      <!-- Breadcrumb component -->
      <nav class="cgds" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#"><i class="bi bi-house"></i>Home</a></li>
          <li class="breadcrumb-item"><a href="#">Library</a></li>
          <li class="breadcrumb-item active" aria-current="page">Data</li>
        </ol>
      </nav>
      <!-- Content section -->
      <h2>Page heading</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <h4>Overview</h4>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </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">
              Column 1
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              Column 2
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</a></li>
            </ul>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6">
            <div class="title">
              Column 3
            </div>
            <ul class="links">
              <li><a href="">About Us</a></li>
              <li><a href="">This is a super long link</a></li>
              <li><a href="">Test</a></li>
              <li><a href="">Test</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 ~ All rights reserved. Digital Government Committee.<br>
            </div>
          </div>
          <div class="col">
            <dev class="d-flex justify-content-lg-end text-end">
              <ul>
                <li><a href="" target="_blank" rel="noopener noreferrer">Report Vulnerability</a></li>
                <li><a href="">Privacy Statement</a></li>
                <li><a href="">Terms of use</a></li>
              </ul>
            </dev>
          </div>
        </div>
      </div>
    </section>
  </footer>
</div>