Search modal

public/icons/search.svg

@@ -1,3 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="#141414"/>
+<path
+  d="M10.125 3.375C6.40365 3.375 3.375 6.40365 3.375 10.125C3.375 13.8464 6.40365 16.875 10.125 16.875C11.6745 16.875 13.0964 16.3464 14.237 15.4661L19.1432 20.3698C19.4818 20.7109 20.0312 20.7109 20.3698 20.3698C20.7109 20.0312 20.7109 19.4818 20.3698 19.1432L15.4661 14.237C16.3464 13.0964 16.875 11.6745 16.875 10.125C16.875 6.40365 13.8464 3.375 10.125 3.375ZM10.125 4.875C13.0208 4.875 15.375 7.22917 15.375 10.125C15.375 13.0208 13.0208 15.375 10.125 15.375C7.22917 15.375 4.875 13.0208 4.875 10.125C4.875 7.22917 7.22917 4.875 10.125 4.875Z" fill="currentColor"/>
 </svg>

public/locales/en/translation.json

@@ -289,6 +289,7 @@
   "Send": "Send",
   "Send link again": "Send link again",
   "Settings": "Settings",
+  "Site search": "Site search",
   "Share": "Share",
   "Show": "Show",
   "Show lyrics": "Show lyrics",

public/locales/ru/translation.json

@@ -305,6 +305,7 @@
   "Send": "Отправить",
   "Send link again": "Прислать ссылку ещё раз",
   "Settings": "Настройки",
+  "Site search": "Поиск по сайту",
   "Share": "Поделиться",
   "Short opening": "Расскажите вашу историю...",
   "Show": "Показать",

src/components/Nav/Header/Header.tsx

@@ -24,6 +24,7 @@ import { apiClient } from '../../../utils/apiClient'
 import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
 import { Link } from './Link'
 import { Subscribe } from '../../_shared/Subscribe'
+import { SearchModal } from '../SearchModal/SearchModal'
 
 type Props = {
   title?: string
@@ -183,6 +184,10 @@ export const Header = (props: Props) => {
         <ConfirmModal />
       </Modal>
 
+      <Modal variant="wide" name="search">
+        <SearchModal />
+      </Modal>
+
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
           <div class={clsx(styles.burgerContainer, 'col-auto')}>

src/components/Nav/HeaderAuth.tsx

@@ -124,10 +124,10 @@ export const HeaderAuth = (props: Props) => {
 
             <Show when={!isSaveButtonVisible()}>
               <div class={styles.userControlItem}>
-                <a href="#">
+                <button onClick={() => showModal('search')}>
                   <Icon name="search" class={styles.icon} />
                   <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
-                </a>
+                </button>
               </div>
             </Show>
 

src/components/Nav/Modal/Modal.module.scss

@@ -114,3 +114,29 @@
   flex-direction: column;
   height: 90vh;
 }
+
+.modal-search {
+  background: #000;
+
+  .modal {
+    background: none;
+    color: #fff;
+    height: 100vh;
+    max-width: none;
+    padding-top: 10rem;
+    width: 100% !important;
+  }
+
+  .modalInner {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .close {
+    filter: invert(1);
+    height: 3.2rem;
+    right: 0;
+    top: 2rem;
+    width: 3.2rem;
+  }
+}

src/components/Nav/Modal/Modal.tsx

@@ -43,7 +43,7 @@ export const Modal = (props: Props) => {
 
   return (
     <Show when={visible()}>
-      <div class={styles.backdrop} onClick={handleHide}>
+      <div class={clsx(styles.backdrop, [styles[`modal-${props.name}`]])} onClick={handleHide}>
         <div class="wide-container">
           <div
             class={clsx(styles.modal, {

src/components/Nav/SearchModal/SearchModal.module.scss

@@ -0,0 +1,98 @@
+@mixin searchFilterControl {
+  background: rgb(64 64 64 / 0.5);
+  border-radius: 10rem;
+  color: #fff;
+  @include font-size(1.4rem);
+  font-weight: 500;
+  height: 4rem;
+  padding: 0 2rem;
+  white-space: nowrap;
+
+  &:hover {
+    background: #404040;
+  }
+
+  &:active {
+    color: rgb(255 255 255 / 0.4);
+  }
+}
+
+.searchForm {
+  position: relative;
+
+  .searchField {
+    background: none;
+    border: none;
+    border-bottom: 2px solid #fff;
+    color: #fff;
+    @include font-size(4.8rem);
+    font-weight: bold;
+    outline: none;
+    padding: 0 0 0.5rem;
+
+    &::placeholder {
+      color: rgb(255 255 255 / 0.32);
+    }
+
+    &:not(:placeholder-shown) + .submitControl {
+      display: block;
+    }
+  }
+}
+
+.submitControl {
+  display: none;
+  filter: invert(1);
+  height: 3.2rem;
+  position: absolute;
+  right: 0;
+  top: 2rem;
+  width: 3.2rem;
+}
+
+.searchDescription {
+  color: rgb(255 255 255 / 0.64);
+  @include font-size(1.6rem);
+}
+
+.topicsList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 9.6rem !important;
+}
+
+.topTopic {
+  @include searchFilterControl;
+}
+
+.filterSwitcher {
+  margin: 0 0 6.4rem !important;
+  padding: 0 !important;
+
+  button {
+    color: #fff !important;
+  }
+
+  :global(.view-switcher__item--selected) {
+    button {
+      border-bottom-color: #fff !important;
+
+      &:hover {
+        background: none !important;
+      }
+    }
+  }
+}
+
+.filterResults {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin: 6.4rem 0;
+}
+
+.filterResultsControl {
+  @include searchFilterControl;
+}

src/components/Nav/SearchModal/SearchModal.tsx

@@ -0,0 +1,145 @@
+import { hideModal } from '../../../stores/ui'
+import { useLocalize } from '../../../context/localize'
+import { Button } from '../../_shared/Button'
+import styles from './SearchModal.module.scss'
+import { Icon } from '../../_shared/Icon'
+import clsx from 'clsx'
+
+export const SearchModal = () => {
+  const { t } = useLocalize()
+
+  const action = '/search'
+  const method = 'get'
+  let msgElement: HTMLTextAreaElement | undefined
+  let contactElement: HTMLInputElement | undefined
+  const submit = async () => {
+    await fetch(action, {
+      method,
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json; charset=utf-8'
+      },
+      body: JSON.stringify({ contact: contactElement?.value, message: msgElement?.textContent })
+    })
+    // hideModal()
+  }
+
+  return (
+    <form method={method} action={action} onSubmit={submit} class={styles.searchForm}>
+      <input
+        type="text"
+        name="contact"
+        placeholder={t('Site search')}
+        ref={contactElement}
+        class={styles.searchField}
+      />
+      <button type={submit} class={styles.submitControl}>
+        <Icon name="search" />
+      </button>
+      <p class={styles.searchDescription}>
+        Для поиска публикаций, искусства, комментариев, интересных вам авторов и&nbsp;тем, просто начните
+        вводить ваш запрос
+      </p>
+
+      <ul class={clsx('view-switcher', styles.filterSwitcher)}>
+        <li class="view-switcher__item view-switcher__item--selected">
+          <button type="button">Все</button>
+        </li>
+        <li class="view-switcher__item">
+          <button type="button">Публикации</button>
+        </li>
+        <li class="view-switcher__item">
+          <button type="button">Темы</button>
+        </li>
+      </ul>
+
+      <div class={styles.filterResults}>
+        <button type="button" class={styles.filterResultsControl}>
+          Период времени
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Рейтинг
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Тип постов
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Темы
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Авторы
+        </button>
+        <button type="button" class={styles.filterResultsControl}>
+          Сообщества
+        </button>
+      </div>
+
+      <div class="container-xl">
+        <div class="row">
+          <div class={clsx('col-md-18 offset-md-2', styles.topicsList)}>
+            <button type="button" class={styles.topTopic}>
+              За месяц
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #репортажи
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #интервью
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #культура
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #поэзия
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #теории
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #война в украине
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #общество
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Экспериментальная Музыка
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Рейтинг 300+
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Протесты
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Музыка
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #За линией Маннергейма
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Тесты
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Коллективные истории
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #личный опыт
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Тоня Самсонова
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #личный опыт
+            </button>
+            <button type="button" class={styles.topTopic}>
+              #Секс
+            </button>
+            <button type="button" class={styles.topTopic}>
+              Молоко Plus
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}

src/stores/ui.ts

@@ -22,6 +22,7 @@ export type ModalType =
   | 'simplifiedEditorInsertLink'
   | 'followers'
   | 'following'
+  | 'search'
 
 export const MODALS: Record<ModalType, ModalType> = {
   auth: 'auth',
@@ -37,7 +38,8 @@ export const MODALS: Record<ModalType, ModalType> = {
   editorInsertLink: 'editorInsertLink',
   simplifiedEditorInsertLink: 'simplifiedEditorInsertLink',
   followers: 'followers',
-  following: 'following'
+  following: 'following',
+  search: 'search'
 }
 
 const [modal, setModal] = createSignal<ModalType>(null)