docbrown/app/views/layouts/_top_bar.html.erb
Nick Taylor 18980034d3 Nick/feature/search to preact (#532)
* Works, but lots of cleanup/questions.

* Fixed comment.

* Only want the search script to load once with InstantClick active.

* Removed unnecessary DOMContentLoaded from copy paste.

* 🔧 Enabled (P)React Devtools.

* Updated comment about reactToEvent.

* Removed unnecessary server-side generated JS for search.

* <Search /> component now has component state.

* Search functions are in there own module now.

* 👷Refactor

* Render propped it up.

* Fixed issue with encoding of search term.

* Removed data-no-instant attr from script.

* 👷Refactor

* Now flash of search loading is avoided..

* Moved search under components folder.

* Tests

* fixedEncodeURIComponent does not need to be exported.

* Tests

* Folders to ignore from the VS Code Local History extension.

* Tests

* Snapshot test for <Search /> component.

* Tests

* Now the <SearchContainer /> handles the '/' key shortcut.

* Made the search box ID a prop defaulting to 'nav-search'

* Excluded barrel files from code coverage.

* Componentized search CSS.

* Storybook stories for <Search /> component.

* Removed extension folders to ignore.

* Fixed logic for "/" key triggering search.

* updated jest snapshot for <Search /> component.

* updated package.json lock file.

* Disabled the import/prefer-default-export rule.

* Now search term clears if not on a non-search results page.

* removed comment that is no longer valid.

* No longer using render prop for Search. Doesn't make sense as it's not stuff that is reused.

* Added preact-render-spy do dev deps.
2018-07-19 17:02:48 -04:00

35 lines
1.6 KiB
Text

<div class="navigation-progress" id="navigation-progress">
</div>
<div class="top-bar" id="top-bar">
<nav>
<a href="/" class="logo-link" id="logo-link" aria-label="DEV Home"><%= inline_svg("devplain.svg", class: "logo", size: '20% * 20%') %></a>
<div id="nav-search-form-root">
<div class="nav-search-form">
<form acceptCharset="UTF-8" method="get">
<input class="nav-search-form__input" type="text" name="q" id="nav-search" placeholder="search" autoComplete="off" />
</form>
</div>
</div>
<a href="/new" id="write-link" class="cta nav-link write">WRITE A POST</a>
<a href="/connect" id="connect-link" class="nav-link connect-icon" aria-label="Connect">
<%=inline_svg("connect.svg", size: '100% * 100%')%>
<div class="connect-number" id="connect-number"></div>
</a>
<a href="/notifications" id="notifications-link" class="nav-link notifications-icon" aria-label="Notifications">
<%=inline_svg("bell.svg", size: '100% * 100%')%>
<div class="notifications-number" id="notifications-number"></div>
</a>
<div class="navbar-menu-wrapper" id="navbar-menu-wrapper">
<button class="navigation-butt" id="navigation-butt" aria-label="Navigation">
<% if user_signed_in? %>
<div class="nav-profile-image-wrapper"><img class="nav-profile-image" id="nav-profile-image"/>
<% else %>
<%= inline_svg("menu.svg", class: "bars", size: '20% * 20%') %>
<% end %>
</button>
<div class="menubg" id="menubg"></div>
<%= render "layouts/nav_menu" %>
</div>
</a>
</nav>
</div>