Skip to content

Commit

Permalink
Make sidebar buttons greyed out
Browse files Browse the repository at this point in the history
  • Loading branch information
@TimDaub
TimDaub committed Jul 9, 2024
1 parent ee87a8d commit 7ecbefb
Show file tree
Hide file tree
Showing 6 changed files with 397 additions and 78 deletions.
1 change: 1 addition & 0 deletions src/public/news.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
.bell-button:active,
.sidebar-div:active,
#nav-profile:active,
#nav-submit:active,
#nav-settings:active {
transform: scale(0.92);
transition: transform 0.1s ease;
Expand Down
234 changes: 220 additions & 14 deletions src/views/components/sidebar.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,173 @@ const envelopefull = html`
/>
</svg>
`;
const profilefull = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<path
d="M172,120a44,44,0,1,1-44-44A44,44,0,0,1,172,120Zm52-72V208a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V48A16,16,0,0,1,48,32H208A16,16,0,0,1,224,48ZM208,208V48H48V208h3.67a80.58,80.58,0,0,1,26.07-38.25q3.08-2.48,6.36-4.62a4,4,0,0,1,4.81.33,59.82,59.82,0,0,0,78.18,0,4,4,0,0,1,4.81-.33q3.28,2.15,6.36,4.62A80.58,80.58,0,0,1,204.33,208H208Z"
/>
</svg>
`;

const profile = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<circle
cx="128"
cy="120"
r="40"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<rect
x="40"
y="40"
width="176"
height="176"
rx="8"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M57.78,216a72,72,0,0,1,140.44,0"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
`;

const settingsfull = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<path
d="M216,130.16q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"
/>
</svg>
`;

const settings = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<circle
cx="128"
cy="128"
r="40"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M130.05,206.11c-1.34,0-2.69,0-4,0L94,224a104.61,104.61,0,0,1-34.11-19.2l-.12-36c-.71-1.12-1.38-2.25-2-3.41L25.9,147.24a99.15,99.15,0,0,1,0-38.46l31.84-18.1c.65-1.15,1.32-2.29,2-3.41l.16-36A104.58,104.58,0,0,1,94,32l32,17.89c1.34,0,2.69,0,4,0L162,32a104.61,104.61,0,0,1,34.11,19.2l.12,36c.71,1.12,1.38,2.25,2,3.41l31.85,18.14a99.15,99.15,0,0,1,0,38.46l-31.84,18.1c-.65,1.15-1.32,2.29-2,3.41l-.16,36A104.58,104.58,0,0,1,162,224Z"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
`;
const disconnect = html`
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none" />
<line
x1="144"
y1="144"
x2="120"
y2="168"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line x1="144" y1="144" x2="120" y2="168" fill="#231f20" />
<line
x1="112"
y1="112"
x2="88"
y2="136"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line x1="112" y1="112" x2="88" y2="136" fill="#231f20" />
<line
x1="64"
y1="112"
x2="144"
y2="192"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="58.06"
y1="197.94"
x2="24"
y2="232"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M132,180l-29,29a24,24,0,0,1-33.94,0L47,186.91A24,24,0,0,1,47,153l29-29"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="112"
y1="64"
x2="192"
y2="144"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<line
x1="197.94"
y1="58.06"
x2="232"
y2="24"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
<path
d="M180,132l29-29a24,24,0,0,0,0-33.94L186.91,47A24,24,0,0,0,153,47L124,76"
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
/>
</svg>
`;

const sidebar = (path) => html`
<div class="sidebar" id="mySidebar" style="color: black;">
<a class="kiwi-logo" href="/">🥝</a>
Expand All @@ -379,18 +546,20 @@ const sidebar = (path) => html`
<span>Home</span>
</div>
</a>
<a
title="Submit"
href="/submit"
style="color: black; text-decoration: none;"
>
<div style="display: flex; align-items: center;">
<div class="svg-container">
${path === "/submit" ? submitfull : submit}
<div id="nav-submit">
<a
title="Submit"
href=""
style="color: grey; text-decoration: none; display: block;"
>
<div style="display: flex; align-items: center;">
<div class="svg-container">
${path === "/submit" ? submitfull : submit}
</div>
<span>Submit</span>
</div>
<span>Submit</span>
</div>
</a>
</a>
</div>
<a
title="Community"
href="/community"
Expand Down Expand Up @@ -440,9 +609,46 @@ const sidebar = (path) => html`
<span>Learn</span>
</div>
</a>
<div id="nav-profile"><a></a></div>
<div id="nav-settings"><a></a></div>
<div id="nav-disconnect"><a></a></div>
<div id="nav-profile">
<a
title="Profile"
href=""
style="color: grey; text-decoration: none; display: block;"
>
<div style="display: flex; align-items: center;">
<div class="svg-container">
${path === "/upvotes" ? profilefull : profile}
</div>
<span>Profile</span>
</div>
</a>
</div>
<div id="nav-settings">
<a
title="Settings"
href=""
style="color: grey; text-decoration: none; display: block;"
>
<div style="display: flex; align-items: center;">
<div class="svg-container">
${path === "/settings" ? settingsfull : settings}
</div>
<span>Settings</span>
</div>
</a>
</div>
<div id="nav-disconnect">
<a
title="Disconnect"
href=""
style="color: grey; text-decoration: none; display: block;"
>
<div style="display: flex; align-items: center;">
<div class="svg-container">${disconnect}</div>
<span>Disconnect</span>
</div>
</a>
</div>
</div>
<div id="overlay"></div>
`;
Expand Down
1 change: 1 addition & 0 deletions src/views/settings.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default async function index(theme, identity) {
if (identity) {
profile = await ens.resolve(identity);
}
const path = "/settings";
return html`
<html lang="en" op="news">
<head>
Expand Down
3 changes: 2 additions & 1 deletion src/views/upvotes.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,7 @@ export default async function (
: "";
const twitterCard = "summary";
const points = karma.resolve(identity);
const path = "/upvotes";
return html`
<html lang="en" op="news">
<head>
Expand All @@ -196,7 +197,7 @@ export default async function (
</head>
<body>
<div class="container">
${Sidebar()}
${Sidebar(path)}
<div id="hnmain">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#f6f6ef">
<tr>
Expand Down
Loading

0 comments on commit 7ecbefb

Please sign in to comment.