sidebar organised
This commit is contained in:
parent
efdda2e18b
commit
0a26a8b4a8
@ -14,11 +14,51 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.sidebar-btn {
|
/* Sidebar Components */
|
||||||
@apply 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;
|
|
||||||
|
.mobile-sidebar-header {
|
||||||
|
@apply
|
||||||
|
sticky
|
||||||
|
top-0
|
||||||
|
inset-x-0
|
||||||
|
z-20
|
||||||
|
lg:hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-sidebar-main {
|
.mobile-sidebar-header .mobile-sidebar-nav {
|
||||||
|
@apply
|
||||||
|
flex
|
||||||
|
p-4
|
||||||
|
sm:px-6
|
||||||
|
border-b
|
||||||
|
bg-white
|
||||||
|
dark:bg-neutral-800
|
||||||
|
dark:border-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
|
||||||
|
@apply text-xl font-semibold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside {
|
||||||
|
@apply
|
||||||
|
/* Position and Display */
|
||||||
|
transform
|
||||||
|
w-64
|
||||||
|
h-full
|
||||||
|
fixed
|
||||||
|
top-0
|
||||||
|
bottom-0
|
||||||
|
|
||||||
|
/* Colours and Border */
|
||||||
|
bg-white
|
||||||
|
border-e
|
||||||
|
border-gray-200
|
||||||
|
dark:bg-neutral-800
|
||||||
|
dark:border-neutral-700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside.sidebar-main {
|
||||||
@apply
|
@apply
|
||||||
[--auto-close:lg]
|
[--auto-close:lg]
|
||||||
lg:block
|
lg:block
|
||||||
@ -29,30 +69,14 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
transition-all
|
transition-all
|
||||||
duration-200
|
duration-200
|
||||||
ease-in
|
ease-in
|
||||||
|
|
||||||
/* Position and Display */
|
|
||||||
transform
|
|
||||||
w-64
|
|
||||||
h-full
|
|
||||||
fixed
|
|
||||||
top-0
|
|
||||||
start-0
|
start-0
|
||||||
bottom-0
|
|
||||||
z-[60]
|
z-[60]
|
||||||
|
|
||||||
/* Colours and Border */
|
|
||||||
bg-white
|
|
||||||
border-e
|
|
||||||
border-gray-200
|
|
||||||
dark:bg-neutral-800
|
|
||||||
dark:border-neutral-700;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-sidebar-guilds {
|
.sidebar-aside.guild-sidebar {
|
||||||
@apply
|
@apply
|
||||||
[--auto-close:lg]
|
[--auto-close:lg]
|
||||||
lg:block
|
lg:block
|
||||||
/* lg:translate-x-0 */
|
|
||||||
lg:end-auto
|
lg:end-auto
|
||||||
lg:bottom-0
|
lg:bottom-0
|
||||||
-translate-x-full
|
-translate-x-full
|
||||||
@ -60,30 +84,92 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
duration-200
|
duration-200
|
||||||
lg:duration-100
|
lg:duration-100
|
||||||
ease-in
|
ease-in
|
||||||
|
start-64
|
||||||
/* Position and Display */
|
|
||||||
transform
|
|
||||||
w-64
|
|
||||||
h-full
|
|
||||||
fixed
|
|
||||||
top-0
|
|
||||||
lg:start-64
|
|
||||||
start-0
|
|
||||||
bottom-0
|
|
||||||
z-[59]
|
z-[59]
|
||||||
|
|
||||||
/* Colours and Border */
|
|
||||||
bg-white
|
|
||||||
border-e
|
|
||||||
border-gray-200
|
|
||||||
dark:bg-neutral-800
|
|
||||||
dark:border-neutral-700;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container {
|
||||||
|
@apply
|
||||||
|
relative
|
||||||
|
flex
|
||||||
|
flex-col
|
||||||
|
h-full
|
||||||
|
max-h-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-header {
|
||||||
|
@apply
|
||||||
|
px-6
|
||||||
|
pt-4
|
||||||
|
flex
|
||||||
|
justify-between
|
||||||
|
items-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
|
||||||
|
@apply
|
||||||
|
flex-none
|
||||||
|
rounded-xl
|
||||||
|
text-xl
|
||||||
|
inline-block
|
||||||
|
font-semibold
|
||||||
|
focus:outline-none
|
||||||
|
focus:opacity-80;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content {
|
||||||
|
@apply
|
||||||
|
h-full
|
||||||
|
overflow-y-auto
|
||||||
|
[&::-webkit-scrollbar]:w-2
|
||||||
|
[&::-webkit-scrollbar-thumb]:rounded-full
|
||||||
|
[&::-webkit-scrollbar-track]:bg-gray-100
|
||||||
|
[&::-webkit-scrollbar-thumb]:bg-gray-300
|
||||||
|
dark:[&::-webkit-scrollbar-track]:bg-neutral-700
|
||||||
|
dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
|
||||||
|
@apply
|
||||||
|
px-4
|
||||||
|
py-6
|
||||||
|
w-full
|
||||||
|
h-full
|
||||||
|
flex
|
||||||
|
flex-col
|
||||||
|
flex-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .sidebar-btn {
|
||||||
|
@apply
|
||||||
|
w-full
|
||||||
|
flex
|
||||||
|
items-center
|
||||||
|
gap-x-3.5
|
||||||
|
py-2
|
||||||
|
px-2.5
|
||||||
|
text-sm
|
||||||
|
rounded-md
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* End Sidebar Components */
|
||||||
|
|
||||||
|
/* Guild Header */
|
||||||
|
|
||||||
.guild-header-btn {
|
.guild-header-btn {
|
||||||
@apply text-sm text-gray-800 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500;
|
@apply text-sm text-gray-800 hover:text-blue-600 focus:outline-none focus:text-blue-600 dark:text-neutral-200 dark:hover:text-blue-500 dark:focus:text-blue-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.guild-header-btn.active {
|
.guild-header-btn.active {
|
||||||
@apply text-blue-600;
|
@apply text-blue-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* End Guild Header */
|
||||||
|
|||||||
@ -1347,11 +1347,6 @@ video {
|
|||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.py-6 {
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
padding-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pb-1 {
|
.pb-1 {
|
||||||
padding-bottom: 0.25rem;
|
padding-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
@ -1644,12 +1639,195 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
src: url("/static/fonts/inter-variablefont.ttf");
|
src: url("/static/fonts/inter-variablefont.ttf");
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn {
|
/* Sidebar Components */
|
||||||
|
|
||||||
|
.mobile-sidebar-header {
|
||||||
|
position: sticky;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.mobile-sidebar-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-header .mobile-sidebar-nav {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
border-bottom-width: 1px;
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.mobile-sidebar-header .mobile-sidebar-nav {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-header .mobile-sidebar-nav:where(.dark, .dark *) {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-header .mobile-sidebar-nav .mobile-sidebar-brand {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 100%;
|
||||||
|
width: 16rem;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
border-inline-end-width: 1px;
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside:where(.dark, .dark *) {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside.sidebar-main {
|
||||||
|
inset-inline-start: 0px;
|
||||||
|
z-index: 60;
|
||||||
|
--tw-translate-x: -100%;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||||
|
--auto-close: lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.sidebar-aside.sidebar-main {
|
||||||
|
inset-inline-end: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
display: block;
|
||||||
|
--tw-translate-x: 0px;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside.guild-sidebar {
|
||||||
|
inset-inline-start: 16rem;
|
||||||
|
z-index: 59;
|
||||||
|
--tw-translate-x: -100%;
|
||||||
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||||
|
transition-property: all;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 200ms;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||||
|
--auto-close: lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.sidebar-aside.guild-sidebar {
|
||||||
|
inset-inline-end: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
display: block;
|
||||||
|
transition-duration: 100ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
padding-right: 1.5rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand {
|
||||||
|
display: inline-block;
|
||||||
|
flex: none;
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
line-height: 1.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-header .sidebar-brand:focus {
|
||||||
|
opacity: 0.8;
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 9999px;
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content:where(.dark, .dark *)::-webkit-scrollbar-thumb {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(115 115 115 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar-track {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content:where(.dark, .dark *)::-webkit-scrollbar-track {
|
||||||
|
--tw-bg-opacity: 1;
|
||||||
|
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content::-webkit-scrollbar {
|
||||||
|
width: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-aside .sidebar-container .sidebar-content .sidebar-nav {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav .sidebar-btn {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
-moz-column-gap: 0.875rem;
|
-moz-column-gap: 0.875rem;
|
||||||
column-gap: 0.875rem;
|
column-gap: 0.875rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.375rem;
|
||||||
padding-top: 0.5rem;
|
padding-top: 0.5rem;
|
||||||
padding-bottom: 0.5rem;
|
padding-bottom: 0.5rem;
|
||||||
padding-left: 0.625rem;
|
padding-left: 0.625rem;
|
||||||
@ -1660,112 +1838,38 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn:hover {
|
.sidebar-nav .sidebar-btn:hover {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn:focus {
|
.sidebar-nav .sidebar-btn:focus {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
||||||
outline: 2px solid transparent;
|
outline: 2px solid transparent;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn:where(.dark, .dark *) {
|
.sidebar-nav .sidebar-btn:where(.dark, .dark *) {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
color: rgb(229 229 229 / var(--tw-text-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn:hover:where(.dark, .dark *) {
|
.sidebar-nav .sidebar-btn:hover:where(.dark, .dark *) {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-btn:focus:where(.dark, .dark *) {
|
.sidebar-nav .sidebar-btn:focus:where(.dark, .dark *) {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
background-color: rgb(64 64 64 / var(--tw-bg-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
.layout-sidebar-main {
|
/* End Sidebar Components */
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
inset-inline-start: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 60;
|
|
||||||
height: 100%;
|
|
||||||
width: 16rem;
|
|
||||||
--tw-translate-x: -100%;
|
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
||||||
border-inline-end-width: 1px;
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 200ms;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
||||||
--auto-close: lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
/* Guild Header */
|
||||||
.layout-sidebar-main {
|
|
||||||
inset-inline-end: auto;
|
|
||||||
bottom: 0px;
|
|
||||||
display: block;
|
|
||||||
--tw-translate-x: 0px;
|
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-sidebar-main:where(.dark, .dark *) {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-sidebar-guilds {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
inset-inline-start: 0px;
|
|
||||||
bottom: 0px;
|
|
||||||
z-index: 59;
|
|
||||||
height: 100%;
|
|
||||||
width: 16rem;
|
|
||||||
--tw-translate-x: -100%;
|
|
||||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
||||||
border-inline-end-width: 1px;
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 200ms;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
|
||||||
--auto-close: lg;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.layout-sidebar-guilds {
|
|
||||||
inset-inline-end: auto;
|
|
||||||
bottom: 0px;
|
|
||||||
inset-inline-start: 16rem;
|
|
||||||
display: block;
|
|
||||||
transition-duration: 100ms;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.layout-sidebar-guilds:where(.dark, .dark *) {
|
|
||||||
--tw-border-opacity: 1;
|
|
||||||
border-color: rgb(64 64 64 / var(--tw-border-opacity, 1));
|
|
||||||
--tw-bg-opacity: 1;
|
|
||||||
background-color: rgb(38 38 38 / var(--tw-bg-opacity, 1));
|
|
||||||
}
|
|
||||||
|
|
||||||
.guild-header-btn {
|
.guild-header-btn {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
@ -1806,6 +1910,8 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
color: rgb(37 99 235 / var(--tw-text-opacity, 1));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* End Guild Header */
|
||||||
|
|
||||||
.before\:absolute::before {
|
.before\:absolute::before {
|
||||||
content: var(--tw-content);
|
content: var(--tw-content);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -2477,4 +2583,4 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
|
|||||||
|
|
||||||
.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
|
.\[\&\:\:-webkit-scrollbar\]\:w-2::-webkit-scrollbar {
|
||||||
width: 0.5rem;
|
width: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -8,139 +8,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 font-[Inter]">
|
<body class="bg-neutral-100 dark:bg-neutral-900 text-gray-600 dark:text-gray-400 font-[Inter]">
|
||||||
|
|
||||||
<!-- Mobile Sidebar Controls -->
|
<%- include("sidebar") -%>
|
||||||
<header class="sticky top-0 inset-x-0 z-20 lg:hidden">
|
|
||||||
<nav class="flex p-4 sm:px-6 border-b bg-white dark:bg-neutral-800 dark:border-neutral-700">
|
|
||||||
<a href="/" class="text-xl font-semibold">Relay</a>
|
|
||||||
<button type="button" class="ml-auto" data-hs-overlay="#layoutSidebarMain">
|
|
||||||
<svg class="shrink-0 size-6" 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"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
<!-- End Mobile Sidebar Controls -->
|
|
||||||
|
|
||||||
<!-- Sidebar -->
|
|
||||||
<aside id="layoutSidebarMain" class="layout-sidebar-main hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
|
|
||||||
<div class="relative flex flex-col h-full max-h-full">
|
|
||||||
<!-- Sidebar Header -->
|
|
||||||
<div class="px-6 pt-4 flex justify-between items-center">
|
|
||||||
<a href="/" class="flex-none rounded-xl text-xl inline-block font-semibold focus:outline-none focus:opacity-80">
|
|
||||||
Relay
|
|
||||||
</a>
|
|
||||||
<button type="button" class="lg:hidden" data-hs-overlay="#layoutSidebarMain">
|
|
||||||
<svg class="shrink-0 size-5" 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- End Sidebar Header -->
|
|
||||||
<!-- Sidebar Content -->
|
|
||||||
<div class="h-full overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
|
|
||||||
<nav class="px-4 py-6 w-full h-full flex flex-col flex-wrap">
|
|
||||||
<ul class="flex flex-col space-y-1">
|
|
||||||
<li>
|
|
||||||
<a href="/" 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">
|
|
||||||
<svg class="shrink-0 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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
||||||
Dashboard
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<button type="button" class="w-full 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" data-hs-overlay="#layoutSidebarGuilds">
|
|
||||||
<svg class="shrink-0 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"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
|
||||||
Servers
|
|
||||||
|
|
||||||
<svg class="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"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
|
||||||
<svg class="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"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
|
||||||
</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</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 hs-dropdown flex">
|
|
||||||
<button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full 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">
|
|
||||||
Colour Theme
|
|
||||||
</button>
|
|
||||||
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
|
|
||||||
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
|
|
||||||
Default (Light)
|
|
||||||
</button>
|
|
||||||
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
|
|
||||||
Dark
|
|
||||||
</button>
|
|
||||||
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
|
|
||||||
Auto (System)
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- <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">
|
|
||||||
<span></span>
|
|
||||||
</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 -->
|
|
||||||
|
|
||||||
<!-- Guild Sidebar -->
|
|
||||||
<aside id="layoutSidebarGuilds" class="layout-sidebar-guilds hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
|
|
||||||
<div class="relative flex flex-col h-full max-h full">
|
|
||||||
<!-- Guild Sidebar Header -->
|
|
||||||
<div class="px-6 pt-4 mt-1 flex justify-between items-center">
|
|
||||||
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm font-semibold">
|
|
||||||
Discord Servers
|
|
||||||
</span>
|
|
||||||
<button type="button" data-hs-overlay="#layoutSidebarGuilds">
|
|
||||||
<svg class="shrink-0 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"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<!-- End Guild Sidebar Header -->
|
|
||||||
<!-- Guild Sidebar Content -->
|
|
||||||
<div class="px-4 py-6 w-full h-full flex flex-col flex-wrap">
|
|
||||||
<ul class="flex flex-col space-y-1">
|
|
||||||
<% guilds.forEach(guild => { %>
|
|
||||||
<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-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
|
|
||||||
<% } else { %>
|
|
||||||
<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"><%= guild.name %></span>
|
|
||||||
<!-- <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span> -->
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<% }); %>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<!-- End Guild Sidebar Content -->
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
<!-- End Guild Sidebar -->
|
|
||||||
|
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<div class="w-full lg:ps-64">
|
<div class="w-full lg:ps-64">
|
||||||
|
|||||||
153
src/client/views/sidebar.ejs
Normal file
153
src/client/views/sidebar.ejs
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
<!-- Mobile Sidebar Controls -->
|
||||||
|
<header class="mobile-sidebar-header">
|
||||||
|
<nav class="mobile-sidebar-nav">
|
||||||
|
<a href="/" class="mobile-sidebar-brand">Relay</a>
|
||||||
|
<button type="button" class="ml-auto" data-hs-overlay="#layoutSidebarMain">
|
||||||
|
<svg class="shrink-0 size-6" 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"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<!-- End Mobile Sidebar Controls -->
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside id="layoutSidebarMain" class="sidebar-aside sidebar-main hs-overlay hs-overlay-open:translate-x-0" role="dialog" tabindex="-1">
|
||||||
|
<div class="sidebar-container">
|
||||||
|
<!-- Sidebar Header -->
|
||||||
|
<div class="sidebar-header">
|
||||||
|
<a href="/" class="sidebar-header-brand">
|
||||||
|
Relay
|
||||||
|
</a>
|
||||||
|
<button type="button" class="lg:hidden" data-hs-overlay="#layoutSidebarMain">
|
||||||
|
<svg class="shrink-0 size-5" 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"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- End Sidebar Header -->
|
||||||
|
<!-- Sidebar Content -->
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<ul class="flex flex-col space-y-1">
|
||||||
|
<li>
|
||||||
|
<a href="/" class="sidebar-btn">
|
||||||
|
<svg class="shrink-0 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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<button type="button" class="sidebar-btn" data-hs-overlay="#layoutSidebarGuilds">
|
||||||
|
<svg class="shrink-0 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"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
|
||||||
|
Servers
|
||||||
|
|
||||||
|
<svg class="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"><polyline points="9 18 15 12 9 6"></polyline></svg>
|
||||||
|
<svg class="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"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="sidebar-btn">
|
||||||
|
<svg class="shrink-0 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"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
|
||||||
|
Source Code
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="sidebar-btn">
|
||||||
|
<svg class="shrink-0 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"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
|
||||||
|
Help
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="#" class="sidebar-btn">
|
||||||
|
<svg class="shrink-0 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"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</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 hs-dropdown flex">
|
||||||
|
<button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full 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">
|
||||||
|
Colour Theme
|
||||||
|
</button>
|
||||||
|
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
|
||||||
|
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
|
||||||
|
Default (Light)
|
||||||
|
</button>
|
||||||
|
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
|
||||||
|
Dark
|
||||||
|
</button>
|
||||||
|
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
|
||||||
|
Auto (System)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- <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">
|
||||||
|
<span></span>
|
||||||
|
</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 -->
|
||||||
|
|
||||||
|
<!-- Guild Sidebar -->
|
||||||
|
<aside id="layoutSidebarGuilds" class="sidebar-aside guild-sidebar hs-overlay hs-overlay-open:translate-x-0 [--is-layout-affect:true]" role="dialog" tabindex="-1">
|
||||||
|
<div class="sidebar-container">
|
||||||
|
<!-- Guild Sidebar Header -->
|
||||||
|
<div class="sidebar-header">
|
||||||
|
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm font-semibold">
|
||||||
|
Discord Servers
|
||||||
|
</span>
|
||||||
|
<button type="button" data-hs-overlay="#layoutSidebarGuilds">
|
||||||
|
<svg class="shrink-0 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"><polyline points="15 18 9 12 15 6"></polyline></svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- End Guild Sidebar Header -->
|
||||||
|
<!-- Guild Sidebar Content -->
|
||||||
|
<div class="sidebar-content">
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<ul class="flex flex-col space-y-1">
|
||||||
|
<% guilds.forEach(guild => { %>
|
||||||
|
<li>
|
||||||
|
<a href="/guild/<%= guild.id %>" class="sidebar-btn">
|
||||||
|
<% if (guild.icon) { %>
|
||||||
|
<img class="size-[28px] rounded" src="<%= guild.iconURL() %>" alt="<%= guild.name %>">
|
||||||
|
<% } else { %>
|
||||||
|
<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"><%= guild.name %></span>
|
||||||
|
<!-- <span class="text-sm font-mono text-gray-600 dark:text-gray-400"><%= guild.id %></span> -->
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<% }); %>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<!-- End Guild Sidebar Content -->
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- End Guild Sidebar -->
|
||||||
Loading…
x
Reference in New Issue
Block a user