Skip to content

Commit b62f99f

Browse files
lhsazevedoGirgiassaundefined
authored
Update navbar design and improve search UI (#1084)
Co-authored-by: Gina Peter Banyard <girgias@php.net> Co-authored-by: Sergey Panteleev <sergey@php.net>
1 parent 2f24f8e commit b62f99f

31 files changed

+1656
-759
lines changed

‎include/footer.inc‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ if (!empty($_SERVER['BASE_PAGE'])
9999
<!-- External and third party libraries. -->
100100
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
101101
<?php
102-
$jsfiles = ["ext/hogan-3.0.2.min.js", "ext/typeahead.jquery.min.js", "ext/FuzzySearch.min.js", "ext/mousetrap.min.js", "ext/jquery.scrollTo.min.js", "search.js", "common.js"];
102+
$jsfiles = ["ext/FuzzySearch.min.js", "ext/mousetrap.min.js", "ext/jquery.scrollTo.min.js", "search.js", "common.js"];
103103
foreach ($jsfiles as $filename) {
104104
$path = dirname(__DIR__) . '/js/' . $filename;
105105
echo '<script src="/cached.php?t=' . @filemtime($path) . '&amp;f=/js/' . $filename . '"></script>' . "\n";
@@ -108,5 +108,71 @@ if (!empty($_SERVER['BASE_PAGE'])
108108

109109
<a id="toTop" href="javascript:;"><span id="toTopHover"></span><img width="40" height="40" alt="To Top" src="/images/to-top@2x.png"></a>
110110

111+
<div id="search-modal__backdrop" class="search-modal__backdrop">
112+
<div
113+
role="dialog"
114+
aria-label="Search modal"
115+
id="search-modal"
116+
class="search-modal"
117+
>
118+
<div class="search-modal__header">
119+
<div class="search-modal__form">
120+
<div class="search-modal__input-icon">
121+
<!-- https://feathericons.com search -->
122+
<svg xmlns="http://www.w3.org/2000/svg"
123+
aria-hidden="true"
124+
width="24"
125+
viewBox="0 0 24 24"
126+
fill="none"
127+
stroke="currentColor"
128+
stroke-width="2"
129+
stroke-linecap="round"
130+
stroke-linejoin="round"
131+
>
132+
<circle cx="11" cy="11" r="8"></circle>
133+
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
134+
</svg>
135+
</div>
136+
<input
137+
type="search"
138+
id="search-modal__input"
139+
class="search-modal__input"
140+
placeholder="Search docs"
141+
aria-label="Search docs"
142+
/>
143+
</div>
144+
145+
<button aria-label="Close" class="search-modal__close">
146+
<!-- https://pictogrammers.com/library/mdi/icon/close/ -->
147+
<svg
148+
xmlns="http://www.w3.org/2000/svg"
149+
aria-hidden="true"
150+
width="24"
151+
viewBox="0 0 24 24"
152+
>
153+
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
154+
</svg>
155+
</button>
156+
</div>
157+
<div
158+
role="listbox"
159+
aria-label="Search results"
160+
id="search-modal__results"
161+
class="search-modal__results"
162+
></div>
163+
<div class="search-modal__helper-text">
164+
<div>
165+
<kbd>↑</kbd> and <kbd>↓</kbd> to navigate •
166+
<kbd>Enter</kbd> to select •
167+
<kbd>Esc</kbd> to close
168+
</div>
169+
<div>
170+
Press <kbd>Enter</kbd> without
171+
selection to search using Google
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
111177
</body>
112178
</html>

‎include/header.inc‎

Lines changed: 152 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,27 +94,159 @@ if (!isset($config["languages"])) {
9494
</head>
9595
<body class="<?php echo $curr; ?> <?php echo $classes; ?>">
9696

97-
<nav id="head-nav" class="navbar navbar-fixed-top">
98-
<div class="navbar-inner clearfix">
99-
<a href="/" class="brand"><img src="/images/logos/php-logo.svg" width="48" height="24" alt="php"></a>
100-
<div id="mainmenu-toggle-overlay"></div>
101-
<input type="checkbox" id="mainmenu-toggle">
102-
<ul class="nav">
103-
<li class="<?php echo $curr == "downloads" ? "active" : ""?>"><a href="/downloads">Downloads</a></li>
104-
<li class="<?php echo $curr == "docs" ? "active" : ""?>"><a href="/docs.php">Documentation</a></li>
105-
<li class="<?php echo $curr == "community" ? "active" : ""?>"><a href="/get-involved" >Get Involved</a></li>
106-
<li class="<?php echo $curr == "help" ? "active" : ""?>"><a href="/support">Help</a></li>
107-
<li class="<?php echo $curr === "php8" ? "active" : "" ?>">
108-
<a href="/releases/8.3/index.php">
109-
<img src="/images/php8/logo_php8_3.svg" alt="php8.3" height="22" width="60">
110-
</a>
111-
</li>
112-
</ul>
113-
<form class="navbar-search" id="topsearch" action="/search.php">
114-
<input type="hidden" name="show" value="quickref">
115-
<input type="search" name="pattern" class="search-query" placeholder="Search" accesskey="s">
116-
</form>
97+
<nav class="navbar navbar-fixed-top">
98+
<div class="navbar__inner">
99+
<a href="/" aria-label="PHP Home" class="navbar__brand">
100+
<img
101+
src="/images/logos/php-logo-white.svg"
102+
aria-hidden="true"
103+
width="80"
104+
height="40"
105+
>
106+
</a>
107+
108+
<div
109+
id="navbar__offcanvas"
110+
tabindex="-1"
111+
class="navbar__offcanvas"
112+
aria-label="Menu"
113+
>
114+
<button
115+
id="navbar__close-button"
116+
class="navbar__icon-item navbar_icon-item--visually-aligned navbar__close-button"
117+
>
118+
<svg xmlns="http://www.w3.org/2000/svg" width="24" viewBox="0 0 24 24" fill="currentColor"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>
119+
</button>
120+
121+
<ul class="navbar__nav">
122+
<?php foreach (get_nav_items() as $entry): ?>
123+
<?php
124+
$isActive = $curr == $entry->id;
125+
$activeClass = $isActive ? 'navbar__link--active' : '';
126+
$releaseClass = $entry->image ? 'navbar__release' : '';
127+
?>
128+
<li class="navbar__item">
129+
<a
130+
href="<?= $entry->href ?>"
131+
<?= $isActive ? 'aria-current="page"' : '' ?>
132+
class="navbar__link <?= "$activeClass $releaseClass" ?>"
133+
>
134+
<?php if ($entry->image): ?>
135+
<img src="<?= $entry->image ?>" alt="<?= $entry->name ?>">
136+
<?php else: ?>
137+
<?= $entry->name ?>
138+
<?php endif; ?>
139+
</a>
140+
</li>
141+
<?php endforeach; ?>
142+
</ul>
143+
</div>
144+
145+
<div class="navbar__right">
146+
<?php
147+
// https://feathericons.com search
148+
$searchIcon = <<<SVG
149+
<svg
150+
xmlns="http://www.w3.org/2000/svg"
151+
aria-hidden="true"
152+
width="24"
153+
viewBox="0 0 24 24"
154+
fill="none"
155+
stroke="currentColor"
156+
stroke-width="2"
157+
stroke-linecap="round"
158+
stroke-linejoin="round"
159+
>
160+
<circle cx="11" cy="11" r="8"></circle>
161+
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
162+
</svg>
163+
SVG;
164+
165+
// https://pictogrammers.com/library/mdi/icon/menu/
166+
$menuIcon = <<<SVG
167+
<svg xmlns="http://www.w3.org/2000/svg"
168+
aria-hidden="true"
169+
width="24"
170+
viewBox="0 0 24 24"
171+
fill="currentColor"
172+
>
173+
<path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
174+
</svg>
175+
SVG;
176+
?>
177+
178+
<!-- Desktop default search -->
179+
<form
180+
action="/manual-lookup.php"
181+
class="navbar__search-form"
182+
>
183+
<label for="navbar__search-input" aria-label="Search docs">
184+
<?= $searchIcon ?>
185+
</label>
186+
<input
187+
type="search"
188+
name="pattern"
189+
id="navbar__search-input"
190+
class="navbar__search-input"
191+
placeholder="Search docs"
192+
accesskey="s"
193+
>
194+
<input type="hidden" name="scope" value="quickref">
195+
</form>
196+
197+
<!-- Desktop encanced search -->
198+
<button
199+
id="navbar__search-button"
200+
class="navbar__search-button"
201+
hidden
202+
>
203+
<?= $searchIcon ?>
204+
Search docs
205+
</button>
206+
207+
<!-- Mobile default items -->
208+
<a
209+
id="navbar__search-link"
210+
href="/lookup-form.php"
211+
aria-label="Search docs"
212+
class="navbar__icon-item navbar__search-link"
213+
>
214+
<?= $searchIcon ?>
215+
</a>
216+
<a
217+
id="navbar__menu-link"
218+
href="/menu.php"
219+
aria-label="Menu"
220+
class="navbar__icon-item navbar_icon-item--visually-aligned navbar_menu-link"
221+
>
222+
<?= $menuIcon ?>
223+
</a>
224+
225+
<!-- Mobile enhanced items -->
226+
<button
227+
id="navbar__search-button-mobile"
228+
aria-label="Search docs"
229+
class="navbar__icon-item navbar__search-button-mobile"
230+
hidden
231+
>
232+
<?= $searchIcon ?>
233+
</button>
234+
<button
235+
id="navbar__menu-button"
236+
aria-label="Menu"
237+
class="navbar__icon-item navbar_icon-item--visually-aligned"
238+
hidden
239+
>
240+
<?= $menuIcon ?>
241+
</button>
242+
</div>
243+
244+
<div
245+
id="navbar__backdrop"
246+
class="navbar__backdrop"
247+
></div>
117248
</div>
249+
118250
<div id="flash-message"></div>
119251
</nav>
120252
<?php if (!empty($config["headsup"])): ?>

‎include/layout.inc‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
<?php
2+
3+
use phpweb\Navigation\NavItem;
4+
25
$_SERVER['STATIC_ROOT'] = $MYSITE;
36
$_SERVER['MYSITE'] = $MYSITE;
47

@@ -481,6 +484,37 @@ function site_footer(array $config = []): void
481484
require __DIR__ . "/footer.inc";
482485
}
483486

487+
function get_nav_items(): array {
488+
return [
489+
new NavItem(
490+
name: 'Downloads',
491+
href: '/downloads.php',
492+
id: 'downloads',
493+
),
494+
new NavItem(
495+
name: 'Documentation',
496+
href: '/docs.php',
497+
id: 'docs',
498+
),
499+
new NavItem(
500+
name: 'Get Involved',
501+
href: '/get-involved.php',
502+
id: 'community',
503+
),
504+
new NavItem(
505+
name: 'Help',
506+
href: '/support.php',
507+
id: 'help',
508+
),
509+
new NavItem(
510+
name: 'PHP 8.3',
511+
href: '/releases/8.3/index.php',
512+
id: 'php8',
513+
image: '/images/php8/logo_php8_3.svg',
514+
)
515+
];
516+
}
517+
484518
function get_news_changes()
485519
{
486520
include __DIR__ . "/pregen-news.inc";

0 commit comments

Comments
 (0)