50 showroom | top bar

public/index.html

@@ -40,4 +40,5 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
   </body>
+
 </html>

src/common/constants/constants.ts

@@ -3,6 +3,8 @@ export const PAGES_PATHS = {
   SIGN_UP: '/signup',
   HOME: '/',
   RESET_PASS: '/reset-password',
+  SEARCH: '/search',
+  FAVOURITES: '/favourites',
 }
 
 export const ButtonLables = {
@@ -17,3 +19,5 @@ export const HttpMethods = {
   PUT: 'put',
   DELETE: 'delete',
 }
+
+export const AUTH_PAGES = [PAGES_PATHS.LOG_IN, PAGES_PATHS.SIGN_UP, PAGES_PATHS.RESET_PASS]

src/features/top-bar/components/top-bar/top-bar.module.scss

@@ -0,0 +1,63 @@
+.topBar {
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+
+  &Elements {
+    max-width: 1100px;
+    width: 100%;
+    margin: 22px auto;
+    display: flex;
+  }
+
+  &Element {
+    margin: auto 15px;
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--gray-500);
+  }
+
+  &InputCategoryHolder {
+    background: transparent !important;
+    padding: 0 !important;
+  }
+
+  &InputCategory {
+    border: 0 !important;
+  }
+
+  &Search {
+    width: 688px;
+  }
+
+  &Link {
+    display: flex;
+    text-decoration: none;
+  }
+
+  &Link:hover {
+    span {
+      color: var(--primary-300) !important;
+    }
+    svg path {
+      fill: var(--primary-300) !important;
+    }
+  }
+
+  &LinkIcon {
+    margin: auto 6px;
+  }
+
+  &LinkText {
+    color: var(--gray-600);
+    font-size: 14px;
+    margin: auto;
+  }
+
+  &Divider {
+    margin: 0;
+    width: 100%;
+    height: 1px;
+    border: 1px solid var(--gray-200);
+  }
+}

src/features/top-bar/components/top-bar/top-bar.tsx

@@ -0,0 +1,81 @@
+import { Dropdown, DropdownChangeParams } from 'primereact/dropdown'
+import { Link, useNavigate } from 'react-router-dom'
+import classNames from 'classnames'
+import { useState } from 'react'
+
+import { AUTH_PAGES, PAGES_PATHS } from 'common/constants/constants'
+import { InputText } from 'primereact/inputtext'
+import { useStore } from 'store/store'
+
+import { ReactComponent as FavIcon } from './../../assets/favourites-icon.svg'
+import { ReactComponent as AssistLogo } from 'common/assets/logo-assist.svg'
+import { ReactComponent as UserIcon } from './../../assets/user-icon.svg'
+
+import style from './top-bar.module.scss'
+import { DROPDOWN_PLACEHOLDER } from 'features/top-bar/constants/top-bar-constants'
+
+export const TopBar = () => {
+  const [selectCategory, setSelectedCategory] = useState(null)
+
+  const { authStore } = useStore()
+  const { userName } = authStore
+
+  const navigate = useNavigate()
+
+  const categories = [{ name: 'Category 1' }, { name: 'Category 2' }, { name: 'Category 3' }]
+
+  const onCityChange = (e: DropdownChangeParams) => {
+    setSelectedCategory(e.value)
+  }
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const textBox = event.target as HTMLInputElement
+
+    if (event.key === 'Enter') {
+      navigate(`${PAGES_PATHS.SEARCH}/${textBox.value}`)
+    }
+  }
+
+  if (AUTH_PAGES.includes(document.location.pathname)) return <></>
+
+  return (
+    <section className={style.topBar}>
+      <div className={style.topBarElements}>
+        <div className={style.topBarElement}>
+          <Link to={PAGES_PATHS.HOME}>
+            <AssistLogo />
+          </Link>
+        </div>
+        <div className={style.topBarSearch}>
+          <div className='p-inputgroup'>
+            <span className={classNames('p-inputgroup-addon', style.topBarInputCategoryHolder)}>
+              <Dropdown
+                className={style.topBarInputCategory}
+                value={selectCategory}
+                options={categories}
+                onChange={onCityChange}
+                optionLabel='name'
+                placeholder={DROPDOWN_PLACEHOLDER}
+              />
+            </span>
+            <InputText onKeyDown={handleKeyDown} />
+          </div>
+        </div>
+        <div className={style.topBarElement}>
+          <Link to={PAGES_PATHS.FAVOURITES} className={style.topBarLink}>
+            <FavIcon className={style.topBarLinkIcon} />
+            <span className={style.topBarLinkText}>Favourites</span>
+          </Link>
+        </div>
+        <div className={style.topBarElement}>
+          {/**replace the link to PAGES_PATHS.settings when the PR will be merged */}
+          <Link to={'/setting/profile'} className={style.topBarLink}>
+            <UserIcon className={style.topBarLinkIcon} />
+            <span className={style.topBarLinkText}>{userName || 'My account'}</span>
+          </Link>
+        </div>
+      </div>
+      <hr className={style.topBarDivider} />
+    </section>
+  )
+}

src/features/top-bar/constants/top-bar-constants.tsx

@@ -0,0 +1 @@
+export const DROPDOWN_PLACEHOLDER = 'Category'

src/index.css

@@ -1,13 +1,11 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }

src/pages/page-router.tsx

@@ -3,10 +3,12 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { AuthPage } from './page-auth/page-auth'
 import { PAGES_PATHS } from '../common/constants/constants'
 import { PageAllComponents } from './page-all-components'
+import { TopBar } from 'features/top-bar/components/top-bar/top-bar'
 
 export const PageRouter = () => {
   return (
     <BrowserRouter>
+      <TopBar />
       <Routes>
         <Route path={PAGES_PATHS.HOME} element={<PageAllComponents />}></Route>
         <Route path={PAGES_PATHS.LOG_IN} element={<AuthPage type='login' />} />