Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

176 linhas
9.4 KiB

  1. import React, { useState } from "react";
  2. import { Link } from 'react-scroll'
  3. // import Link from '@/utils/ActiveLink';
  4. import * as Icon from 'react-feather';
  5. const NavbarStyleFour = () => {
  6. const [menu, setMenu] = React.useState(true)
  7. const toggleNavbar = () => {
  8. setMenu(!menu)
  9. }
  10. React.useEffect(() => {
  11. let elementId = document.getElementById("header");
  12. document.addEventListener("scroll", () => {
  13. if (window.scrollY > 170) {
  14. elementId.classList.add("is-sticky");
  15. } else {
  16. elementId.classList.remove("is-sticky");
  17. }
  18. });
  19. window.scrollTo(0, 0);
  20. })
  21. const classOne = menu ? 'collapse navbar-collapse' : 'collapse navbar-collapse show';
  22. const classTwo = menu ? 'navbar-toggler navbar-toggler-right collapsed' : 'navbar-toggler navbar-toggler-right';
  23. return (
  24. <header id="header" className="headroom navbar-color-white navbar-style-four">
  25. <div className="startp-nav">
  26. <div className="container">
  27. <nav className="navbar navbar-expand-md navbar-light">
  28. <Link to="business_partner" href="/#">
  29. <a onClick={toggleNavbar} className="navbar-brand">
  30. <img src="/images/TBG-Home/Blue.png" width="250px" alt="logo" />
  31. </a>
  32. </Link>
  33. <button
  34. onClick={toggleNavbar}
  35. className={classTwo}
  36. type="button"
  37. data-toggle="collapse"
  38. data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  39. aria-expanded="false"
  40. aria-label="Toggle navigation"
  41. >
  42. <span className="icon-bar top-bar"></span>
  43. <span className="icon-bar middle-bar"></span>
  44. <span className="icon-bar bottom-bar"></span>
  45. </button>
  46. <div className={classOne} id="navbarSupportedContent">
  47. <ul className="navbar-nav ms-auto">
  48. <li className="nav-item">
  49. <Link href="/#" to="home" spy={true} smooth={true}>
  50. <a onClick={e => e.preventDefault()} className="nav-link">
  51. Home
  52. </a>
  53. </Link>
  54. </li>
  55. <li className="nav-item">
  56. <Link href="/#" to="business_partner" spy={true} smooth={true}>
  57. <a onClick={e => e.preventDefault()} className="nav-link">
  58. Business Partner
  59. </a>
  60. </Link>
  61. {/* <ul className="dropdown-menu">
  62. <li className="nav-item">
  63. <Link target="_blank" activeClassName="active" style={{marginTop:"-10px"}}>
  64. <a href="/yamaha" className="nav-link" target="_blank">Thamrin Brother's - Yamaha</a>
  65. </Link>
  66. </li>
  67. <li className="nav-item">
  68. <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
  69. <a target="_blank" onClick={toggleNavbar} className="nav-link">Nusa Sarana Citra Bakti - Suzuki</a>
  70. </Link>
  71. </li>
  72. <li className="nav-item">
  73. <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
  74. <a target="_blank" onClick={toggleNavbar} className="nav-link">Citra Lestari Mobilindo - Hino</a>
  75. </Link>
  76. </li>
  77. <li className="nav-item">
  78. <Link href="/coming-soon" activeClassName="active" style={{marginTop:"-20px"}}>
  79. <a target="_blank" onClick={toggleNavbar} className="nav-link">Citra Thamrin Motor - Honda</a>
  80. </Link>
  81. </li>
  82. <li className="nav-item">
  83. <Link href="https://www.thamrin.mercedes-benz.co.id/en/desktop/passenger-cars.html" activeClassName="active" style={{marginTop:"-20px"}}>
  84. <a target="_blank" onClick={toggleNavbar} className="nav-link">Thamrin Citra Abadi - Mercedes Benz</a>
  85. </Link>
  86. </li>
  87. <li className="nav-item">
  88. <Link href="https://www.instagram.com/palembangindahmall/?hl=id" activeClassName="active" style={{marginTop:"-20px"}}>
  89. <a target="_blank" onClick={toggleNavbar} className="nav-link">Musi Lestari Indo Makmur - Palembang Indah Mall</a>
  90. </Link>
  91. </li>
  92. <li className="nav-item">
  93. <Link href="http://www.emilia-hotel.com/" activeClassName="active" style={{marginTop:"-20px"}}>
  94. <a target="_blank" onClick={toggleNavbar} className="nav-link">Musi Indah Makmur - Emilia Hotel</a>
  95. </Link>
  96. </li>
  97. <li className="nav-item">
  98. <Link href="http://bprberkatsejati.com/" activeClassName="active" style={{marginTop:"-20px"}}>
  99. <a target="_blank" onClick={toggleNavbar} className="nav-link">Bank Perkreditan Rakyat - Berkat Sejati</a>
  100. </Link>
  101. </li>
  102. <li className="nav-item">
  103. <Link href="http://homes.thamrin.xyz/" activeClassName="active" style={{marginTop:"-20px"}}>
  104. <a target="_blank" onClick={toggleNavbar} className="nav-link">Thamrin Homes</a>
  105. </Link>
  106. </li>
  107. </ul> */}
  108. </li>
  109. <li className="nav-item">
  110. <Link href="/#" to="industri" spy={true} smooth={true}>
  111. <a onClick={e => e.preventDefault()} className="nav-link">
  112. Industri We Serve
  113. </a>
  114. </Link>
  115. </li>
  116. {/* <li className="nav-item">
  117. <Link href="/#" activeClassName="active">
  118. <a onClick={e => e.preventDefault()} className="nav-link">
  119. Founder
  120. </a>
  121. </Link>
  122. </li>
  123. <li className="nav-item">
  124. <Link href="/#">
  125. <a onClick={e => e.preventDefault()} className="nav-link">
  126. Latest News
  127. </a>
  128. </Link>
  129. </li> */}
  130. <li className="nav-item">
  131. <Link href="/#" to="gallery" spy={true} smooth={true}>
  132. <a onClick={e => e.preventDefault()} className="nav-link">
  133. Gallery
  134. </a>
  135. </Link>
  136. </li>
  137. <li className="nav-item">
  138. <Link href="/#" to="about-us" spy={true} smooth={true}>
  139. <a onClick={e => e.preventDefault()} className="nav-link">
  140. About Us
  141. </a>
  142. </Link>
  143. </li>
  144. </ul>
  145. </div>
  146. </nav>
  147. </div>
  148. </div>
  149. </header>
  150. );
  151. }
  152. export default NavbarStyleFour;