nodebb-theme-harmony 0.0.1 → 0.0.3

package/templates/partials/groups/sidebar-left.tpl

@@ -0,0 +1,27 @@
+<div class="col-12 col-md-3 col-lg-2 border-end-md text-sm mb-3">
+	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
+			<div class="flex-1">[[global:posts]]</div>
+		</button>
+		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[groups:members]]</div>
+			<span class="text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
+		</button>
+
+		{{{ if group.isOwner }}}
+		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[groups:details.pending]]</div>
+			<span class="text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
+		</button>
+
+		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[groups:details.invited]]</div>
+			<span class="text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
+		</button>
+
+		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost fw-semibold">
+			<div class="flex-1">[[global:header.admin]]</div>
+		</button>
+		{{{ end }}}
+	</div>
+</div>

package/templates/partials/mobile-footer.tpl

@@ -0,0 +1,70 @@
+<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
+	<div class="bottom-sheet">
+		<button class="btn" data-bs-toggle="dropdown">
+			<i class="fa fa-bars"></i>
+		</button>
+		<ul class="dropdown-menu">
+			{{{ each navigation }}}
+			<!-- IF function.displayMenuItem, @index -->
+			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+				<a class="nav-link nav-btn navigation-link p-3 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+				{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+					<span class="d-inline-flex justify-content-between align-items-center w-100">
+						<span class="text-nowrap truncate-open">
+							{{{ if ./iconClass }}}
+							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+							{{{ end }}}
+							{{{ if navigation.text }}}
+							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
+							{{{ end }}}
+						</span>
+						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+					</span>
+				</a>
+				{{{ if navigation.dropdown }}}
+				<div class="ps-3">
+					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+						{navigation.dropdownContent}
+					</ul>
+				</div>
+				{{{ end }}}
+			</li>
+			<!-- ENDIF function.displayMenuItem -->
+			{{{end}}}
+		</ul>
+	</div>
+
+	<div class="">
+		{{{ if config.loggedIn }}}
+		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+			{{{ if config.searchEnabled }}}
+			<li component="sidebar/search" class="nav-item m-0 search bottom-sheet position-relative">
+			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+			</li>
+			{{{ end }}}
+
+			<li component="notifications" class="nav-item m-0 notifications bottom-sheet">
+			<!-- IMPORT partials/sidebar/notifications.tpl -->
+			</li>
+
+			{{{ if canChat }}}
+			<li class="nav-item m-0 chats bottom-sheet">
+			<!-- IMPORT partials/sidebar/chats.tpl -->
+			</li>
+			{{{ end }}}
+
+			<li component="sidebar/drafts" class="nav-item m-0 drafts bottom-sheet">
+			<!-- IMPORT partials/sidebar/drafts.tpl -->
+			</li>
+
+			<li id="user_label" class="nav-item m-0 py-2 bottom-sheet usermenu">
+			<!-- IMPORT partials/sidebar/user-menu.tpl -->
+			</li>
+		</ul>
+		{{{ else }}}
+		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+		</ul>
+		{{{ end }}}
+	</div>
+</div>

package/templates/partials/notifications_list.tpl

@@ -1,32 +1,24 @@
-<!-- THIS FILE IS STILL PERSONA -->
+{{{ if !notifications.length }}}
+<li class="no-notifs text-center"><a href="#" class="text-reset">[[notifications:no_notifs]]</a></li>
+{{{ end }}}
 
-
-<!-- IF !notifications.length -->
-<li class="no-notifs"><a href="#">[[notifications:no_notifs]]</a></li>
-<!-- ENDIF !notifications.length -->
-
-{{{each notifications}}}
-<li class="{notifications.readClass}" data-nid="{notifications.nid}" data-path="{notifications.path}" <!-- IF notifications.pid --> data-pid="{notifications.pid}"<!-- ENDIF notifications.pid --><!-- IF notifications.tid --> data-tid="{notifications.tid}"<!-- ENDIF notifications.tid -->>
-	<!-- IF notifications.image -->
-	<!-- IF notifications.from -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="float-start user-img avatar avatar-rounded" style="--avatar-size: 32px;" src="{notifications.image}" /></a>
-	<!-- ENDIF notifications.from -->
-	<!-- ELSE -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="float-start avatar avatar-rounded" style="--avatar-size: 32px; background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
-	<!-- ENDIF notifications.image -->
-
-	<a href="{notifications.path}" class="notification-chat-content deco-none">
-		<span class="text">{notifications.bodyShort}</span>
-	</a>
-
-	<div class="notification-chat-controls">
-		{{{ if ./nid }}}
-		<div class="mark-read" aria-label="Mark Read">
-			<i class="unread fa fa-circle"></i>
-			<i class="read fa fa-circle-o"></i>
+{{{ each notifications }}}
+<li class="{./readClass} mb-2" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
+	<div class="d-flex gap-1 justify-content-between">
+		<div>
+			<a href="{./path}" class="notification-chat-content text-reset">
+				<span class="text text-sm">{./bodyShort}</span>
+			</a>
+			<div class="text-xs text-muted">{./timeagoLong}</div>
+		</div>
+		<div class="notification-chat-controls">
+			{{{ if ./nid }}}
+			<button class="mark-read btn btn-light btn-sm" aria-label="Mark Read">
+				<i class="unread fa fa-xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}"></i>
+				<i class="read fa fa-xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}"></i>
+			</button>
+			{{{ end }}}
 		</div>
-		{{{ end }}}
-		<span class="relTime">{notifications.timeago}</span>
 	</div>
 </li>
 {{{end}}}

package/templates/partials/paginator.tpl

@@ -1,47 +1,45 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div component="pagination" class="pagination-container<!-- IF !pagination.pages.length --> hidden<!-- ENDIF !pagination.pages.length -->">
-	<ul class="pagination hidden-xs justify-content-center">
-		<li class="page-item previous float-start<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a class="page-link" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+<div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
+	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
+		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
+			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
-			<!-- IF pagination.pages.separator -->
+			{{{ if pagination.pages.separator }}}
 			<li component="pagination/select-page" class="page-item page select-page">
-				<a class="page-link" href="#"><i class="fa fa-ellipsis-h"></i></a>
+				<a class="page-link rounded fw-secondary text-reset px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
-			<!-- ELSE -->
-			<li class="page-item page<!-- IF pagination.pages.active --> active<!-- ENDIF pagination.pages.active -->" >
-				<a class="page-link" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+			{{{ else }}}
+			<li class="page-item page{{{ if pagination.pages.active }}} active{{{ end }}}" >
+				<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
-			<!-- ENDIF pagination.pages.separator -->
+			{{{ end }}}
 		{{{end}}}
 
-		<li class="page-item next float-end<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a class="page-link" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
+			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
-	<ul class="pagination hidden-sm hidden-md hidden-lg justify-content-center">
-		<li class="page-item first<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a class="page-link" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+	<ul class="pagination pagination-sm hidden-md hidden-lg justify-content-center">
+		<li class="page-item first{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
+			<a class="page-link fw-secondary text-reset" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
-		<li class="page-item previous<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a class="page-link" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+		<li class="page-item previous{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
+			<a class="page-link fw-secondary text-reset" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		<li component="pagination/select-page" class="page-item page select-page">
-			<a class="page-link" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+			<a class="page-link fw-secondary text-reset" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
-		<li class="page-item next<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a class="page-link" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+		<li class="page-item next{{{ if !pagination.next.active }}} disabled{{{ end }}}">
+			<a class="page-link fw-secondary text-reset" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
-		<li class="page-item last<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a class="page-link" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+		<li class="page-item last{{{ if !pagination.next.active }}} disabled{{{ end }}}">
+			<a class="page-link fw-secondary text-reset" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
 </div>

package/templates/partials/post_bar.tpl

@@ -1,22 +1,27 @@
-<!-- THIS FILE IS STILL PERSONA -->
+<nav class="sticky-tools navbar navbar-expand mt-4 p-0 border-0 rounded topic-main-buttons">
+	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
+		<ul class="navbar-nav me-auto gap-2 align-items-center">
+			{{{ if loggedIn }}}
+			<button component="topic/mark-unread" class="btn btn-link d-flex gap-2 align-items-center">
+				<i class="fa fa-fw fa-inbox small link-primary"></i>
+				<span class="d-none d-md-inline small">[[topic:mark_unread]]</span>
+			</button>
+			{{{ end }}}
 
-<div class="topic-main-buttons float-end d-inline-block">
-	<span class="loading-indicator btn float-start hidden" done="0">
-		<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
-	</span>
+			<!-- IMPORT partials/topic/watch.tpl -->
+			<!-- IMPORT partials/topic/sort.tpl -->
+			<!-- IMPORT partials/topic/tools.tpl -->
 
-	<!-- IF loggedIn -->
-	<button component="topic/mark-unread" class="btn btn-sm btn-outline-secondary" title="[[topic:mark_unread]]">
-		<i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"></span>
-	</button>
-	<!-- ENDIF loggedIn -->
+			{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
+			<a class="btn btn-link link-primary hidden-xs" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss"></i></a>
+			{{{ end }}}
 
-	<!-- IMPORT partials/topic/watch.tpl -->
-
-	<!-- IMPORT partials/topic/sort.tpl -->
-
-	<div class="d-inline-block">
-	<!-- IMPORT partials/thread_tools.tpl -->
+			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">
+				<i class="fa fa-refresh fa-spin"></i>
+				<span class="hidden-xs">[[topic:loading_more_posts]]</span>
+			</span>
+		</ul>
+		<!-- IMPORT partials/topic/reply-button.tpl -->
 	</div>
-	<!-- IMPORT partials/topic/reply-button.tpl -->
-</div>
+
+</nav>

package/templates/partials/posts_list.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <ul component="posts" class="posts-list list-unstyled" data-nextstart="{nextStart}">
 	{{{each posts}}}
 	<!-- IMPORT partials/posts_list_item.tpl -->

package/templates/partials/posts_list_item.tpl

@@ -1,34 +1,19 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<li component="post" class="posts-list-item row<!-- IF ../deleted --> deleted<!-- ELSE --><!-- IF ../topic.deleted --> deleted<!-- ENDIF --><!-- ENDIF -->{{{ if ../topic.scheduled }}} scheduled{{{ end }}}" data-pid="{../pid}" data-uid="{../uid}">
-    <div class="col-lg-11 col-sm-10 col-9 post-body">
-        <a class="topic-title" href="{config.relative_path}/post/{../pid}">
-            <!-- IF !../isMainPost -->RE: <!-- ENDIF -->{../topic.title}
-        </a>
-
-        <div component="post/content" class="content">
-            {../content}
+<hr/>
+<a class="topic-title fw-semibold fs-5 text-reset" href="{config.relative_path}/post/{./pid}">
+    {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
+</a>
+<li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
+    <div class="post-body d-flex flex-column gap-1">
+        <div class="d-flex gap-3 post-info">
+            <div class="post-author d-flex gap-1">
+                <a class="lh-1" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+                <a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
+            </div>
+            <span class="timeago text-sm text-muted" title="{../timestampISO}"></span>
         </div>
 
-        <small class="topic-category"><a href="{config.relative_path}/category/{../category.slug}">[[global:posted_in, {../category.name}]]</a></small>
-
-        {{{ if ../isMainPost }}}
-        {{{ if ../topic.tags.length }}}
-        <span class="tag-list">
-            {{{ each ../topic.tags }}}
-            <a href="{config.relative_path}/tags/{topic.tags.valueEncoded}"><span class="tag tag-item tag-class-{topic.tags.class}">{topic.tags.valueEscaped}</span></a>
-            {{{ end }}}
-        </span>
-        {{{ end }}}
-        {{{ end }}}
-
-        <div class="post-info">
-            <a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(../user, "28px", true, "user-img not-responsive")}</a>
-
-            <div class="post-author">
-                <a href="{config.relative_path}/user/{../user.userslug}">{../user.displayname}</a><br />
-                <span class="timeago" title="{../timestampISO}"></span>
-            </div>
+        <div component="post/content" class="content text-sm">
+            {../content}
         </div>
     </div>
 </li>

package/templates/partials/quick-search-results.tpl

@@ -1,36 +1,47 @@
-<!-- THIS FILE IS STILL PERSONA -->
+{{{ if multiplePages }}}
+<div class="show-more-container">
+	<div class="text-center d-block d-md-none">
+		<a href="{url}" class="btn btn-primary">
+			[[search:see-more-results, {matchCount}]]
+		</a>
+	</div>
+	<li role="separator" class="dropdown-divider d-block d-md-none"></li>
+</div>
+{{{ end }}}
 
 <ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto" style="max-width:400px; max-height: 500px;">
-{{{each posts}}}
-<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}">
-	<a href="{config.relative_path}/post/{posts.pid}"
-		class="text-decoration-none text-reset clearfix d-block text-truncate px-3 py-1">
-		{buildAvatar(posts.user, "24px", true)}
-		<span class="quick-search-title fw-bold">{posts.topic.title}</span>
-		<br/>
-		<p class="snippet text-break text-wrap">
-		{posts.snippet}
-		</p>
-		<small class="post-info float-end">
+	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
+	{{{ each posts }}}
+	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">
+		<a href="{config.relative_path}/post/{posts.pid}"
+			class="dropdown-item rounded-1 text-reset d-block text-truncate px-2 py-1">
+			<span class="quick-search-title fw-semibold text-sm">{posts.topic.title}</span>
+			<br/>
+			<p class="snippet text-xs text-break text-wrap mb-0">
+			{posts.snippet}
+			</p>
+		</a>
+		<div class="d-flex gap-1 post-info px-2 text-xs">
 			<div class="category-item d-inline-block">
-				{buildCategoryIcon(./category, "24px", "rounded-circle")} {posts.category.name}
-				&bull; <span class="timeago" title="{posts.timestampISO}"></span>
+				<span>{function.buildCategoryLabel, posts.category}</span>
 			</div>
-		</small>
-	</a>
-</li>
-<!-- IF !@last -->
-<li role="separator" class="dropdown-divider"></li>
-<!-- ENDIF -->
-{{{end}}}
+			<span class="timeago text-muted" title="{posts.timestampISO}"></span>
+		</div>
+	</li>
+	<li role="separator" class="dropdown-divider"></li>
+	{{{ end }}}
+
 </ul>
-<!-- IF multiplePages -->
-<div class="text-center mt-2">
-	<a href="{url}">
+
+{{{ if multiplePages }}}
+<div class="text-center mt-2 d-none d-md-block">
+	<a href="{url}" class="btn btn-sm btn-primary">
 		[[search:see-more-results, {matchCount}]]
 	</a>
 </div>
-<!-- ENDIF multiplePages -->
+{{{ end }}}
+
 {{{if !posts.length}}}
 <div class="text-center no-results">[[search:no-matches]]</li>
+<li role="separator" class="dropdown-divider d-block d-md-none"></li>
 {{{end}}}

package/templates/partials/search-results.tpl

@@ -46,8 +46,11 @@
 	{{{ end }}}
 
 	{{{ if categories.length }}}
-	<ul class="categories">
+	<ul class="categories list-unstyled">
 		{{{each categories}}}
+		{{{ if !@first }}}
+		<hr class="text-muted opacity-25"/>
+		{{{ end }}}
 		<!-- IMPORT partials/categories/item.tpl -->
 		{{{end}}}
 	</ul>

package/templates/partials/sidebar/chats.tpl

@@ -0,0 +1,53 @@
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.chats]]" component="chat/dropdown">
+	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+		<span class="position-relative">
+			<i component="chat/icon" class="fa fa-fw {{{ if unreadCount.chat}}}fa-comment{{{ else }}}fa-comment-o{{{ end }}} unread-count" data-content="{unreadCount.chat}"></i>
+			<span component="chat/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.chat }}}hidden{{{ end }}}">{unreadCount.chat}</span>
+		</span>
+		<span class="nav-text small visible-open fw-semibold">[[global:header.chats]]</span>
+	</span>
+	<span component="chat/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.chat }}}hidden{{{ end }}}">{unreadCount.chat}</span>
+</a>
+<ul class="chats-dropdown dropdown-menu p-1 shadow">
+	<li>
+		<ul component="chat/list" class="chat-list chats-list list-unstyled p-2">
+			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
+				<div class="main-avatar">
+					<div class="placeholder" style="width: 32px; height: 32px;"></div>
+				</div>
+				<div class="d-flex flex-grow-1 flex-column w-100">
+					<div class="text-xs placeholder col-3">&nbsp;</div>
+					<div class="text-sm placeholder col-11">&nbsp;</div>
+					<div class="text-xs placeholder col-4">&nbsp;</div>
+				</div>
+			</li>
+			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
+				<div class="main-avatar">
+					<div class="placeholder" style="width: 32px; height: 32px;"></div>
+				</div>
+				<div class="d-flex flex-grow-1 flex-column w-100">
+					<div class="text-xs placeholder col-3">&nbsp;</div>
+					<div class="text-sm placeholder col-11">&nbsp;</div>
+					<div class="text-xs placeholder col-4">&nbsp;</div>
+				</div>
+			</li>
+			<li class="dropdown-item rounded-1 p-2 d-flex gap-2 placeholder-wave">
+				<div class="main-avatar">
+					<div class="placeholder" style="width: 32px; height: 32px;"></div>
+				</div>
+				<div class="d-flex flex-grow-1 flex-column w-100">
+					<div class="text-xs placeholder col-3">&nbsp;</div>
+					<div class="text-sm placeholder col-11">&nbsp;</div>
+					<div class="text-xs placeholder col-4">&nbsp;</div>
+				</div>
+			</li>
+		</ul>
+	</li>
+	<li class="dropdown-divider"></li>
+	<li class="notif-dropdown-link">
+		<div class="d-flex justify-content-center gap-1 flex-nowrap">
+			<a component="chats/mark-all-read" role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap ff-secondary"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
+			<a class="btn btn-sm btn-primary flex-fill text-nowrap ff-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-list"></i> [[modules:chat.see_all]]</a>
+		</div>
+	</li>
+</ul>

package/templates/partials/sidebar/drafts.tpl

@@ -0,0 +1,41 @@
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.drafts]]">
+	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+		<span class="position-relative">
+			<i component="drafts/icon" class="fa fa-fw fa-pen-to-square unread-count"></i>
+			<span component="drafts/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary hidden">0</span>
+		</span>
+		<span class="nav-text small visible-open fw-semibold">[[global:header.drafts]]</span>
+	</span>
+	<span component="drafts/count" class="visible-open badge rounded-1 bg-primary hidden">0</span>
+</a>
+<ul class="drafts-dropdown dropdown-menu p-1 shadow">
+	<li>
+		<ul component="drafts/list" class="draft-list list-unstyled d-flex flex-column gap-1">
+			<li class="no-drafts text-center hidden p-3 text-sm text-muted">[[modules:composer.no-drafts]]</li>
+
+			{{{ each drafts }}}
+			{{{ if !@first}}}
+			<hr class="m-0"/>
+			{{{ end }}}
+			<li class="dropdown-item rounded-1 p-2" data-save-id="{./save_id}">
+				<div class="d-flex gap-1 justify-content-between">
+					<div class="d-flex flex-column" component="drafts/open" data-save-id="{./save_id}">
+						{{{ if ./title}}}
+						<div class="text text-xs fw-semibold">{./title}</div>
+						{{{ end }}}
+						{{{ if ./text }}}
+						<div class="text text-sm line-clamp-3">{./text}</div>
+						{{{ end }}}
+						<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
+					</div>
+					<div class="">
+						<button component="drafts/delete" data-save-id="{./save_id}" class="btn btn-light btn-sm">
+							<i class="unread fa fa-xs fa-trash text-secondary"></i>
+						</button>
+					</div>
+				</div>
+			</li>
+			{{{ end }}}
+		</ul>
+	</li>
+</ul>

package/templates/partials/sidebar/logged-out-menu.tpl

@@ -0,0 +1,38 @@
+
+<li class="nav-item mx-2" title="[[global:login]]">
+	<a class="nav-link nav-btn" href="{relative_path}/login">
+		<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+			<span class="position-relative">
+				<i class="fa fa-fw fa-sign-in"></i>
+			</span>
+			<span class="nav-text small visible-open fw-semibold">[[global:login]]</span>
+		</span>
+	</a>
+</li>
+<hr class="my-2 mx-2 visible-open">
+{{{ if allowRegistration }}}
+<li class="nav-item mx-2" title="[[global:register]]">
+	<span class="text-xs visible-open">[[login:dont_have_account]]</span>
+	<a class="nav-link nav-btn" href="{relative_path}/register">
+		<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+			<span class="position-relative">
+				<i class="fa fa-fw fa-user-plus"></i>
+			</span>
+			<span class="nav-text small visible-open fw-semibold">[[global:register]]</span>
+		</span>
+	</a>
+</li>
+<hr class="my-2 mx-2 visible-open">
+{{{ end }}}
+
+{{{ if config.searchEnabled }}}
+<li component="sidebar/search" class="visible-open nav-item mx-2 search">
+	<div class="d-flex gap-2 py-1 px-2 align-items-center" title="[[harmony:login-register-to-search]]">
+		<i class="fa fa-fw fa-search text-muted"></i>
+		<span class="nav-text visible-open text-xs text-muted">[[harmony:login-register-to-search]]</span>
+	</a>
+</a>
+{{{ end }}}
+
+
+

package/templates/partials/sidebar/notifications.tpl

@@ -0,0 +1,28 @@
+<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn d-flex gap-2 justify-content-between align-items-center position-relative" title="[[global:header.notifications]]">
+	<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+		<span class="position-relative">
+			<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
+			<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
+		</span>
+		<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
+	</span>
+	<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
+</a>
+<ul class="notifications-dropdown dropdown-menu p-2 shadow">
+	<li>
+		<ul component="notifications/list" class="notification-list list-unstyled p-2">
+			<li class="mb-2 placeholder-wave">
+				<div class="text-sm placeholder col-11">&nbsp;</div>
+				<div class="text-sm placeholder col-5">&nbsp;</div><br />
+				<div class="text-xs placeholder col-3">&nbsp;</div>
+			</li>
+		</ul>
+	</li>
+	<li class="dropdown-divider"></li>
+	<li class="notif-dropdown-link">
+		<div class="d-flex justify-content-center gap-1 flex-nowrap">
+			<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap ff-secondary"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
+			<a class="btn btn-sm btn-primary flex-fill text-nowrap ff-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
+		</div>
+	</li>
+</ul>

package/templates/partials/sidebar/search-mobile.tpl

@@ -0,0 +1,29 @@
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+	<i class="fa fa-search fa-fw"></i>
+	<span class="nav-text visible-open px-2 fw-semibold">[[global:search]]</span>
+</a>
+<div class="search-dropdown dropdown-menu p-2 shadow">
+	<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
+		<div component="search/fields" class="w-100" id="search-fields">
+			<div id="quick-search-container" class="quick-search-container d-block hidden">
+				<div class="form-check filter-category mb-2 ms-2">
+					<input class="form-check-input" type="checkbox" checked>
+					<label class="form-check-label name"></label>
+				</div>
+
+				<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
+				<div class="quick-search-results-container"></div>
+			</div>
+
+			<div class="d-flex gap-1 input-container mt-2">
+				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+
+				<div class="nav-btn d-flex justify-content-center align-items-center advanced-search-link">
+					<i class="fa fa-gears fa-fw text-muted"></i>
+				</div>
+			</div>
+
+			<button type="submit" class="btn btn-outline-secondary hide">[[global:search]]</button>
+		</div>
+	</form>
+</div>