ross/slowtwitch-news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

searchbar overlay

Browse Source
This commit is contained in:
Ross Trottier 2024-06-24 14:59:45 -06:00
parent 7825ef8f17
commit 3b97d72f80
4 changed files with 69 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/vertical-ad-mock.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

22
assets/js/st-nav.js
View File

@ -1,17 +1,31 @@
//Nav slide in logic
const nav = document.querySelector('.st-nav');
const openButton = document.querySelector('.st-open-nav');
const closeButton = document.querySelector('.st-close-nav');
const openNavButton = document.querySelector('.st-open-nav');
const closeNavButton = document.querySelector('.st-close-nav');
openButton.addEventListener('click', () => {
openNavButton.addEventListener('click', () => {
nav.classList.add('st-nav-is-open');
});
closeButton.addEventListener('click', () => {
closeNavButton.addEventListener('click', () => {
nav.classList.remove('st-nav-is-open');
});
//Search slide logic
const searchOverlay = document.querySelector('.st-search-overlay');
const openSearchButton = document.querySelector('.st-open-search');
const closeSearchButton = document.querySelector('.st-close-search');
openSearchButton.addEventListener('click', () => {
searchOverlay.classList.add('st-search-is-open');
});
closeSearchButton.addEventListener('click', () => {
searchOverlay.classList.remove('st-search-is-open');
});
//Sticky nav logic
const iconBar = document.querySelector('.st-header-icon-bar');

34
header.php
View File

@ -26,27 +26,35 @@
<a href="#" class="st-chip st-chip-primary">forum</a>
<a href="#" class="st-chip st-chip-secondary">join</a>
<a href="#" class="st-header-icon"><i class="fa fa-user"></i></a>
<a href="" class="st-header-icon"><i class="fa fa-search"></i></a>
<button class="st-nav-btn st-open-search" ><i class="fa fa-search st-open-search"></i></button>
<button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
</div>
<h1 class="st-site-title">Slowtwitch</h1>
<nav class="st-nav st-main-grid">
<button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>
<?php
wp_nav_menu(
array(
'menu' => 'primary',
'container' => '',
'theme_location' => 'primary',
'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
)
);
wp_nav_menu(
array(
'menu' => 'primary',
'container' => '',
'theme_location' => 'primary',
'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
)
);
?>
</nav>
<div class="st-search-overlay">
<div class="st-search-overlay st-main-grid">
<button class="st-nav-btn st-close-search" aria-label="Close Search">&times;</button>
<form class="st-search-form" method="get" action="/">
<div class="st-searchbar-container">
<input type="text" class="st-search-box" name="s" id="s" placeholder="What are you looking for?" />
<button class="st-nav-btn st-btn-search">
<i class="fa fa-search st-open-search"></i>
</button>
</div>
</form>
</div>
</header>
</header>

32
style.css
View File

@ -129,7 +129,8 @@ SECTIONS
pointer-events: auto;
}
.st-nav-is-open {
.st-nav-is-open,
.st-search-is-open {
transform: translateX(100%);
}
@ -165,12 +166,39 @@ SECTIONS
color: #d3d3d3;
}
.st-close-nav {
.st-close-nav,
.st-close-search {
text-align: right;
font-size: 2rem;
height: 3rem;
}
.st-search-form {
margin-top: 2em;
}
.st-searchbar-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.st-search-box {
outline: none;
border: none;
border-bottom: 2px solid #0b4fa0;
color: #0b4fa0;
}
.st-btn-search {
margin-left: 1em;
}
.st-btn-search i {
color: #0b4fa0;
font-size: 1.25em;
}
/* footer */
.st-footer {