Diff

/var/www/vhosts/3dshawn.com/shop.3dshawn.com/TEMPLATES/store_layouts/sidebar.html

added on local at 2026-07-01 22:10:05

Added

+109

lines

Removed

-0

lines

Context

unchanged

Blobs

from
to 953bf54a46b5

Restore this content →

Unified diff

Naive LCS-based line diff. Additions in emerald, deletions in rose. Both sides decompressed live from BLOB_STORE.

	1	<!-- =====================================================================
	2	LAYOUT: Sidebar
	3	Persistent left nav. Linear / Figma feel with content panels.
	4	===================================================================== -->
	5
	6	<style>
	7	:root { $theme_css_vars }
	8	.sb-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
	9	.sb-nav { background: var(--col-bg-2); border-right: 1px solid var(--col-border); padding: 20px 0; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
	10	.sb-section { padding: 12px 18px 6px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); font-weight: 600; }
	11	.sb-link { display: flex; align-items: center; gap: 10px; padding: 8px 18px; font-size: 13px; color: var(--col-text-2); text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s, background 0.15s; }
	12	.sb-link:hover { background: var(--col-surface-1); color: var(--col-text); }
	13	.sb-link.active { color: var(--col-accent-bright); background: var(--col-surface-1); border-left-color: var(--col-accent); font-weight: 600; }
	14	.sb-link .count { margin-left: auto; font-family: var(--font-mono,monospace); font-size: 11px; color: var(--col-text-3); }
	15	.sb-content { padding: 28px; }
	16	@media (max-width: 800px) { .sb-shell { grid-template-columns: 1fr; } .sb-nav { position: static; height: auto; } }
	17	</style>
	18
	19	[if:$preview_banner]<div style="position:sticky;top:0;z-index:9999;background:#0a0e1c;border-bottom:1px solid rgba(59,130,246,0.40);box-shadow:0 4px 16px rgba(0,0,0,0.55);padding:10px 20px;text-align:center;font-size:13px;color:#93c5fd;font-weight:600">$preview_banner</div>[/if]
	20
	21	[if:$is_specific_page]
	22	[if:$page_not_found]<section style="padding:120px 32px;text-align:center"><h1 class="hero-title" style="font-size:48px">Page not found</h1></section>[/if]
	23	[if:!$page_not_found]<section style="padding:60px 32px;max-width:900px;margin:0 auto"><h1 class="hero-title" style="font-size:42px">$page_title</h1><div class="text-secondary" style="font-size:16px;line-height:1.7;margin-top:18px;white-space:pre-wrap">$page_body</div></section>[/if]
	24	[/if]
	25
	26	[if:!$is_specific_page]
	27	<div class="sb-shell">
	28
	29	<!-- Persistent left navigation -->
	30	<aside class="sb-nav">
	31	<a href="/store.cgi?id=$store_id" style="display:flex;align-items:center;gap:10px;padding:0 18px 14px;text-decoration:none">
	32	<div class="brand-mark" style="background:linear-gradient(130deg, var(--col-accent), var(--col-accent-bright));width:28px;height:28px;font-size:11px">$store_initials</div>
	33	<span style="font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--col-text)">$store_name</span>
	34	</a>
	35	<!-- Sidebar layout has no horizontal header, so search + sign in +
	36	cart go right under the brand link inside the sidebar. -->
	37	<div style="padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--col-border);margin-bottom:8px">
	38	$store_search_form
	39	<div style="display:flex;gap:8px;align-items:center">$store_signin_link $store_cart_link</div>
	40	</div>
	41
	42	<div class="sb-section">Browse</div>
	43	<a href="#shop" class="sb-link active">
	44	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>
	45	All items <span class="count">$product_count</span>
	46	</a>
	47	<a href="#" class="sb-link">
	48	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><polygon points="12 2 15 8 22 9 17 14 18 21 12 17 6 21 7 14 2 9 9 8 12 2"/></svg>
	49	Featured <span class="count">3</span>
	50	</a>
	51	<a href="#" class="sb-link">
	52	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
	53	New drops <span class="count">4</span>
	54	</a>
	55	<div class="sb-section" style="margin-top:14px">Pages</div>
	56	<a href="/store.cgi?id=$store_id" class="sb-link">
	57	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><path d="M3 9 12 2l9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
	58	Home
	59	</a>
	60	[loop:@nav_pages]
	61	<a href="$loop1.href" class="sb-link">$loop1.title</a>
	62	[/loop]
	63	<a href="#" class="sb-link" style="color:var(--col-accent-bright);font-weight:600;margin-top:14px">
	64	<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg>
	65	Cart (0)
	66	</a>
	67	</aside>
	68
	69	<!-- Main content area -->
	70	<main class="sb-content">
	71	<div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap;gap:16px">
	72	<div>
	73	<div style="font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--col-text-3);font-weight:600">Browse / All items</div>
	74	<h1 style="font-family:var(--font-display);font-size:32px;font-weight:700;color:var(--col-text);margin:6px 0 0;letter-spacing:-0.02em">$product_count items</h1>
	75	<p style="font-size:14px;color:var(--col-text-2);margin-top:4px">$store_tagline</p>
	76	</div>
	77	<div style="display:flex;gap:8px">
	78	<select class="select" style="width:auto;min-width:140px"><option>Sort: Newest</option><option>Price: low</option><option>Price: high</option></select>
	79	</div>
	80	</div>
	81
	82	<div id="shop" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px">
	83	[loop:@products]
	84	<a href="/listing_details.cgi?id=$loop1.id" style="text-decoration:none;background:var(--col-surface-1);border:1px solid var(--col-border);border-radius:8px;overflow:hidden;display:block;transition:border-color 0.15s">
	85	<div style="aspect-ratio:1;background:url('$loop1.hero_image') center/cover"></div>
	86	<div style="padding:12px">
	87	<div style="font-size:13px;font-weight:600;color:var(--col-text);margin-bottom:6px">$loop1.title</div>
	88	<div style="display:flex;justify-content:space-between;align-items:center">
	89	<span style="font-size:14px;font-weight:700;color:var(--col-accent-bright)">$loop1.price</span>
	90	<span style="font-size:11px;color:var(--col-text-3)">$loop1.rating_n</span>
	91	</div>
	92	</div>
	93	</a>
	94	[/loop]
	95	</div>
	96	$pagination_html
	97
	98	<section id="about" style="background:var(--col-bg-2);border:1px solid var(--col-border);border-radius:12px;padding:32px;margin-top:36px">
	99	<h2 style="font-family:var(--font-display);font-size:24px;color:var(--col-text);margin:0 0 12px;font-weight:700">About $store_name</h2>
	100	<p style="font-size:15px;color:var(--col-text-2);line-height:1.8;margin:0">$store_about</p>
	101	</section>
	102	</main>
	103
	104	</div>
	105	[/if]
	106
	107	<footer style="border-top:1px solid var(--col-border);padding:18px 32px;text-align:center">
	108	<div class="text-xs text-dim" style="letter-spacing:1.5px;text-transform:uppercase">$store_name · powered by shop.3dshawn.com</div>
	109	</footer>