patx/miadruck
Add mobile dropdown navigation and styles
Commit 3a44cc8 · Harrison Erd · 2026-01-09T04:01:37-05:00
Comments
No comments yet.
Diff
diff --git a/index.html b/index.html
index b1ac0d4..45aac2f 100644
--- a/index.html
+++ b/index.html
@@ -64,7 +64,25 @@
align-items:center;
justify-content:space-between;
gap:14px;
+ position:relative; /* needed for mobile dropdown positioning */
}
+
+ /* --- Mobile nav (hamburger) --- */
+ .nav-toggle{
+ display:none;
+ width:44px;
+ height:44px;
+ border-radius:999px;
+ border:1px solid rgba(0,0,0,.10);
+ background:rgba(255,255,255,.55);
+ backdrop-filter: blur(12px) saturate(1.4);
+ -webkit-backdrop-filter: blur(12px) saturate(1.4);
+ cursor:pointer;
+ align-items:center;
+ justify-content:center;
+ }
+ .nav-toggle svg{ width:22px; height:22px; }
+
.brand{
font-family:Poppins, Inter, system-ui;
font-weight:800;
@@ -85,6 +103,48 @@
}
.nav-cta:hover{ filter:brightness(1.03); }
+ @media (max-width: 740px){
+ .topbar-inner{ padding:10px 0; }
+ .brand{ font-size:15px; }
+ .nav-toggle{ display:inline-flex; }
+
+ /* turn navlinks into dropdown panel */
+ .navlinks{
+ position:absolute;
+ top:64px; /* below the bar */
+ right:18px;
+ left:18px;
+ display:grid;
+ gap:8px;
+ padding:12px;
+ border-radius:18px;
+ background:rgba(255,255,255,.92);
+ border:1px solid rgba(0,0,0,.08);
+ box-shadow:0 18px 60px rgba(0,0,0,.18);
+
+ opacity:0;
+ transform: translateY(-8px);
+ pointer-events:none;
+ transition: opacity .15s ease, transform .15s ease;
+ }
+
+ /* show when open */
+ .topbar.nav-open .navlinks{
+ opacity:1;
+ transform: translateY(0);
+ pointer-events:auto;
+ }
+
+ .navlinks a{
+ justify-content:center;
+ padding:12px 14px;
+ background:rgba(0,0,0,.02);
+ }
+ .navlinks a.nav-cta{
+ background:linear-gradient(90deg, var(--accent), var(--accent2));
+ }
+ }
+
/* Hero */
.hero{
position:relative;
@@ -287,6 +347,19 @@
font-size:14px;
}
+ /* Hint: on mobile, move under header + left align */
+ @media (max-width: 640px){
+ .section-head{
+ flex-direction:column;
+ align-items:flex-start;
+ gap:6px;
+ }
+ .section-head .hint{
+ width:100%;
+ text-align:left;
+ }
+ }
+
/* Grid/cards */
.grid{
display:grid;
@@ -579,10 +652,18 @@
<!-- Top nav -->
<header class="topbar">
<div class="topbar-inner">
- <div class="brand">
- <a href="#top">Mia Druck</a> | <a class="brand" target="_blank" href="https://www.zillow.com/profile/Andrew%20West">Ocean Glades Realty</a>
+ <div class="brand">
+ <a href="#top">Mia Druck</a> | <a class="brand" target="_blank" href="https://www.zillow.com/profile/Andrew%20West">Ocean Glades Realty</a>
</div>
- <nav class="navlinks">
+
+ <!-- Hamburger (mobile) -->
+ <button class="nav-toggle" id="navToggle" aria-label="Open menu" aria-expanded="false" aria-controls="siteNav">
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+ </svg>
+ </button>
+
+ <nav class="navlinks" id="siteNav">
<a href="#active-listings">Active Listings</a>
<a href="#previous-sales">Previous Sales</a>
<a class="nav-cta" href="#contact">Contact</a>
@@ -731,93 +812,93 @@
<div class="about-box">
<h3>About Mia - Real Estate Made Easy</h3>
<p>
- Mia Druck helps buyers and sellers in South Florida with effective, confident guidance.
- From condos and rentals to waterfront and luxury homes, she makes the process smooth with
- fast communication and strong negotiation. When she’s not working, Mia is enjoying the
- South Florida lifestyle—boat days, great dinners and happy hours. She brings that same relaxed,
+ Mia Druck helps buyers and sellers in South Florida with effective, confident guidance.
+ From condos and rentals to waterfront and luxury homes, she makes the process smooth with
+ fast communication and strong negotiation. When she’s not working, Mia is enjoying the
+ South Florida lifestyle—boat days, great dinners and happy hours. She brings that same relaxed,
result driven energy to every client experience.
</p>
- <div class="about-brand-row">
+ <div class="about-brand-row">
<a href="https://www.zillow.com/profile/Andrew%20West" target="_blank">
<img src="https://i.postimg.cc/rs2FgrJX/broker-logo.png" alt="Ocean Glades Realty logo" />
</a>
- <div class="social-row">
- <!-- Instagram -->
- <a class="social-btn" href="https://instagram.com/miadruck" target="_blank" rel="noopener" aria-label="Instagram">
- <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
- <path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Z" stroke="currentColor" stroke-width="1.8"/>
- <path d="M12 16.2a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.8"/>
- <path d="M17.3 6.9h.01" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
- </svg>
- </a>
-
- <!-- Facebook -->
- <a class="social-btn" href="https://facebook.com/YOUR_PAGE" target="_blank" rel="noopener" aria-label="Facebook">
- <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
- <path d="M14 8.7V7.3c0-.8.3-1.3 1.5-1.3H17V3h-2.3C12.1 3 11 4.5 11 7v1.7H9v3h2V21h3v-9.3h2.2l.3-3H14Z" fill="currentColor"/>
- </svg>
- </a>
- </div>
+ <div class="social-row">
+ <!-- Instagram -->
+ <a class="social-btn" href="https://instagram.com/miadruck" target="_blank" rel="noopener" aria-label="Instagram">
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <path d="M7.5 2h9A5.5 5.5 0 0 1 22 7.5v9A5.5 5.5 0 0 1 16.5 22h-9A5.5 5.5 0 0 1 2 16.5v-9A5.5 5.5 0 0 1 7.5 2Z" stroke="currentColor" stroke-width="1.8"/>
+ <path d="M12 16.2a4.2 4.2 0 1 0 0-8.4 4.2 4.2 0 0 0 0 8.4Z" stroke="currentColor" stroke-width="1.8"/>
+ <path d="M17.3 6.9h.01" stroke="currentColor" stroke-width="3.2" stroke-linecap="round"/>
+ </svg>
+ </a>
+
+ <!-- Facebook -->
+ <a class="social-btn" href="https://www.facebook.com/p/Mia-Druck-100064656883967/" target="_blank" rel="noopener" aria-label="Facebook">
+ <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+ <path d="M14 8.7V7.3c0-.8.3-1.3 1.5-1.3H17V3h-2.3C12.1 3 11 4.5 11 7v1.7H9v3h2V21h3v-9.3h2.2l.3-3H14Z" fill="currentColor"/>
+ </svg>
+ </a>
</div>
+ </div>
</div>
-<div class="about-box" id="contact">
- <div style="display:grid; gap:16px; text-align:center;">
-
- <!-- Headshot -->
- <div
- style="
- width:180px;
- height:180px;
- margin:0 auto;
- border-radius:50%;
- background-image:url('https://lh3.googleusercontent.com/p/AF1QipOsCr_6xoDSkLUG33nLrJ9QwA2n9Q4NUIPw0qkt=s680-w680-h510-rw');
- background-size:cover;
- background-position:center;
- box-shadow:0 18px 50px rgba(0,0,0,.18);
- ">
- </div>
+ <div class="about-box" id="contact">
+ <div style="display:grid; gap:16px; text-align:center;">
+
+ <!-- Headshot -->
+ <div
+ style="
+ width:180px;
+ height:180px;
+ margin:0 auto;
+ border-radius:50%;
+ background-image:url('https://lh3.googleusercontent.com/p/AF1QipOsCr_6xoDSkLUG33nLrJ9QwA2n9Q4NUIPw0qkt=s680-w680-h510-rw');
+ background-size:cover;
+ background-position:center;
+ box-shadow:0 18px 50px rgba(0,0,0,.18);
+ ">
+ </div>
- <!-- Name + Title -->
- <div>
- <div style="
- font-family:Poppins,Inter,system-ui;
- font-weight:900;
- font-size:26px;
- letter-spacing:-.02em;
- ">
- Mia Druck
- </div>
- <div class="muted" style="font-weight:700;">
- Fort Lauderdale Real Estate
- </div>
- </div>
+ <!-- Name + Title -->
+ <div>
+ <div style="
+ font-family:Poppins,Inter,system-ui;
+ font-weight:900;
+ font-size:26px;
+ letter-spacing:-.02em;
+ ">
+ Mia Druck
+ </div>
+ <div class="muted" style="font-weight:700;">
+ Fort Lauderdale Real Estate
+ </div>
+ </div>
- <!-- Contact Info -->
- <div style="display:grid; gap:10px;">
- <a href="tel:9545527330" class="pill" style="height:46px; font-size:15px;">
- (954) 552-7330
- </a>
-
- <a
- href="mailto:[email protected]"
- class="btn-mini"
- style="justify-content:center; height:42px;"
- >
- Send me an email
- </a>
- </div>
+ <!-- Contact Info -->
+ <div style="display:grid; gap:10px;">
+ <a href="tel:9545527330" class="pill" style="height:46px; font-size:15px;">
+ (954) 552-7330
+ </a>
+
+ <a
+ href="mailto:[email protected]"
+ class="btn-mini"
+ style="justify-content:center; height:42px;"
+ >
+ Send me an email
+ </a>
+ </div>
- <!-- Trust line -->
- <div class="micro">
- ⭐⭐⭐⭐⭐ <br />
- <a href="https://share.google/sgExBQ7qvd5iWNHKI" target="_blank" rel="noopener">
- Read Google Reviews
- </a>
- </div>
+ <!-- Trust line -->
+ <div class="micro">
+ ⭐⭐⭐⭐⭐ <br />
+ <a href="https://share.google/sgExBQ7qvd5iWNHKI" target="_blank" rel="noopener">
+ Read Google Reviews
+ </a>
+ </div>
- </div>
-</div>
+ </div>
+ </div>
</div>
</div>
@@ -901,27 +982,27 @@
function listingCard(x){
const tags = (x.tags || []).slice(0,3).map(t => `<span class="tag">${esc(t)}</span>`).join("");
- const link = (x.link || "#").toString();
- const newTab = link.startsWith("http") ? `target="_blank" rel="noopener"` : "";
-
- return `
- <article class="card">
- <div class="card-img" style="background-image:url('${esc(x.image || "")}')"></div>
- <div class="card-pad">
- <div class="price">${esc(x.price || "")}</div>
- <h3 class="title">${esc(x.title || "")}</h3>
- <div class="meta">${esc(x.meta || "")}</div>
- <div class="meta">${esc(x.area || "")}</div>
- <div class="tags">${tags}</div>
- <div class="card-actions">
- <div class="btn-split">
- <a href="${esc(link)}" ${newTab}>See More</a>
- <a href="#contact" onclick="prefillListing('${esc(x.id || x.title)}'); switchToContact();">Contact</a>
- </div>
+ const link = (x.link || "#").toString();
+ const newTab = link.startsWith("http") ? `target="_blank" rel="noopener"` : "";
+
+ return `
+ <article class="card">
+ <div class="card-img" style="background-image:url('${esc(x.image || "")}')"></div>
+ <div class="card-pad">
+ <div class="price">${esc(x.price || "")}</div>
+ <h3 class="title">${esc(x.title || "")}</h3>
+ <div class="meta">${esc(x.meta || "")}</div>
+ <div class="meta">${esc(x.area || "")}</div>
+ <div class="tags">${tags}</div>
+ <div class="card-actions">
+ <div class="btn-split">
+ <a href="${esc(link)}" ${newTab}>See More</a>
+ <a href="#contact" onclick="prefillListing('${esc(x.id || x.title)}'); switchToContact();">Contact</a>
</div>
</div>
- </article>
- `;
+ </div>
+ </article>
+ `;
}
function soldCard(x){
@@ -954,21 +1035,21 @@
// Tabs: MLS vs Contact
// ---------------------------
const tabMLS = () => {
- document.getElementById("tab-mls").classList.add("active");
- document.getElementById("tab-contact").classList.remove("active");
- document.getElementById("panel-mls").classList.remove("hide");
- document.getElementById("panel-contact").classList.add("hide");
- document.getElementById("tab-mls").setAttribute("aria-selected","true");
- document.getElementById("tab-contact").setAttribute("aria-selected","false");
+ document.getElementById("tab-mls")?.classList.add("active");
+ document.getElementById("tab-contact")?.classList.remove("active");
+ document.getElementById("panel-mls")?.classList.remove("hide");
+ document.getElementById("panel-contact")?.classList.add("hide");
+ document.getElementById("tab-mls")?.setAttribute("aria-selected","true");
+ document.getElementById("tab-contact")?.setAttribute("aria-selected","false");
};
const tabContact = () => {
- document.getElementById("tab-contact").classList.add("active");
- document.getElementById("tab-mls").classList.remove("active");
- document.getElementById("panel-contact").classList.remove("hide");
- document.getElementById("panel-mls").classList.add("hide");
- document.getElementById("tab-contact").setAttribute("aria-selected","true");
- document.getElementById("tab-mls").setAttribute("aria-selected","false");
+ document.getElementById("tab-contact")?.classList.add("active");
+ document.getElementById("tab-mls")?.classList.remove("active");
+ document.getElementById("panel-contact")?.classList.remove("hide");
+ document.getElementById("panel-mls")?.classList.add("hide");
+ document.getElementById("tab-contact")?.setAttribute("aria-selected","true");
+ document.getElementById("tab-mls")?.setAttribute("aria-selected","false");
};
document.addEventListener("click", (e) => {
@@ -989,6 +1070,38 @@
if (b) b.value = v;
}
+ // ---------------------------
+ // Mobile hamburger toggle
+ // ---------------------------
+ (() => {
+ const topbar = document.querySelector(".topbar");
+ const btn = document.getElementById("navToggle");
+ const nav = document.getElementById("siteNav");
+ if (!topbar || !btn || !nav) return;
+
+ const close = () => {
+ topbar.classList.remove("nav-open");
+ btn.setAttribute("aria-expanded", "false");
+ };
+
+ btn.addEventListener("click", () => {
+ const open = topbar.classList.toggle("nav-open");
+ btn.setAttribute("aria-expanded", open ? "true" : "false");
+ });
+
+ nav.addEventListener("click", (e) => {
+ if (e.target && e.target.closest("a")) close();
+ });
+
+ document.addEventListener("click", (e) => {
+ if (!topbar.contains(e.target)) close();
+ });
+
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Escape") close();
+ });
+ })();
+
// expose for inline onclick
window.switchToContact = switchToContact;
window.prefillListing = prefillListing;
@@ -997,4 +1110,3 @@
</script>
</body>
</html>
-