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 //Nav slide in logic
const nav = document.querySelector('.st-nav'); const nav = document.querySelector('.st-nav');
const openButton = document.querySelector('.st-open-nav'); const openNavButton = document.querySelector('.st-open-nav');
const closeButton = document.querySelector('.st-close-nav'); const closeNavButton = document.querySelector('.st-close-nav');
openButton.addEventListener('click', () => { openNavButton.addEventListener('click', () => {
nav.classList.add('st-nav-is-open'); nav.classList.add('st-nav-is-open');
}); });
closeButton.addEventListener('click', () => { closeNavButton.addEventListener('click', () => {
nav.classList.remove('st-nav-is-open'); 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 //Sticky nav logic
const iconBar = document.querySelector('.st-header-icon-bar'); 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-primary">forum</a>
<a href="#" class="st-chip st-chip-secondary">join</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-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> <button class="st-nav-btn st-open-nav" aria-label="Open Navigation">&#9776;</button>
</div> </div>
<h1 class="st-site-title">Slowtwitch</h1> <h1 class="st-site-title">Slowtwitch</h1>
<nav class="st-nav st-main-grid"> <nav class="st-nav st-main-grid">
<button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button> <button class="st-nav-btn st-close-nav" aria-label="Close Navigation">&times;</button>
<?php <?php
wp_nav_menu( wp_nav_menu(
array( array(
'menu' => 'primary', 'menu' => 'primary',
'container' => '', 'container' => '',
'theme_location' => 'primary', 'theme_location' => 'primary',
'items_wrap' => '<ul class="st-nav-links">%3$s</ul>' 'items_wrap' => '<ul class="st-nav-links">%3$s</ul>'
) )
); );
?> ?>
</nav> </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> </div>
</header> </header>

32
style.css
View File

@ -129,7 +129,8 @@ SECTIONS
pointer-events: auto; pointer-events: auto;
} }
.st-nav-is-open { .st-nav-is-open,
.st-search-is-open {
transform: translateX(100%); transform: translateX(100%);
} }
@ -165,12 +166,39 @@ SECTIONS
color: #d3d3d3; color: #d3d3d3;
} }
.st-close-nav { .st-close-nav,
.st-close-search {
text-align: right; text-align: right;
font-size: 2rem; font-size: 2rem;
height: 3rem; 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 */ /* footer */
.st-footer { .st-footer {