style for the header:
/* ─── Header ───────────────────────────────────────────────── */
.top-bar{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:6px;
gap:var(--spacing-sm);
}
.top-bar-left{
display:flex;
align-items:center;
gap:10px;
}
.menu-button{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--radius-md);
cursor:pointer;
background:linear-gradient(180deg,#fff,#fbfdff);
border:1px solid rgba(0,0,0,0.04);
}
.menu-button .bars{display:inline-block}
.menu-button .bar{
width:18px;
height:2.8px;
background:#222;
border-radius:2px;
margin:3px 0;
display:block;
}
.nav-tabs{
display:flex;
gap:var(--spacing-md);
align-items:center;
}
.nav-tab{
font-weight:700;
font-size:14px;
color:var(--text-muted);
cursor:pointer;
padding:6px 8px;
border-radius:var(--radius-sm);
}
.nav-tab.active{color:var(--text-main);background:transparent}
.header-controls{
display:flex;
align-items:center;
gap:10px;
}
.icon-button{
width:36px;
height:36px;
border-radius:var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
border:1px solid rgba(0,0,0,0.04);
background:linear-gradient(180deg,#fff,#fbfdff);
}
.user-button{
width:36px;
height:36px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:16px;
color:#0b63d6;
background:linear-gradient(180deg,#fff,#f7fbff);
border:2px solid rgba(0,0,0,0.06);
}
/* ─── Drawer (Hamburger Menu) ──────────────────────────────── */
.drawer-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.35);
opacity:0;
pointer-events:none;
transition:opacity .25s ease;
z-index:999;
}
.drawer-overlay.show{opacity:1;pointer-events:auto}
.drawer{
position:fixed;
left:-320px;
top:0;
height:100%;
width:300px;
max-width:80%;
background:var(--drawer-bg);
box-shadow:var(--shadow-lg);
z-index:1000;
padding:18px var(--spacing-md);
transition:left .28s cubic-bezier(.2,.9,.2,1);
overflow:auto;
}
.drawer.show{left:0}
.drawer-header{
display:flex;
align-items:center;
gap:10px;
padding-bottom:var(--spacing-md);
border-bottom:1px solid #f2f2f2;
margin-bottom:var(--spacing-md);
}
.drawer-title{
font-weight:700;
font-size:26px;
font-family:var(--font-heading);
}
.drawer-list{list-style:none;padding:0;margin:0}
.drawer-item{
display:flex;
align-items:center;
gap:var(--spacing-md);
padding:12px 6px;
border-radius:var(--radius-md);
cursor:pointer;
}
.drawer-item:hover{background:var(--hover-bg)}
.drawer-item i{width:28px;text-align:center}
.drawer-divider{
height:1px;
background:var(--divider-color);
margin:8px 2px;
border-radius:2px;
}
haeder js:
// Drawer open/close logic
const menuButton = document.getElementById('menuButton');
const drawer = document.getElementById('drawer');
const drawerOverlay = document.getElementById('drawerOverlay');
function openDrawer(){
drawer.classList.add('show');
drawer.setAttribute('aria-hidden','false');
drawerOverlay.classList.add('show');
drawerOverlay.setAttribute('aria-hidden','false');
}
function closeDrawer(){
drawer.classList.remove('show');
drawer.setAttribute('aria-hidden','true');
drawerOverlay.classList.remove('show');
drawerOverlay.setAttribute('aria-hidden','true');
}
menuButton.addEventListener('click', openDrawer);
menuButton.addEventListener('keydown', (e)=>{ if(e.key==='Enter' || e.key===' ') { e.preventDefault(); openDrawer(); }});
drawerOverlay.addEventListener('click', closeDrawer);
// Apps button demo
const appsButton = document.getElementById('appsButton');
let appsOpen = false;
appsButton.addEventListener('click', (e)=>{
appsOpen = !appsOpen;
if(appsOpen) showApps();
else hideApps();
});
function showApps(){
if(document.getElementById('appsPopup')) return;
const popup = document.createElement('div');
popup.id = 'appsPopup';
popup.style.position = 'fixed';
popup.style.right = '14px';
popup.style.top = (12 + 46) + 'px';
popup.style.width = '220px';
popup.style.borderRadius = '10px';
popup.style.boxShadow = '0 10px 30px rgba(0,0,0,0.12)';
popup.style.background = '#fff';
popup.style.zIndex = 2000;
popup.style.padding = '10px';
popup.innerHTML = `
`;
document.body.appendChild(popup);
setTimeout(() => window.addEventListener('click', appsOutside), 10);
function appsOutside(e){
if(!popup.contains(e.target) && !appsButton.contains(e.target)){
hideApps();
window.removeEventListener('click', appsOutside);
}
}
}
function hideApps(){
const popup = document.getElementById('appsPopup');
if(popup) popup.remove();
appsOpen = false;
}
// Clear button functionality
document.addEventListener("DOMContentLoaded", function () {
const clearSearchBtn = document.getElementById("clearSearchBtn");
const qInput = document.getElementById("q");
if (!clearSearchBtn || !qInput) return;
qInput.addEventListener("input", function () {
clearSearchBtn.classList.toggle("visible", this.value.trim().length > 0);
});
clearSearchBtn.addEventListener("click", function () {
qInput.value = "";
qInput.focus();
clearSearchBtn.classList.remove("visible");
});
});
// Tab navigation
const navTabs = document.querySelectorAll('.nav-tab');
navTabs.forEach(t => t.addEventListener('click', ()=>{
navTabs.forEach(x=>x.classList.remove('active'));
t.classList.add('active');
}));
// Accessibility: Escape closes drawer
document.addEventListener('keydown', (e)=>{
if(e.key === 'Escape'){
closeDrawer();
hideApps();
}
});
// Clicking drawer items closes drawer
const drawerItems = document.querySelectorAll('.drawer-item');
drawerItems.forEach(it => it.addEventListener('click', closeDrawer));
css:
/* Sticky Search Header */
.search-header {
position: sticky;
top: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
padding: 10px 16px;
}
/* --- SEARCH BAR UPDATE --- */
.search-bar-container {
display: flex;
justify-content: center;
align-items: center;
}
.search-box-wrapper {
position: relative;
width: 400px; /* << not full-width, set a fixed size */
max-width: 100%;
display: flex;
align-items: center;
}
.search-box {
width: 100%;
padding: 10px 75px 10px 12px; /* space for buttons */
border-radius: 8px;
border: 1px solid #ccc;
font-size: 1rem;
}
/* Buttons inside the search field */
.clear-btn,
.search-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
padding: 4px;
cursor: pointer;
display: none; /* JS toggles .clear-btn */
}
.clear-btn svg,
.search-btn svg {
pointer-events: none;
}
.clear-btn {
right: 38px;
}
.search-btn {
right: 8px;
display: flex;
}
/* Divider between buttons */
.divider {
position: absolute;
right: 34px;
height: 16px;
width: 1px;
background: #ccc;
top: 50%;
transform: translateY(-50%);
}
/* --- MENU (Hamburger) --- */
.menu {
position: absolute;
top: 56px;
right: 16px;
background: white;
border: 1px solid #ddd;
box-shadow: 0 4px 8px rgba(0,0,0,0.05);
padding: 10px;
display: none;
flex-direction: column;
gap: 6px;
z-index: 1001;
}
.menu a {
text-decoration: none;
color: #444;
font-size: 14px;
padding: 4px 6px;
border-radius: 4px;
}
.menu a:hover {
background: #f2f2f2;
}
/* --- Tabs Tweak --- */
.tabs {
margin-top: 8px;
display: flex;
align-items: center;
gap: 8px; /* reduced from 12px */
flex-wrap: nowrap; /* prevent wrapping */
overflow-x: auto; /* horizontal scroll if needed */
}
.tab {
text-decoration: none;
padding: 4px 8px; /* slightly reduced */
font-size: 0.85rem; /* reduced font */
color: #444;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color 0.3s ease
}
.tab::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0px;
width: 100%;
background: #1a73e8;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.tab.active {
color: #1a73e8;
border-color: #1a73e8;
font-weight: 500;
}
.tab.active::after {
transform: scaleX(1);
}
.assist-btn {
margin-left: auto;
padding: 4px 10px;
background: #eef3ff;
border-radius: 20px;
color: #1a73e8;
font-weight: 500;
font-size: 0.85rem;
cursor: pointer;
white-space: nowrap;
}
/*
border-bottom: 1px solid #e0e0e0;
*/
/* Old-style tabs */
.gsc-tabsArea {
display: none !important;
}
/* Newer refinements area */
.gsc-refinementsArea {
display: none !important;
js:
// Trigger Search Action
//document.querySelector('.search-btn')?.addEventListener('click', () => {
// alert('Search triggered!');
//});
// Clear Button Logic
const searchInput = document.getElementById('searchInput');
const clearBtn = document.getElementById('clearBtn');
searchInput?.addEventListener('input', () => {
clearBtn.style.display = searchInput.value.length > 0 ? 'block' : 'none';
});
clearBtn?.addEventListener('click', () => {
searchInput.value = '';
clearBtn.style.display = 'none';
searchInput.focus();
});
// Hamburger Toggle Menu
const hamburger = document.querySelector('.hamburger');
const menu = document.getElementById('menu');
hamburger?.addEventListener('click', () => {
if (menu.style.display === 'flex') {
menu.style.display = 'none';
} else {
menu.style.display = 'flex';
}
});
// search-tabs.js
const refinements = {
all: '',
quran: 'more:quran',
hadith: 'more:hadith',
fatwas: 'more:fatwas',
discussions: 'more:discussions'
};
function getQueryParam(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name) || '';
}
function getRefFromHash() {
const hash = window.location.hash.replace('#', '');
const hashParams = new URLSearchParams(hash);
return hashParams.get('gsc.ref') || '';
}
function getQueryFromHash() {
const hash = window.location.hash.replace('#', '');
const hashParams = new URLSearchParams(hash);
return hashParams.get('gsc.q') || '';
}
function setActiveTab(refKey) {
document.querySelectorAll('.tab').forEach(t => {
t.classList.remove('active');
if (t.dataset.ref === refKey) {
t.classList.add('active');
}
});
}
function updateRefinement(refKey) {
const query = getQueryParam('q') || getQueryFromHash();
const ref = refinements[refKey];
const newHash = `gsc.tab=0&gsc.q=${encodeURIComponent(query)}${ref ? `&gsc.ref=${encodeURIComponent(ref)}` : ''}`;
// Clean up ?q= param if present in URL
const cleanURL = `${window.location.pathname}#${newHash}`;
history.replaceState(null, '', cleanURL);
// Update active tab styling
setActiveTab(refKey);
// Trigger hashchange manually (optional)
window.dispatchEvent(new HashChangeEvent("hashchange"));
}
// 🔹 Setup tab listeners
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', e => {
e.preventDefault();
const refKey = tab.dataset.ref;
updateRefinement(refKey);
});
});
// 🔹 On load: detect and set active tab
window.addEventListener('load', () => {
const refValue = getRefFromHash();
let activeKey = 'all';
for (const key in refinements) {
if (refinements[key] === refValue) {
activeKey = key;
break;
}
}
setActiveTab(activeKey);
});
// 🔹 On hashchange: keep tab styling in sync
window.addEventListener('hashchange', () => {
const refValue = getRefFromHash();
let activeKey = 'all';
for (const key in refinements) {
if (refinements[key] === refValue) {
activeKey = key;
break;
}
}
setActiveTab(activeKey);
});
//Populate the query
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
const query = params.get('q') || '';
const input = document.getElementById('cseQueryInput');
const clearBtn = document.getElementById('clearBtn');
input.value = query;
// Show clear button only when text is present
clearBtn.style.display = query.length > 0 ? 'block' : 'none';
// Show/hide clear button on input
input.addEventListener('input', () => {
clearBtn.style.display = input.value.length > 0 ? 'block' : 'none';
});
// Clear input when clear button clicked
clearBtn.addEventListener('click', () => {
input.value = '';
clearBtn.style.display = 'none';
input.focus();
});
});
// Watch for dynamically injected refinement tabs and hide them
const observer = new MutationObserver(() => {
const tabs = document.querySelector('.gsc-tabsArea, .gsc-refinementsArea');
if (tabs) {
tabs.style.display = 'none';
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});