corbz/pyrss-ng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sidebar user menu (unfinished)

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-01-28 15:09:23 +00:00
parent 6fe3ce4b34
commit ca470154d4
2 changed files with 115 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/client/public/css/tailwind.css
View File

@ -803,6 +803,10 @@ video {
display: table;
}
.grid {
display: grid;
}
.\!hidden {
display: none !important;
}
@ -846,6 +850,11 @@ video {
height: 2rem;
}
.size-\[28px\] {
width: 28px;
height: 28px;
}
.size-\[34px\] {
width: 34px;
height: 34px;
@ -892,6 +901,10 @@ video {
width: 7rem;
}
.w-60 {
width: 15rem;
}
.w-\[260px\] {
width: 260px;
}
@ -959,6 +972,10 @@ video {
resize: both;
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-row {
flex-direction: row;
}
@ -999,6 +1016,10 @@ video {
gap: 0.25rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
@ -1121,6 +1142,10 @@ video {
border-inline-end-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-solid {
border-style: solid;
}
@ -1203,6 +1228,10 @@ video {
stroke: #2563eb;
}
.p-1 {
padding: 0.25rem;
}
.p-1\.5 {
padding: 0.375rem;
}
@ -1433,6 +1462,12 @@ video {
opacity: 0;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@ -1486,6 +1521,10 @@ video {
transition-duration: 500ms;
}
.\[--auto-close\:inside\] {
--auto-close: inside;
}
.\[--auto-close\:lg\] {
--auto-close: lg;
}
@ -1498,6 +1537,10 @@ video {
--placement: bottom-right;
}
.\[--strategy\:absolute\] {
--strategy: absolute;
}
/* flex items-center gap-x-3.5 py-2 px-2.5 bg-gray-100 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-700 dark:text-white
hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 text-sm text-gray-800 rounded-lg hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:text-neutral-200 */
@ -1741,18 +1784,50 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
opacity: 0.5;
}
.hs-dropdown.open > .hs-dropdown-open\:block {
display: block;
}
.hs-dropdown.open > .hs-dropdown-open\:hidden {
display: none;
}
.hs-dropdown.open > .hs-dropdown-open\:opacity-100 {
opacity: 1;
}
.hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:block {
display: block;
}
.hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:hidden {
display: none;
}
.hs-dropdown.open > .hs-dropdown-toggle .hs-dropdown-open\:opacity-100 {
opacity: 1;
}
.hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:block {
display: block;
}
.hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:hidden {
display: none;
}
.hs-dropdown.open > .hs-dropdown-menu > .hs-dropdown-open\:opacity-100 {
opacity: 1;
}
.hs-dropdown-menu.open.hs-dropdown-open\:block {
display: block;
}
.hs-dropdown-menu.open.hs-dropdown-open\:hidden {
display: none;
}
.hs-dropdown-menu.open.hs-dropdown-open\:opacity-100 {
opacity: 1;
}
@ -2013,6 +2088,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
}
.dark\:text-neutral-300:where(.dark, .dark *) {
--tw-text-opacity: 1;
color: rgb(212 212 212 / var(--tw-text-opacity, 1));
}
.dark\:text-neutral-400:where(.dark, .dark *) {
--tw-text-opacity: 1;
color: rgb(163 163 163 / var(--tw-text-opacity, 1));

41
src/client/views/layout.ejs
View File

@ -6,7 +6,7 @@
<title><%= title %></title>
<link rel="stylesheet" href="/static/css/tailwind.css">
</head>
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400">
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 dark">
<!-- Mobile Sidebar Controls -->
<header class="sticky top-0 inset-x-0 z-20 lg:hidden">
@ -55,6 +55,35 @@
</nav>
</div>
<!-- End Sidebar Content -->
<!-- Sidebar Footer -->
<div class="mt-auto p-2 border-t border-gray-200 dark:border-neutral-700">
<div class="hs-dropdown [--strategy:absolute] [--auto-close:inside] relative w-full inline-flex">
<button type="button" id="userMenu" class="w-full inline-flex shrink-0 items-center gap-x-2 p-2 text-start text-sm text-gray-800 rounded-md hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-200 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<img class="shrink-0 size-5 rounded-full" src="https://images.unsplash.com/photo-1734122415415-88cb1d7d5dc0?q=80&w=320&h=320&auto=format&fit=facearea&facepad=3&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
Username Here
<svg class="block hs-dropdown-open:hidden ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
<svg class="hidden hs-dropdown-open:block ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
placeholder button
</a>
</div>
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
placeholder button
</a>
</div>
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Logout
</a>
</div>
</div>
</div>
</div>
<!-- End Sidebar Footer -->
</div>
</aside>
<!-- End Sidebar -->
@ -79,15 +108,15 @@
<li>
<a href="/guild/<%= guild.id %>" class="flex items-center gap-x-3.5 py-2 px-2.5 text-sm rounded-lg focus:outline-none text-gray-800 hover:bg-gray-100 focus:bg-gray-100 dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:text-neutral-200">
<% if (guild.icon) { %>
<img class="size-[34px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
<img class="size-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
<% } else { %>
<div class="size-[34px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
<span class="text-xs font-semibold"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
<div class="size-[28px] flex shrink-0 justify-center items-center rounded bg-neutral-100 dark:bg-neutral-900">
<span class="text-xs"><%= guild.name.split(" ").slice(0, 2).map(word => word[0].toUpperCase()).join(""); %></span>
</div>
<% } %>
<div>
<span class="text-base font-semibold"><%= guild.name %></span>
<span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span>
<span class="text-base"><%= guild.name %></span>
<!-- <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span> -->
</div>
</a>
</li>