{"version":3,"sources":["images/icons/BellSimpleNotification.svg","images/icons/MagnifyingGlass.svg","containers/searchBar/NavbarwithoutLogin/style.js","containers/searchBar/NavbarwithoutLogin/menu.js","containers/searchBar/NavbarwithoutLogin/index.js","containers/searchBar/index.js","utils/getHeaderTitle.js"],"names":["SearchBarContainer","styled","div","props","opacity","SearchBarTop","theme","gray6","primary2","ButtonRegister","Button","ButtonLogin","TooltipStyleNav","TypoGradientNav","Typography","NotiIcon","white","isSamePath","css","BGcarousel","Icon","SlidebarDetail","id","label","link","icon","SearchLandingWhite","activeIcon","SearchLandingBlue","StudentLandingWhite","StudentLandingBlue","TeacherLandingWhite","TeacherLandingBlue","Language","LanguageInactive","LoginLandingWhite","LoginLandingBlue","Navbar","isOpacity","useState","setOpacity","opacityMobile","setOpacityMobile","toggle","setToggle","pathname","get","location","useEffect","handleScroll","position","window","scrollY","currentOpacity","Math","max","min","currentOpacityMobile","addEventListener","removeEventListener","renderLogo","to","type","margin","alt","width","style","alignItems","nowrap","searchbarLandingPage","pathLandingPage","justifyContent","marginLeft","fontSize","open","onSetOpen","pullLeft","sidebar","DrawerProfile","onRequestClose","menu","styles","root","overflow","zIndex","overflowY","overlay","content","display","padding","onClick","src","ListIcon","marginBottom","minWidth","Modal","setAppElement","container","top","bottom","right","left","options","value","SearchBar","state","showProfileDrawer","showNotiPopup","showRolePopup","showSearchMenu","showGoback","showLanguage","showChangeRoleIntro","handleTogglePopup","key","setState","prevState","handleToggleChangeRole","toggleLanguage","toggleDrawer","prev","getDefaultSchoolId","appUser","defaultSchool","_get","find","item","isDefault","renderRole","isTeacher","match","isTeacherPath","url","startsWith","placement","trigger","className","tooltipShown","onVisibilityChange","tooltip","menus","handleToggle","RoleSelector","isEmpty","renderMenu","handleLanguageChange","updateLocale","renderLanguage","SocialIcon","locale","toUpperCase","onOutsite","handleChange","searchable","renderSearchInput","SearchInput","isHeaderHider","regexCourse","RegExp","test","matchMedia","matches","getPosition","onStart","a","updateProfile","schoolIntro","payload","skipedChangeRole","Error","onExit","innerWidth","onBeforeExit","openModal","size","onOpenShowInstructor","this","query","URLSearchParams","search","JSON","parse","localStorage","getItem","ACCESS_TOKEN","fetchMe","params","schoolId","getNotifications","learnerLastLogin","isLiff","showInstructor","onCloseShowInstructor","sidebarOpen","header","getHeaderTitle","isFeedPage","paramsUrl","split","console","log","isOpen","isHide","isShowShadow","h3","title","searchbar","path","NotificationIcon","count","getImageUrl","displayWidth","SearchIcon","marginRight","onClose","Component","selection","store","select","models","AppUser","connect","Liff","Notification","Sidebar","ModalState","openProfileMenu","Intro","changeRole","dispatch","withRouter"],"mappings":"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","file":"static/js/204.ac33400c.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/BellSimpleNotification.e4841802.svg\";","export default __webpack_public_path__ + \"static/media/MagnifyingGlass.9c7d6b90.svg\";","import styled, { css } from 'styled-components'\nimport { Typography, Button, Icon } from 'components'\nimport { Col } from 'antd'\nimport BGcarousel from 'images/BGcarouselLanding.svg'\nimport theme from 'theme'\n\nconst SearchBarContainer = styled.div`\n  display: flex;\n  justify-content: space-between;\n  height: 56px;\n  width: 100%;\n  position: fixed;\n  top: 0;\n  z-index: 5;\n  /* background-image: ${(props) =>\n    `linear-gradient(to right, rgba(108, 81, 254, ${props.opacity}), rgba(64, 177, 255, ${props.opacity}))`}; */\n  background-color: #00b8e6;\n\n  @media (max-width: 600px) {\n    padding: 8px 16px;\n  }\n\n  @media (min-width: 601px) and (max-width: 1024px) {\n    padding: 8px 32px;\n  }\n\n  @media (min-width: 1025px) {\n    padding: 8px 144px;\n  }\n`\n\nconst SearchBarTop = styled.div`\n  flex: 1;\n  display: flex;\n  align-items: center;\n\n  .notification-icon {\n    fill: ${(props) => props.theme.gray6};\n    width: 32px;\n    height: 32px;\n    margin-top: 12px;\n  }\n\n  .notification-icon:hover {\n    fill: ${(props) => props.theme.primary2};\n  }\n\n  .row {\n    display: flex;\n    align-items: center;\n  }\n\n  > :first-child {\n    margin-left: 0px;\n  }\n\n  .centre {\n    display: flex;\n    align-items: center;\n  }\n\n  .justify {\n    justify-content: space-evenly;\n    @media (max-width: 660px) {\n      justify-content: flex-end;\n    }\n  }\n\n  .full {\n    flex: 1;\n  }\n\n  img:hover {\n    cursor: pointer;\n  }\n\n  /* > :last-child:hover {\n    cursor: pointer;\n  } */\n\n  @media (max-width: 1024px) {\n    display: flex;\n    justify-content: space-between;\n    button {\n      padding: 0px;\n      font-size: ${({ theme }) => theme['text-xxs']};\n    }\n\n    img {\n      width: 20px;\n      height: 20px;\n    }\n\n    > :not(:last-child) {\n      margin-right: 10px;\n    }\n\n    > :last-child {\n      width: 30px;\n      height: 30px;\n      /* margin-right: 10px; */\n    }\n  }\n`\n\nconst ButtonRegister = styled(Button)`\n  background-color: transparent;\n  border-radius: 8px;\n  border: 1px solid var(--black-white-100, #fff);\n  width: 130px !important;\n  height: 40px !important;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: 601px) {\n    width: 90px !important;\n  }\n`\n\nconst ButtonLogin = styled(Button)`\n  background-color: white !important;\n  border-radius: 8px;\n  border: 1px solid var(--black-white-100, #fff);\n  width: 130px !important;\n  height: 40px !important;\n  justify-content: center;\n  align-items: center;\n  @media (max-width: 601px) {\n    width: 90px !important;\n  }\n`\n\nconst TooltipStyleNav = styled(Button)`\n  background: transparent;\n  width: 50px;\n`\n\nconst TypoGradientNav = styled(Typography)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: linear-gradient(90deg, #6c51fe, #40b1ff);\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n`\n\nconst TypoWhiteNav = styled(Typography)`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: ${theme.white};\n  &:hover,\n  &:focus {\n    color: ${theme.white};\n    text-decoration: underline;\n    text-decoration-thickness: 2.5px;\n    text-decoration-color: ${theme.white};\n    text-underline-offset: 2px;\n    text-shadow: rgba(0, 0, 0, 0.5) 0 4px 4px !important;\n    font-weight: 600;\n  }\n  ${({ isSamePath }) => {\n    if (isSamePath) {\n      return css`\n        text-shadow: rgba(0, 0, 0, 0.5) 0 4px 4px !important;\n        font-weight: 700;\n        line-height: 22px;\n      `\n    }\n  }}\n`\n\nconst ColCarousel = styled(Col)`\n  background-image: url(${BGcarousel});\n  background-size: 100%, 100%, contain;\n  background-repeat: no-repeat;\n  padding-bottom: 100px;\n  @media (max-width: 600px) {\n    padding-bottom: 50px;\n  }\n`\nconst ButtonStyleNav = styled(Button)`\n  margin-left: 5px;\n  font-weight: 400;\n  color: ${theme.white};\n  background: transparent;\n`\n\nconst NotiIcon = styled(Icon)`\n  width: 20px;\n  height: 20px;\n`\nexport {\n  SearchBarContainer,\n  SearchBarTop,\n  ButtonRegister,\n  ButtonLogin,\n  TooltipStyleNav,\n  TypoGradientNav,\n  ColCarousel,\n  ButtonStyleNav,\n  NotiIcon,\n  TypoWhiteNav,\n}\n","import SearchLandingWhite from 'images/icons/IconLandingPage/SearchLandingWhite.svg'\nimport SearchLandingBlue from 'images/icons/IconLandingPage/SearchLandingBlue.svg'\n\nimport StudentLandingBlue from 'images/icons/IconLandingPage/StudentLandingBlue.svg'\nimport StudentLandingWhite from 'images/icons/IconLandingPage/StudentLandingWhite.svg'\n\nimport TeacherLandingBlue from 'images/icons/IconLandingPage/TeacherLandingBlue.svg'\nimport TeacherLandingWhite from 'images/icons/IconLandingPage/TeacherLandingWhite.svg'\n\nimport LoginLandingBlue from 'images/icons/IconLandingPage/LoginLandingBlue.svg'\nimport LoginLandingWhite from 'images/icons/IconLandingPage/LoginLandingWhite.svg'\n\nimport Language from 'images/icons/icon-language.svg'\nimport LanguageInactive from 'images/icons/icon-languageinactive.svg'\nexport const SlidebarDetail = [\n  {\n    id: 'searchbar.allcourse',\n    label: 'Browse',\n    link: '/landingFindingCourse',\n    icon: SearchLandingWhite,\n    activeIcon: SearchLandingBlue,\n  },\n  {\n    id: 'Landing.student',\n    label: 'Student',\n    link: '/landingStudent',\n    icon: StudentLandingWhite,\n    activeIcon: StudentLandingBlue,\n  },\n  {\n    id: 'Landing.teacher',\n    label: 'Teacher',\n    link: '/landingTeacher',\n    icon: TeacherLandingWhite,\n    activeIcon: TeacherLandingBlue,\n  },\n  {\n    id: 'account.lang',\n    label: 'Language',\n    icon: Language,\n    activeIcon: LanguageInactive,\n  },\n  {\n    id: 'login.title',\n    label: 'Login',\n    link: '/user/login',\n    icon: LoginLandingWhite,\n    activeIcon: LoginLandingBlue,\n  },\n]\n\nexport const NavbarMenu = [\n  {\n    id: 'searchbar.allcourse',\n    label: 'Browse',\n    link: '/landingFindingCourse',\n  },\n  {\n    id: 'Landing.student',\n    label: 'Student',\n    link: '/landingStudent',\n  },\n  {\n    id: 'Landing.teacher',\n    label: 'Teacher',\n    link: '/landingTeacher',\n  },\n]\n","/* eslint-disable no-unused-vars */\nimport React, { useEffect, useState } from 'react'\nimport { Link, withRouter } from 'react-router-dom'\nimport ErrorBoundary from 'components/errorBoundary'\nimport Logo from 'components/logo'\n// import { connect } from 'react-redux'\nimport {\n  SearchBarContainer,\n  SearchBarTop,\n  NotiIcon,\n  ButtonRegister,\n  ButtonStyleNav,\n  TooltipStyleNav,\n  ButtonLogin,\n  TypoGradientNav,\n  TypoWhiteNav,\n} from './style'\nimport { MobileAndTablet, LargeDesktop, Custom } from 'utils/displayResponsive'\nimport ListIcon from 'images/icons/IconLandingPage/ListLandingWhite.svg'\nimport LibSidebar from 'react-sidebar'\nimport DrawerProfile from 'components/DrawerProfile/index'\nimport { SlidebarDetail, NavbarMenu } from './menu'\nimport get from 'lodash/get'\nimport Button from 'components/button'\n\nconst Navbar = ({ isOpacity = false }) => {\n  const [scrollPosition, setScrollPosition] = useState(0)\n  const [opacity, setOpacity] = useState(0)\n  const [opacityMobile, setOpacityMobile] = useState(0)\n  const [toggle, setToggle] = useState(false)\n  const pathname = get(location, 'pathname', false)\n\n  useEffect(() => {\n    if (!isOpacity) {\n      const handleScroll = () => {\n        const position = window.scrollY\n        const maxScroll = 500 // ปรับค่านี้เพื่อควบคุมช่วงการเลื่อน\n        const maxScrollMobile = 280\n        const currentOpacity = Math.max(0, Math.min(1, position / maxScroll)) // รักษาค่าความทึบให้อยู่ระหว่าง 0 และ 1\n        const currentOpacityMobile = Math.max(0, Math.min(1, position / maxScrollMobile)) // รักษาค่าความทึบให้อยู่ระหว่าง 0 และ 1\n        setOpacity(currentOpacity)\n        setOpacityMobile(currentOpacityMobile)\n      }\n\n      window.addEventListener('scroll', handleScroll)\n\n      return () => {\n        window.removeEventListener('scroll', handleScroll)\n      }\n    } else {\n      setOpacity(1)\n      setOpacityMobile(1)\n    }\n  }, [isOpacity])\n\n  const renderLogo = () => {\n    return (\n      <>\n        <LargeDesktop>\n          <Link to=\"/\">\n            <Logo type=\"primary5\" margin=\"0px 20px 0px 0px\" alt=\"classwin-logo\" width=\"40\" />\n          </Link>\n        </LargeDesktop>\n        <MobileAndTablet>\n          <Link to=\"/\">\n            <Logo\n              style={{ alignItems: 'center' }}\n              type=\"primary5\"\n              margin=\"0px 7px 0px 0px\"\n              alt=\"classwin-logo\"\n              width=\"40\"\n            />\n          </Link>\n        </MobileAndTablet>\n      </>\n    )\n  }\n  const closeSlidebar = () => {\n    setToggle(!toggle)\n  }\n  return (\n    <ErrorBoundary>\n      <LargeDesktop>\n        <SearchBarContainer opacity={opacity}>\n          <SearchBarTop>\n            {renderLogo()}\n            {/* {NavbarMenu.map((item, idx) => {\n              const isSamePath = pathname.startsWith(item.link)\n              return (\n                <Link key={idx} to={item.link} data-intro=\"feed4\">\n                  <ButtonStyleNav isSamePath={isSamePath} nowrap id={item.id}>\n                    <TypoWhiteNav isSamePath={isSamePath} id={item.id}>\n                      {item.label}\n                    </TypoWhiteNav>\n                  </ButtonStyleNav>\n                </Link>\n              )\n            })} */}\n\n            <Link to=\"/landingFindingCourse\">\n              <Button\n                nowrap\n                id=\"searchbar.allcourse\"\n                searchbarLandingPage\n                pathLandingPage={location.pathname === '/landingFindingCourse' ? true : false}\n              >\n                Browse\n              </Button>\n            </Link>\n            <Link to=\"/landingStudent\">\n              <Button\n                nowrap\n                id=\"Landing.student\"\n                searchbarLandingPage\n                pathLandingPage={location.pathname === '/landingStudent' ? true : false}\n              >\n                Student\n              </Button>\n            </Link>\n            <Link to=\"/landingTeacher\">\n              <Button\n                nowrap\n                id=\"Landing.teacher\"\n                searchbarLandingPage\n                pathLandingPage={location.pathname === '/landingTeacher' ? true : false}\n              >\n                Teacher\n              </Button>\n            </Link>\n          </SearchBarTop>\n          <SearchBarTop style={{ justifyContent: 'flex-end' }}>\n            <Link to=\"/user/register\">\n              <ButtonRegister>สมัครสมาชิก</ButtonRegister>\n            </Link>\n            <Link to=\"/user/login\">\n              <ButtonLogin style={{ marginLeft: 10 }}>\n                <TypoGradientNav fontSize=\"text-base\">เข้าสู่ระบบ</TypoGradientNav>\n              </ButtonLogin>\n            </Link>\n          </SearchBarTop>\n        </SearchBarContainer>\n      </LargeDesktop>\n\n      <MobileAndTablet>\n        <LibSidebar\n          open={toggle}\n          onSetOpen={closeSlidebar}\n          pullLeft\n          sidebar={\n            <DrawerProfile\n              onRequestClose={() => setToggle(false)}\n              menu={SlidebarDetail}\n              pathname={pathname}\n            />\n          }\n          styles={{\n            root: {\n              overflow: 'unset',\n            },\n            sidebar: {\n              zIndex: 300,\n              position: 'fixed',\n              overflowY: 'hidden',\n            },\n            overlay: {\n              zIndex: 250,\n            },\n            content: {\n              position: 'absolute',\n              overflowY: 'unset',\n            },\n          }}\n        >\n          <SearchBarContainer opacity={opacityMobile}>\n            <SearchBarTop>\n              <TooltipStyleNav\n                style={{ display: 'flex', justifyContent: 'flex-start', padding: 0 }}\n                onClick={() => setToggle(true)}\n              >\n                <NotiIcon src={ListIcon} alt=\"notification-icon\"></NotiIcon>\n              </TooltipStyleNav>\n            </SearchBarTop>\n            <SearchBarTop style={{ justifyContent: 'center', marginBottom: '10px' }}>\n              {renderLogo()}\n            </SearchBarTop>\n            <SearchBarTop style={{ justifyContent: 'flex-end' }}>\n              <Custom minWidth={430}>\n                <Link to=\"/user/register\">\n                  <ButtonRegister>สมัครสมาชิก</ButtonRegister>\n                </Link>\n              </Custom>\n              <ButtonLogin>\n                <Link to=\"/user/login\">\n                  <TypoGradientNav fontSize=\"text-base\">เข้าสู่ระบบ</TypoGradientNav>\n                </Link>\n              </ButtonLogin>\n            </SearchBarTop>\n          </SearchBarContainer>\n        </LibSidebar>\n      </MobileAndTablet>\n    </ErrorBoundary>\n  )\n}\n\nexport default Navbar\n","/* eslint-disable no-unused-vars */\nimport React, { Component } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'react-redux'\nimport _get from 'lodash/get'\n\nimport Modal from 'react-modal'\nimport { withRouter, Link } from 'react-router-dom'\nimport isEmpty from 'lodash/isEmpty'\nimport getImageUrl from '../../utils/getImageUrl'\nimport getHeaderTitle from '../../utils/getHeaderTitle'\nimport ErrorBoundary from '../../components/errorBoundary'\nimport Avatar from '../../components/avatar/loadable'\nimport Logo from '../../components/logo'\n// import LibSidebar from 'react-sidebar'\n// import DrawerProfile from '../../components/DrawerProfile'\nimport { MiniBadge } from '../../components/styledComponents'\nimport {\n  SearchBarContainer,\n  SearchBarTop,\n  SearchFormContainer,\n  LanguageGroup,\n  Typography,\n  Dropdown,\n  ButtonLang,\n  NotiIcon,\n  NotiContainer,\n  ContainerAvatar,\n} from './styles'\n// import theme from 'theme'\nimport RolePopup from 'components/rolePopup/loadable'\nimport NotificationPopup from 'components/notificationPopup/loadable'\n// import { popupMenus } from './popupMenus'\nimport ModalMobileNoti from './modalMobileNoti'\n// import Intro, { IntroContent } from 'components/intro'\nimport Button from 'components/button'\nimport { MobileAndTablet, LargeDesktop } from 'utils/displayResponsive'\nimport Tooltip from 'components/tooltip/loadable'\nimport BecomeInstructorModal from 'components/becomeInstructorModal/loadable'\nimport RoleSelector from './RoleSelector'\nimport SearchInput from './SearchInput'\nimport store from '../../store'\nimport { ACCESS_TOKEN } from '../../constants'\nimport SocialIcon from 'images/Social Icon_Website.svg'\nimport NotificationIcon from 'images/icons/BellSimpleNotification.svg'\nimport SearchIcon from 'images/icons/MagnifyingGlass.svg'\nimport ListIcon from 'images/icons/List.svg'\nimport { IoMdMenu } from 'react-icons/io'\nimport NavbarWithoutLogin from './NavbarwithoutLogin/index'\n\nModal.setAppElement('#root')\n\nconst style = {\n  container: {\n    top: '45px',\n    bottom: '0',\n    right: '0',\n    left: 'auto',\n  },\n}\n\nconst options = [\n  {\n    label: () => '(EN) English',\n    value: 'en',\n  },\n  {\n    label: () => '(TH) ภาษาไทย',\n    value: 'th',\n  },\n]\n\nconst displayWidth = 40\nconst imageWidth = displayWidth * 2\n\nclass SearchBar extends Component {\n  state = {\n    showProfileDrawer: false,\n    showNotiPopup: false,\n    showRolePopup: false,\n    showSearchMenu: false,\n    showGoback: false,\n    showLanguage: false,\n    showChangeRoleIntro: null,\n  }\n\n  static propTypes = {\n    fetchMe: PropTypes.func.isRequired,\n    appUser: PropTypes.object.isRequired,\n  }\n\n  async componentDidMount() {\n    const { onOpenShowInstructor } = this.props\n    const query = new URLSearchParams(this.props.location.search)\n    const isShowInstructor = query.get('showInstructor')\n    if (isShowInstructor) {\n      onOpenShowInstructor()\n    }\n    const token = JSON.parse(localStorage.getItem(ACCESS_TOKEN))\n    if (token) {\n      const { fetchMe } = this.props\n      await fetchMe()\n    }\n    const { match } = this.props\n    if (match.params.schoolId) {\n      this.setState({ showGoback: true })\n    }\n    this.props.getNotifications()\n\n    const { appUser, isTeacher, location } = this.props\n    if (\n      !appUser?.schoolIntro?.skipedChangeRole &&\n      appUser?.learnerLastLogin !== null &&\n      isTeacher &&\n      location?.pathname === '/browse/courses'\n    ) {\n      if (window.innerWidth <= 768) {\n        this.setState({ showProfileDrawer: true, showChangeRoleIntro: true })\n      } else {\n        this.setState({ showRolePopup: true, showChangeRoleIntro: true })\n      }\n    }\n  }\n\n  handleTogglePopup = (key) => {\n    this.setState((prevState) => ({ [key]: !prevState[key] }))\n  }\n  handleToggleChangeRole = (key) => {\n    const { showChangeRoleIntro } = this.state\n    if (showChangeRoleIntro === null) {\n      this.handleTogglePopup(key)\n      return\n    }\n    this.setState(() => ({ [key]: showChangeRoleIntro, showChangeRoleIntro: null }))\n  }\n\n  toggleLanguage = () => this.setState(({ showLanguage }) => ({ showLanguage: !showLanguage }))\n\n  toggleDrawer = () => this.setState((prev) => ({ showProfileDrawer: !prev.showProfileDrawer }))\n  getDefaultSchoolId = () => {\n    const { appUser } = this.props\n    const defaultSchool = _get(appUser, 'schoolMembers', []).find((item) => item.isDefault)\n    return _get(defaultSchool, 'schoolId')\n  }\n\n  renderRole = () => {\n    const { isTeacher, match, appUser } = this.props\n\n    const isTeacherPath = match.url.startsWith('/teacher') || match.url.startsWith('/schools')\n    if (isTeacher) {\n      return (\n        <Tooltip\n          placement=\"bottom\"\n          trigger=\"click\"\n          className=\"role-menu\"\n          tooltipShown={this.state.showRolePopup}\n          onVisibilityChange={() => this.handleToggleChangeRole('showRolePopup')}\n          tooltip={\n            <RolePopup\n              // className=\"popup\"\n              menus={[\n                {\n                  label: 'Learner',\n                  link: '/browse/courses',\n                },\n                {\n                  label: 'Instructor',\n                  link: this.getDefaultSchoolId()\n                    ? `/schools/${this.getDefaultSchoolId()}/dashboard`\n                    : `/teacher/connections/school`,\n                },\n              ]}\n              handleToggle={() => this.handleTogglePopup('showRolePopup')}\n              isTeacherPath={isTeacherPath}\n            />\n          }\n        >\n          <RoleSelector isTeacherPath={isTeacherPath} />\n        </Tooltip>\n      )\n    }\n    if (isEmpty(appUser)) {\n      return null\n    }\n    return null\n  }\n\n  renderLogo = () => {\n    return (\n      <>\n        <LargeDesktop>\n          <Link to=\"/\">\n            <Logo type=\"secondary4\" margin=\"0px 20px 0px 0px\" alt=\"classwin-logo\" width=\"40\" />\n          </Link>\n        </LargeDesktop>\n        <MobileAndTablet>\n          <Link to=\"/\">\n            <Logo type=\"secondary4\" margin=\"0px 7px 0px 0px\" alt=\"classwin-logo\" width=\"40\" />\n          </Link>\n        </MobileAndTablet>\n      </>\n    )\n  }\n\n  renderMenu = (toggle) => {\n    return (\n      <>\n        <LargeDesktop>\n          <Link to=\"/browse\">\n            <Logo type=\"secondary4\" margin=\"0px 20px 0px 0px\" alt=\"classwin-logo\" width=\"40\" />\n          </Link>\n        </LargeDesktop>\n        <MobileAndTablet>\n          <Button\n            style={{ display: 'flex', justifyContent: 'flex-start' }}\n            onClick={() => toggle(true)}\n            menu\n          >\n            <NotiIcon src={ListIcon} alt=\"notification-icon\"></NotiIcon>\n          </Button>\n        </MobileAndTablet>\n      </>\n    )\n  }\n\n  handleLanguageChange = (value) => {\n    const { updateLocale } = this.props\n    updateLocale(value)\n    this.toggleLanguage()\n  }\n\n  renderLanguage = () => (\n    <LanguageGroup>\n      <ButtonLang onClick={this.toggleLanguage}>\n        <img src={SocialIcon} alt=\"social-icon\" />\n        <Typography>{`${this.props.locale}`.toUpperCase()}</Typography>\n      </ButtonLang>\n      {this.state.showLanguage && (\n        <Dropdown\n          onOutsite={this.toggleLanguage}\n          handleChange={this.handleLanguageChange}\n          options={options}\n          searchable={false}\n          style={style}\n        />\n      )}\n    </LanguageGroup>\n  )\n\n  renderSearchInput = () => {\n    return (\n      <>\n        <SearchInput width=\"100%\" />\n      </>\n    )\n  }\n\n  isHeaderHider = () => {\n    const { location } = this.props\n    const pathname = _get(location, 'pathname', false)\n    const regexCourse = new RegExp(/\\/my-course\\/courses\\/.+/, 'i')\n    const regexAssignment = new RegExp(/\\/my-course\\/assignments\\/.+/, 'i')\n\n    if (regexAssignment.test(pathname)) return true\n    return regexCourse.test(pathname) && window.matchMedia(`(max-width: 768px)`).matches\n  }\n\n  getPosition = (width) => {\n    if (width <= 650) {\n      return 'bottom'\n    }\n    if (width <= 768) {\n      return 'left'\n    }\n    return 'bottom'\n  }\n\n  onStart = async () => {\n    const { appUser, updateProfile } = this.props\n    try {\n      const { schoolIntro } = appUser\n      const payload = {\n        schoolIntro: {\n          ...schoolIntro,\n          skipedChangeRole: true,\n        },\n      }\n      await updateProfile(payload)\n    } catch (error) {\n      throw new Error(error)\n    }\n  }\n  onExit = () => {\n    if (window.innerWidth > 768) {\n      this.setState({ showRolePopup: false, showChangeRoleIntro: null })\n    }\n  }\n  onBeforeExit = async () => {\n    if (window.innerWidth <= 768) {\n      this.setState({ showProfileDrawer: false, showChangeRoleIntro: false })\n    } else {\n      this.setState({ showRolePopup: false, showChangeRoleIntro: false })\n    }\n  }\n\n  openModal = () => {\n    return <IoMdMenu className=\"icon\" size=\"24\" />\n  }\n\n  render() {\n    const {\n      appUser,\n      match,\n      location,\n      // isTeacher,\n      isLiff,\n      showInstructor,\n      onCloseShowInstructor,\n      sidebarOpen,\n      // onOpenShowInstructor,\n      // openProfileMenu,\n      // locale,\n      toggle,\n    } = this.props\n    // const { showChangeRoleIntro } = this.state\n    const isTeacherPath = match.url.startsWith('/teacher') || match.url.startsWith('/schools')\n    const header = getHeaderTitle(location.pathname)\n    // const isTh = locale === 'th'\n    const isFeedPage = location.pathname === '/browse/main'\n    // const pathname = _get(location, 'pathname', false)\n    // const intro = {\n    //   steps: [\n    //     {\n    //       title: isTh ? 'เปลี่ยนเป็นโหมดผู้สอน' : 'Switch to instructor',\n    //       element: '[data-intro=profileMenu]',\n    //       position: this.getPosition(window.innerWidth),\n    //       intro: (\n    //         <IntroContent\n    //           text={\n    //             isTh\n    //               ? `เมื่อสมัครเป็นผู้สอนคุณสามารถคลิกที่ปุ่มนี้เพื่อเลือกโหมดระหว่าง \"ผู้เรียน\" หรือ \"ผู้สอน\"`\n    //               : `Once you become an instructor, you can switch between \"Learner\" and \"Instructor\" here`\n    //           }\n    //           style={{ marginBottom: 20 }}\n    //         />\n    //       ),\n    //     },\n    //   ],\n    // }\n    const paramsUrl = location.pathname.split('/')[1]\n    console.log('paramsUrl', paramsUrl)\n    if (isLiff) {\n      return (\n        <BecomeInstructorModal isOpen={showInstructor} onRequestClose={onCloseShowInstructor} />\n      )\n    }\n    return (\n      <ErrorBoundary>\n        {!isEmpty(appUser) ? (\n          <>\n            <SearchBarContainer\n              isHide={this.isHeaderHider()}\n              //isShowShadow={paramsUrl === 'my-course' ? false : true}\n              isShowShadow={true}\n              isFeedPage={isFeedPage}\n            >\n              <SearchBarTop>\n                <div className=\"row justify full\">\n                  {match.url.startsWith('/teacher') && (\n                    <SearchFormContainer>{this.renderMenu(toggle)}</SearchFormContainer>\n                  )}\n                  {isTeacherPath ? (\n                    <Typography h3 id={header.id}>\n                      {header.title}\n                    </Typography>\n                  ) : (\n                    <SearchFormContainer>\n                      <LargeDesktop>\n                        {this.renderLogo()}\n                        <Link to=\"/browse/main\">\n                          <Button\n                            nowrap\n                            id=\"searchbar.Newsfeed\"\n                            searchbar\n                            path={location.pathname === '/browse/main' ? true : false}\n                          >\n                            News feed\n                          </Button>\n                        </Link>\n                        {!isTeacherPath && (\n                          <>\n                            <Link to=\"/browse/courses\" data-intro=\"feed4\">\n                              <Button\n                                nowrap\n                                id=\"searchbar.allcourse\"\n                                searchbar\n                                path={location.pathname === '/browse/courses' ? true : false}\n                              >\n                                Browse\n                              </Button>\n                            </Link>\n                            <Link to=\"/my-course/courses\">\n                              <Button\n                                nowrap\n                                id=\"searchbar.myCourse\"\n                                searchbar\n                                path={paramsUrl === 'my-course' ? true : false}\n                              >\n                                My Course\n                              </Button>\n                            </Link>\n                          </>\n                        )}\n                      </LargeDesktop>\n                      <MobileAndTablet>\n                        <Button\n                          style={{ display: 'flex', justifyContent: 'flex-start', padding: 0 }}\n                          onClick={() => toggle(true)}\n                          menu\n                        >\n                          <NotiIcon src={ListIcon} alt=\"notification-icon\"></NotiIcon>\n                        </Button>\n                      </MobileAndTablet>\n                    </SearchFormContainer>\n                  )}\n                  <div className=\"centre full\">\n                    <MobileAndTablet>{this.renderLogo()}</MobileAndTablet>\n                  </div>\n                  <div className=\"row\">\n                    {!isEmpty(appUser) && (\n                      <>\n                        <LargeDesktop>\n                          {this.renderSearchInput()}\n                          <Tooltip\n                            placement=\"bottom\"\n                            trigger=\"click\"\n                            // className=\"noti-menu\"\n                            tooltipShown={this.state.showNotiPopup}\n                            onVisibilityChange={() => this.handleTogglePopup('showNotiPopup')}\n                            tooltip={\n                              <NotificationPopup\n                                handleToggle={() => this.handleTogglePopup('showNotiPopup')}\n                              />\n                            }\n                          >\n                            <NotiContainer>\n                              <NotiIcon\n                                src={NotificationIcon}\n                                alt=\"notification-icon\"\n                                // style={{ marginLeft: !isTeacher ? 15 : 0 }}\n                              />\n                              {this.props.count > 0 && <MiniBadge>{this.props.count}</MiniBadge>}\n                            </NotiContainer>\n                          </Tooltip>\n                          {!isEmpty(appUser) && (\n                            <ContainerAvatar onClick={() => toggle(true)}>\n                              <Avatar\n                                width={displayWidth}\n                                src={getImageUrl(\n                                  _get(appUser, 'profileImage'),\n                                  `https://via.placeholder.com/${imageWidth}`,\n                                  imageWidth,\n                                  imageWidth\n                                )}\n                                data-intro=\"profileMenu\"\n                              />\n                            </ContainerAvatar>\n                          )}\n                        </LargeDesktop>\n                        <MobileAndTablet>\n                          {!isTeacherPath && (\n                            <NotiContainer style={{ width: 20 }}>\n                              <Link to=\"/browse/courses\" data-intro=\"feed4\">\n                                <NotiIcon src={SearchIcon} alt=\"home-icon\" />\n                              </Link>\n                            </NotiContainer>\n                          )}\n                          <NotiContainer\n                            onClick={() => this.handleTogglePopup('showNotiPopup')}\n                            style={{ marginRight: 0 }}\n                          >\n                            <NotiIcon\n                              src={NotificationIcon}\n                              alt=\"notification-icon\"\n                              // style={{ marginLeft: !isTeacher ? 15 : 0 }}\n                            />\n                            {this.props.count > 0 && (\n                              <MiniBadge margin=\"0 0 0 10px\">{this.props.count}</MiniBadge>\n                            )}\n                          </NotiContainer>\n                          <ModalMobileNoti\n                            isOpen={this.state.showNotiPopup}\n                            onClose={() => this.setState({ showNotiPopup: false })}\n                            handleTogglePopup={this.handleTogglePopup}\n                          />\n                        </MobileAndTablet>\n                      </>\n                    )}\n                  </div>\n                </div>\n              </SearchBarTop>\n            </SearchBarContainer>\n            <BecomeInstructorModal isOpen={showInstructor} onRequestClose={onCloseShowInstructor} />\n          </>\n        ) : (\n          <>\n            <NavbarWithoutLogin isOpacity={true} />\n          </>\n        )}\n      </ErrorBoundary>\n    )\n  }\n}\n\nconst selection = store.select((models) => ({\n  isTeacher: models.AppUser.isTeacher,\n}))\n\nconst mapState = (state) => ({\n  appUser: state.AppUser.appUser,\n  isLiff: state.Liff.isLiff,\n  locale: state.Language.locale,\n  count: state.Notification.count,\n  sidebarOpen: state.Sidebar.sidebarOpen,\n  showInstructor: state.ModalState.showInstructor,\n  openProfileMenu: state.Intro.openProfileMenu,\n  changeRole: state.Intro.changeRole,\n  ...selection(state),\n})\n\nconst mapDispatch = (dispatch) => {\n  const {\n    AppUser: { fetchMe, updateProfile },\n    Language: { updateLocale },\n    ModalState: { onCloseShowInstructor, onOpenShowInstructor },\n  } = dispatch\n  return {\n    fetchMe,\n    updateProfile,\n    updateLocale,\n    getNotifications: dispatch.Notification.getNotifications,\n    onCloseShowInstructor,\n    onOpenShowInstructor,\n    toggle: dispatch.Sidebar.toggle,\n  }\n}\n\nexport default connect(mapState, mapDispatch)(withRouter(SearchBar))\n","const getHeaderTitle = (path) => {\n  let header = {}\n  if (/^\\/schools\\/.+\\/member\\/.+\\/permission/.test(path)) {\n    header = { title: 'Permission', id: 'permission.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/dashboard/.test(path)) {\n    header = { title: 'Dashboard', id: 'dashboard.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/curriculum/.test(path)) {\n    header = { title: 'Course', id: 'tab.label.Course' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/member/.test(path)) {\n    header = { title: 'Member', id: 'member.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/payment/.test(path)) {\n    header = { title: 'Payment', id: 'instructor.menu.payment' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/certificate\\/program-certificate/.test(path)) {\n    header = { title: 'Program Certificate', id: 'certificates.program.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/certificate/.test(path)) {\n    header = { title: 'Certificate', id: 'certificates.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/report/.test(path)) {\n    header = { title: 'Report', id: 'tab.label.Report' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/information/.test(path)) {\n    header = { title: 'Academy Profile', id: 'information.instructor.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/checkout/.test(path)) {\n    header = { title: 'Checkout', id: 'checkout.package.title' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/packages/.test(path)) {\n    header = { title: 'Packages', id: 'instructor.menu.packages' }\n    return header\n  }\n  if (/^\\/schools\\/.+\\/marketplace/.test(path)) {\n    header = { title: 'Marketplace', id: 'instructor.menu.marketplace' }\n    return header\n  }\n\n  return header\n}\n\nexport default getHeaderTitle\n"],"sourceRoot":""}