From 4f7e3a4e1407f89b98573d92f07db09fd8a88a80 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Tue, 7 May 2024 22:21:24 -0400
Subject: [PATCH] =?UTF-8?q?refactor(core):=20=E2=99=BB=EF=B8=8F=20clean=20?=
 =?UTF-8?q?up=20various=20menu=20styles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ContentSidebar.less            | 17 +++++++++++++
 .../components/Header.less                    |  6 -----
 .../skins.citizen.styles/components/Menu.less |  5 ++++
 .../components/Pagetools.less                 |  5 ----
 .../components/TableOfContents.less           | 25 +++++++------------
 templates/ContentSidebar.mustache             |  1 +
 6 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/resources/skins.citizen.styles/components/ContentSidebar.less b/resources/skins.citizen.styles/components/ContentSidebar.less
index 871bf513a..824cff2a4 100644
--- a/resources/skins.citizen.styles/components/ContentSidebar.less
+++ b/resources/skins.citizen.styles/components/ContentSidebar.less
@@ -1,5 +1,22 @@
 .citizen-body-sidebar {
 	@media ( min-width: @min-width-breakpoint-desktop ) {
+		display: flex;
+		flex-direction: column;
 		grid-area: sidebar;
+		gap: var( --space-xs );
+		padding-left: var( --space-xs );
+		margin-top: var( --space-sm ); // align with first paragraph
+		// Avoid padding clipping
+		margin-left: ~'calc( var( --space-xs ) * -1 )';
+	}
+
+	.citizen-menu__heading,
+	.citizen-menu .mw-list-item a {
+		padding-right: var( --space-xs );
+		padding-left: var( --space-xs );
+	}
+
+	.citizen-menu .mw-list-item a {
+		border-radius: var( --border-radius--small );
 	}
 }
diff --git a/resources/skins.citizen.styles/components/Header.less b/resources/skins.citizen.styles/components/Header.less
index 55b089257..cefd6dad0 100644
--- a/resources/skins.citizen.styles/components/Header.less
+++ b/resources/skins.citizen.styles/components/Header.less
@@ -124,12 +124,6 @@
 		align-items: center;
 		min-width: 0;
 	}
-
-	// Reset
-	ul {
-		margin: 0;
-		list-style: none;
-	}
 }
 
 // Notifications
diff --git a/resources/skins.citizen.styles/components/Menu.less b/resources/skins.citizen.styles/components/Menu.less
index 04e1d247c..c9babfade 100644
--- a/resources/skins.citizen.styles/components/Menu.less
+++ b/resources/skins.citizen.styles/components/Menu.less
@@ -48,6 +48,11 @@
 			}
 		}
 	}
+
+	ul {
+		margin: 0;
+		list-style: none;
+	}
 }
 
 // FIXME: This should not be here
diff --git a/resources/skins.citizen.styles/components/Pagetools.less b/resources/skins.citizen.styles/components/Pagetools.less
index a828a492f..8e935b069 100644
--- a/resources/skins.citizen.styles/components/Pagetools.less
+++ b/resources/skins.citizen.styles/components/Pagetools.less
@@ -73,11 +73,6 @@
 		}
 	}
 
-	ul {
-		margin: 0;
-		list-style: none;
-	}
-
 	li {
 		margin: 0;
 	}
diff --git a/resources/skins.citizen.styles/components/TableOfContents.less b/resources/skins.citizen.styles/components/TableOfContents.less
index 3e500b533..7cf1dd69c 100644
--- a/resources/skins.citizen.styles/components/TableOfContents.less
+++ b/resources/skins.citizen.styles/components/TableOfContents.less
@@ -9,13 +9,9 @@
 		}
 	}
 
-	&__contents {
-		margin-left: 1px;
-	}
-
 	&__contents,
 	&__list {
-		margin: 0;
+		margin: 0 0 0 var( --space-xs );
 		list-style: none;
 		border-left: 1px solid var( --border-color-base );
 
@@ -25,16 +21,11 @@
 		}
 	}
 
-	&__list {
-		margin-left: var( --space-xs );
-	}
-
 	&__link {
+		position: relative;
 		display: flex;
 		gap: var( --space-xs );
-		padding-top: var( --space-xs );
-		padding-right: var( --space-xs );
-		padding-bottom: var( --space-xs );
+		padding: var( --space-xs );
 		font-weight: var( --font-weight-medium );
 		color: var( --color-base );
 		border-radius: var( --border-radius--small );
@@ -63,8 +54,14 @@
 	}
 
 	&__indicator {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
 		flex-shrink: 0;
 		width: 3px;
+		margin-top: var( --space-xs );
+		margin-bottom: var( --space-xs );
 		margin-left: -2px;
 		border-radius: var( --border-radius--pill );
 	}
@@ -90,10 +87,6 @@
 			}
 		}
 	}
-
-	.citizen-menu__heading {
-		padding-left: 0;
-	}
 }
 
 // Sticky header styles
diff --git a/templates/ContentSidebar.mustache b/templates/ContentSidebar.mustache
index 26cc13b09..d674eb69d 100644
--- a/templates/ContentSidebar.mustache
+++ b/templates/ContentSidebar.mustache
@@ -2,5 +2,6 @@
 	
 }}
 <div class="citizen-body-sidebar">
+	{{#data-sidebar-lastmod}}{{>Menu}}{{/data-sidebar-lastmod}}
 	{{>TableOfContents}}
 </div>
\ No newline at end of file