Given following code for the header and menu:
<?php
$this->load->model('category_model');

$categories = $this->category_model->get_categories(null, 8);
$language = get_languages();
$cookie_lang = $this->input->cookie('language', TRUE);


/*

if(strpos($_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'], '/member-contacts') !== false){
    // Do nothing
}
else if(strpos($_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'], '/blogs') !== false){
    // Do nothing
}
else if(strpos($_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'], '/login') !== true){
    header("Location: " . base_url('/admin/login'));
}
*/


//header("Location: https://comfortme.com.hk/home/lang/tc");
$logo = get_settings('logo');
$web_settings = get_settings('web_settings', true);
$auth_settings = get_settings('authentication_settings', true);
$point = (isset($this->data['user']->id)) ? get_member_point($this->data['user']->id) : 0;
?>

<!-- Loading Leading Overlay -->
<!--
<div id="loading-modal-overlay" class="loading-modal-overlay">
    <div class="loading-modal-content">
        <img src="<?= get_image_url($logo, 'thumb', 'sm'); ?>" alt="Loading Logo" class="loading-modal-logo" />
    </div>
</div>
-->

<div class="top_panel_fixed_wrap"></div>
<!-- Overlay -->
<div class="new-header-menu-overlay" id="new-header-menu-overlay" tabindex="-1" aria-hidden="true"></div>
<header class="new-header-top_panel_wrap new-header-top_panel_style_6 new-header-scheme_original" style="border-bottom: 1px solid #ddd;">
  <div class="new-header-top_panel_wrap_inner new-header-top_panel_inner_style_6 new-header-top_panel_position_above">
    <div class="new-header-top_panel_middle">
      <div class="new-header-content_wrap">

        <div class="new-header-contact_logo">
          <div class="new-header-logo">
            <a href="<?=base_url()?>" style="display:flex; align-items:center; text-decoration:none; color:black;">
              <img src="<?= get_image_url($logo, 'thumb', 'sm'); ?>" alt="Logo" style="height:40px; margin-right:8px;" />
              <span class="new-header-logo_name" style="font-weight: 800; font-size: 1.25rem;color:#ba2d2d;font-weight:bold;">香港長沙聯誼會</span>
            </a>
          </div>
        </div>

        <!-- Mobile controls: hamburger & mobile login -->
        <div class="new-header-mobile_controls">
          <button aria-label="Toggle menu" class="new-header-hamburger" id="new-header-hamburger" type="button" aria-expanded="false" aria-controls="new-header-nav">
            <span></span>
            <span></span>
            <span></span>
          </button>
          <div class="new-header-contact_button_mobile">
            <a href="<?=base_url('login')?>" class="new-header-first_button" style="
              color: black; 
              text-decoration: none; 
              padding: 8px 15px; 
              border: 1.5px solid black; 
              border-radius: 4px; 
              font-weight: 600;
              white-space: nowrap;
              margin-right:10px;
              user-select: none;
              transition: background-color 0.3s ease;
            ">登入</a>
          </div>
        </div>

        <!-- Desktop menu and mobile menu -->
        <nav class="new-header-menu_main_nav_area new-header-menu_hover_fade" id="new-header-nav" aria-label="Primary" role="navigation">
          <ul id="new-header-menu_main" class="new-header-menu_main_nav" role="menubar">
            <li class="new-header-menu-item" role="none">
              <a href="<?=base_url()?>" role="menuitem" tabindex="0" class="new-header-menu-link">主頁</a>
            </li>
            <li class="new-header-menu-item" role="none">
              <a href="<?=base_url('home/about_us')?>" role="menuitem" tabindex="0" class="new-header-menu-link">關於我們</a>
            </li>
            <li class="new-header-menu-item" role="none">
              <a href="<?=base_url('home/about_structure')?>" role="menuitem" tabindex="0" class="new-header-menu-link">組織架構</a>
            </li>
            <li class="new-header-menu-item" role="none">
              <a href="<?=base_url('blogs')?>" role="menuitem" tabindex="0" class="new-header-menu-link">文章</a>
            </li>
            <li class="new-header-menu-item" role="none">
              <a href="<?=base_url('home/contact-us')?>" role="menuitem" tabindex="0" class="new-header-menu-link">聯絡我們</a>
            </li>
            <!-- Mobile only login inside menu -->
            <li class="new-header-menu-item" role="none" style="margin-top: 20px; display:none;">
              <a href="<?=base_url('login')?>" role="menuitem" tabindex="0" class="new-header-menu-link" style="
                border: 1.5px solid black;
                padding: 8px 15px;
                border-radius: 4px;
                font-weight: 600;
                color: black;
                white-space: nowrap;
                margin-right: 10px;
                display: inline-block;
                text-align: center;
              ">登入</a>
            </li>
          </ul>
        </nav>

        <!-- Desktop login button -->
        <div class="new-header-contact_button">
          <a href="<?=base_url('login')?>" class="new-header-first_button" style="font-weight:600; text-decoration:none; color:black;">登入</a> 
        </div>

      </div>
    </div>
  </div>
</header>
<script>
  (function() {
    const hamburger = document.getElementById('new-header-hamburger');
    const nav = document.getElementById('new-header-nav');
    const overlay = document.getElementById('new-header-menu-overlay');

    function closeMenu() {
      hamburger.setAttribute('aria-expanded', 'false');
      nav.classList.remove('new-header-active');
      overlay.classList.remove('new-header-active');
      overlay.setAttribute('aria-hidden', 'true');
    }

    function openMenu() {
      hamburger.setAttribute('aria-expanded', 'true');
      nav.classList.add('new-header-active');
      overlay.classList.add('new-header-active');
      overlay.setAttribute('aria-hidden', 'false');
    }

    hamburger.addEventListener('click', () => {
      const expanded = hamburger.getAttribute('aria-expanded') === 'true';
      if (expanded) {
        closeMenu();
      } else {
        openMenu();
      }
    });

    // Auto close mobile menu on menu link click
    document.querySelectorAll('#new-header-nav a').forEach(link => {
      link.addEventListener('click', () => {
        if (window.innerWidth <= 768) {
          closeMenu();
        }
      });
    });

    // Close menu if clicking outside menu (on overlay)
    overlay.addEventListener('click', closeMenu);

    // Close menu on ESC key
    document.addEventListener('keydown', e => {
      if (e.key === 'Escape') {
        if (nav.classList.contains('new-header-active')) {
          closeMenu();
        }
      }
    });

    // Close menu on resize desktop
    window.addEventListener('resize', () => {
      if (window.innerWidth > 768 && nav.classList.contains('new-header-active')) {
        closeMenu();
      }
    });
  })();
</script>

/* Base reset and styles */
  .new-header-menu_main_nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
  }
  .new-header-menu-item {
    margin: 0;
  }
  .new-header-menu-link {
    text-decoration: none;
    color: #000 !important;
    font-weight: 600;
    padding: 8px 4px;
    display: inline-block;
  }
  .new-header-menu-link:hover,
  .new-header-menu-link:focus {
    color: #007BFF;
    outline: none;
  }


  .new-header-logo{
	padding-left: 10px;
  }

  /* --- MOBILE ONLY --- */
  #new-header-nav {
    display: none;
    position: fixed;
    top: 60px; /* header height */
    right: 0;
    width: 60vw;
    height: calc(100% - 60px);
    background: white;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 1100;
    flex-direction: column;
    padding: 20px;
  }

  #new-header-nav.new-header-active {
    display: flex;
  }

  #new-header-menu-overlay {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
  }
  #new-header-menu-overlay.new-header-active {
    display: block;
  }

  .new-header-mobile_controls {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Hide desktop login button on mobile */
  .new-header-contact_button {
    border: 2px solid;
    padding: 1px 7px;
    border-radius: 6px;
	display: none;
  }

  .new-header-contact_button:hover {
    scale: 1.05;
  }

  .new-header-content_wrap {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 0;
	  height: 60px;
    }

  .new-header-menu_main_nav{
	flex-direction: column;
  }

  /* --- DESKTOP ONLY --- */
  @media screen and (min-width: 769px) {
    /* Show desktop nav as horizontal flex */
    #new-header-nav {
      display: flex !important;
      position: static;
      width: auto;
      height: auto;
      box-shadow: none;
      padding: 0;
      flex-direction: row;
      align-items: center;
	  height: 60px;
    }

	.new-header-menu_main_nav{
		flex-direction: row;
	}
    /* Hide mobile controls on desktop */
    .new-header-mobile_controls {
      display: none;
    }
    /* Show desktop login button */
    .new-header-contact_button {
      display: block;
      white-space: nowrap;
      margin-left: 20px;
	  margin-right: 10px;
    }
    /* The overlay hidden on desktop */
    #new-header-menu-overlay {
      display: none !important;
    }

    /* General header content flex container */
    

    /* Align nav to right */
    nav.new-header-menu_main_nav_area {
      order: 2;
      flex-grow: 1;
      display: flex;
      justify-content: flex-end;
    }
    /* Align login button on far right */
    .new-header-contact_button {
      order: 3;
      margin-right: 20px;
    }
    /* Keep logo on left (order 1) */
    .new-header-contact_logo {
      order: 1;
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
  }

  /* Hamburger button styling */
  .new-header-hamburger {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    height: 22px;
    background: transparent;
    border: none;
    padding: 0;
	background-color: unset !important;
  }
  .new-header-hamburger span {
    width: 25px;
    height: 3px;
    background-color: black;
    border-radius: 2px;
    display: block;
  }

I want to add the sub-menu support to the current menu, keep the responsive design for pc, mobile and tablet.
and replace the login button with the account menu (the login status can be check by $this->ion_auth->logged_in()
and user can logout by the link <?=base_url("login/logout")?>

please provide the code with the above functions