diff --git a/app/assets/javascripts/discourse/app/components/sidebar.hbs b/app/assets/javascripts/discourse/app/components/sidebar.hbs
index b356cb8d442..02dd1a2c6ae 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar.hbs
@@ -6,6 +6,4 @@
{{/if}}
-
-
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
index 62778452301..0e39e35a7db 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/hamburger-dropdown.hbs
@@ -4,7 +4,6 @@
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
index a5aa5c49d52..619d9e13d0a 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
@@ -1,15 +1,14 @@
diff --git a/app/assets/stylesheets/common/base/sidebar-footer.scss b/app/assets/stylesheets/common/base/sidebar-footer.scss
index bd6fa717a77..d1bb98b2737 100644
--- a/app/assets/stylesheets/common/base/sidebar-footer.scss
+++ b/app/assets/stylesheets/common/base/sidebar-footer.scss
@@ -1,19 +1,35 @@
-.sidebar-wrapper {
- .sidebar-footer-wrapper {
- .sidebar-footer-container {
- margin-right: 0.15em;
- margin-left: 1em;
- }
- }
-}
-
.sidebar-footer-wrapper {
- border-top: 1.5px solid var(--primary-low);
- padding: 0.5em 0 0.5em 0.33em;
+ box-sizing: border-box;
+ width: 100%;
+ margin-top: auto;
+ padding-top: 1em;
+ position: sticky;
+ bottom: 0;
.sidebar-footer-container {
display: flex;
align-items: stretch;
+ position: relative;
+ border-top: 1.5px solid var(--primary-low);
+ background: var(--primary-very-low);
+ padding: 0.5em 0.8em;
+ &:before {
+ // fade to make scroll more apparent
+ position: absolute;
+ content: "";
+ display: block;
+ height: 1.5em;
+ top: calc(-1.5em - 1px);
+ left: -0.5em;
+ right: -0.5em;
+ width: calc(100% + 0.5em);
+ pointer-events: none;
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgba(var(--primary-very-low-rgb), 1)
+ );
+ }
}
.sidebar-footer-link {
@@ -52,46 +68,3 @@
}
}
}
-
-.sidebar-footer-wrapper {
- background: var(--primary-very-low);
- .desktop-view & {
- position: sticky;
- bottom: 0;
- .sidebar-footer-container {
- position: relative;
- &:before {
- // fade to make scroll more apparent
- position: absolute;
- content: "";
- display: block;
- height: 1.5em;
- top: calc(-2em - 1px);
- left: -0.5em;
- right: -0.5em;
- pointer-events: none;
- background: linear-gradient(
- to bottom,
- transparent,
- rgba(var(--primary-very-low-rgb), 1)
- );
- }
- }
- }
-}
-
-.hamburger-panel .revamped {
- .sidebar-footer-wrapper {
- background: var(--secondary);
- .sidebar-footer-container {
- &:before {
- // fade to make scroll more apparent
- background: linear-gradient(
- to bottom,
- transparent,
- rgba(var(--secondary-rgb), 1)
- );
- }
- }
- }
-}
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index 72d534c5810..804a18b5396 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
@@ -1,5 +1,5 @@
.sidebar-more-section-links-details {
- &:focus,
+ &:focus-within,
&:hover {
background: var(--d-sidebar-highlight-color);
}
@@ -32,7 +32,6 @@
.sidebar-more-section-link-details-content {
background-color: var(--secondary);
box-shadow: shadow("dropdown");
- border-radius: 5px;
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
.sidebar-row {
diff --git a/app/assets/stylesheets/common/base/sidebar-section-link.scss b/app/assets/stylesheets/common/base/sidebar-section-link.scss
index 6b781c13d8e..e3d0cbd5949 100644
--- a/app/assets/stylesheets/common/base/sidebar-section-link.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section-link.scss
@@ -1,6 +1,7 @@
.sidebar-section-link-wrapper {
display: flex;
align-items: center;
+ position: relative;
.sidebar-section-link {
box-sizing: border-box;
@@ -13,6 +14,7 @@
&:focus,
&:hover {
background: var(--d-sidebar-highlight-color);
+ outline: none;
}
&.active {
@@ -73,12 +75,17 @@
flex-shrink: 0;
&.image {
+ position: absolute;
img {
border-radius: 50%;
width: 20px;
aspect-ratio: auto 20 / 20;
height: 20px;
- margin-right: 0.75em;
+ margin-right: 0.5em;
+ }
+
+ + .sidebar-section-link-content-text {
+ margin-left: calc(20px + 0.5em);
}
}
@@ -122,9 +129,17 @@
color: var(--primary-medium);
border: none;
background: transparent;
- padding: 0.35em 0.5em;
+ padding: 0 0 0 0.5em;
+ height: 100%;
transition: background-color 0.25s;
+ &:focus,
+ .discourse-no-touch & {
+ &:hover {
+ color: var(--primary);
+ }
+ }
+
svg {
font-size: var(--font-down-1);
}
diff --git a/app/assets/stylesheets/common/base/sidebar-section.scss b/app/assets/stylesheets/common/base/sidebar-section.scss
index d3befdda717..29915bbf1bf 100644
--- a/app/assets/stylesheets/common/base/sidebar-section.scss
+++ b/app/assets/stylesheets/common/base/sidebar-section.scss
@@ -1,10 +1,18 @@
.sidebar-section-wrapper {
- margin-bottom: 1em;
+ margin-bottom: 0.5em;
.sidebar-section-header-wrapper {
display: flex;
align-items: stretch;
box-sizing: border-box;
+ padding: 0;
+
+ .discourse-no-touch & {
+ &:hover,
+ &:focus-within {
+ background: var(--d-sidebar-highlight-color);
+ }
+ }
.select-kit {
.btn {
@@ -21,23 +29,35 @@
}
summary {
- padding: 0.25em 0.5em;
+ height: 100%;
+ padding: 0 var(--d-sidebar-row-horizontal-padding) 0
+ calc(var(--d-sidebar-row-horizontal-padding) / 2);
+ &:focus,
+ &:hover {
+ border-color: transparent;
+ .d-icon {
+ color: var(--primary);
+ }
+ }
}
}
}
.sidebar-section-header {
- @include ellipsis;
flex: 1 1 auto;
text-transform: uppercase;
font-weight: bold;
font-size: var(--font-1);
color: var(--primary);
align-items: center;
+ padding: calc(var(--d-sidebar-row-horizontal-padding) / 2)
+ calc(var(--d-sidebar-row-horizontal-padding) / 2)
+ calc(var(--d-sidebar-row-horizontal-padding) / 2)
+ var(--d-sidebar-row-horizontal-padding);
+ min-width: 0;
&.sidebar-section-header-collapsable {
justify-content: flex-start;
- padding: 0;
&:focus {
background: transparent;
@@ -48,27 +68,39 @@
.sidebar-section-header-text {
font-weight: bold;
margin-right: 0.25em;
+ @include ellipsis;
}
.sidebar-section-header-caret {
+ display: block;
+ width: 1.5em;
+ margin-left: -1.5em;
font-size: var(--font-down-2);
+ flex: 0 0 auto;
}
.sidebar-section-header-button {
background: none;
border: none;
- padding: 0.25em 0.5em;
+ padding: 0 var(--d-sidebar-row-horizontal-padding) 0
+ calc(var(--d-sidebar-row-horizontal-padding) / 2);
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-medium);
}
- &:focus,
- &:hover {
- background: var(--d-sidebar-highlight-color);
+ .discourse-no-touch & {
+ &:hover,
+ &:focus {
+ outline: none;
+ .d-icon {
+ color: var(--primary);
+ }
+ }
}
}
+
.select-kit-collection {
.texts {
font-size: var(--font-0);
diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss
index 4a49a1850c5..366ae8f3cb4 100644
--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@@ -6,22 +6,22 @@
.sidebar-wrapper {
--d-sidebar-highlight-color: var(--primary-low);
- --d-sidebar-row-horizontal-padding: 1.5rem;
+ // 1.25rem gets text left-aligned with the hamburger icon
+ --d-sidebar-row-horizontal-padding: 1.25rem;
grid-area: sidebar;
position: sticky;
top: var(--header-offset);
+
.footer-nav-ipad & {
top: calc(var(--header-offset) + var(--footer-nav-height));
}
height: calc(100vh - var(--header-offset));
align-self: start;
overflow-y: auto;
- background-color: var(--primary-very-low);
.sidebar-row {
- padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
- height: 27px;
+ padding: 0.33rem var(--d-sidebar-row-horizontal-padding);
align-items: center;
font-size: var(--font-down-1);
}
@@ -31,8 +31,7 @@
flex-direction: column;
box-sizing: border-box;
height: 100%;
- width: var(--d-sidebar-width);
- padding: 1em 0 0;
+ padding: 0;
overflow-x: hidden;
}
@@ -47,7 +46,7 @@
// custom scrollbar styling
--scrollbarBg: transparent;
--scrollbarThumbBg: var(--primary-low);
- --scrollbarWidth: 1.2em;
+ --scrollbarWidth: 1em;
scrollbar-color: transparent var(--scrollbarBg);
transition: scrollbar-color 0.25s ease-in-out;
@@ -56,7 +55,11 @@
&::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: calc(var(--scrollbarWidth) / 2);
- border: calc(var(--scrollbarWidth) / 4) solid transparent;
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
}
&:hover {
@@ -64,24 +67,62 @@
&::-webkit-scrollbar-thumb {
background-color: var(--scrollbarThumbBg);
- border-color: var(--primary-very-low);
}
transition-delay: 0s;
}
&::-webkit-scrollbar {
- width: var(--scrollbarWidth);
+ // 0.5em gives webkit browsers a little space between the scrollbar and the content
+ width: calc(var(--scrollbarWidth) - 0.45em);
}
- .composer-open & {
- // allows sidebar to scroll to the bottom when the composer is open
- margin-bottom: var(--composer-height);
- padding-bottom: var(--composer-ipad-padding);
- }
+ // allows sidebar to scroll to the bottom when the composer is open
+ margin-bottom: var(--composer-height);
+ padding-bottom: var(--composer-ipad-padding);
}
.sidebar-sections {
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
flex: 1;
+ padding: 1em 0 0;
+ max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth));
+ background-color: var(--primary-very-low);
+ }
+}
+
+.sidebar-hamburger-dropdown {
+ // note that these apply to mobile and desktop dropdowns
+ .sidebar-section-wrapper {
+ .sidebar-section-header-wrapper.sidebar-row {
+ padding-right: 0;
+ }
+
+ .sidebar-section-header {
+ padding: 0;
+ }
+ }
+
+ .discourse-no-touch & {
+ .sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
+ .sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
+ background: transparent;
+ }
+ }
+
+ .sidebar-footer-wrapper {
+ margin-top: 1em;
+ .sidebar-footer-container {
+ background: var(--secondary);
+ &:before {
+ background: linear-gradient(
+ to bottom,
+ transparent,
+ rgba(var(--secondary-rgb), 1)
+ );
+ }
+ }
}
}
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 40d0ead26f4..3de3460038f 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -195,7 +195,7 @@ body.has-sidebar-page {
#main-outlet-wrapper {
grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
- gap: 0 2em;
+ gap: 0 0.5em;
padding-left: 0;
}
}
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index 9f9c6b901ae..31ffa095ab3 100644
--- a/app/assets/stylesheets/desktop/menu-panel.scss
+++ b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -37,9 +37,25 @@
color: var(--primary-high);
background: var(--tertiary-low);
}
+
+ .sidebar-section-header-wrapper .select-kit .btn:hover {
+ background: transparent;
+ }
+ }
+
+ .sidebar-section-link-wrapper
+ .sidebar-section-link-hover:hover
+ .sidebar-section-hover-button {
+ background: transparent;
}
.sidebar-footer-wrapper {
- padding: 0.5em 0 0;
+ padding: 0;
+ .sidebar-footer-container {
+ padding: 0;
+ &:before {
+ top: calc(-100% + 2px);
+ }
+ }
}
}
diff --git a/app/assets/stylesheets/desktop/sidebar-section.scss b/app/assets/stylesheets/desktop/sidebar-section.scss
index cdfe15ac6f5..77891afe882 100644
--- a/app/assets/stylesheets/desktop/sidebar-section.scss
+++ b/app/assets/stylesheets/desktop/sidebar-section.scss
@@ -1,12 +1,12 @@
#main-outlet-wrapper {
- .sidebar-wrapper {
+ .sidebar-section-wrapper {
.sidebar-section-header-button,
.sidebar-section-header-caret,
.sidebar-section-header-dropdown {
.discourse-no-touch & {
opacity: 0;
transition: opacity 0.25s;
- transition-delay: 0.5s;
+ transition-delay: 0.25s;
}
}
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index 3a827e45c4f..5139e1598bd 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -78,4 +78,8 @@
align-items: center;
font-size: var(--font-down-1);
}
+
+ .sidebar-section-wrapper .sidebar-section-header {
+ padding: 0;
+ }
}
diff --git a/app/assets/stylesheets/mobile/sidebar.scss b/app/assets/stylesheets/mobile/sidebar.scss
index 09060dc46ca..6b62a38cb83 100644
--- a/app/assets/stylesheets/mobile/sidebar.scss
+++ b/app/assets/stylesheets/mobile/sidebar.scss
@@ -12,10 +12,13 @@
}
}
-.sidebar-wrapper .sidebar-footer-wrapper .sidebar-footer-container {
- margin-top: 0.5em;
- margin-right: 0;
- padding-left: 0.25em;
+.sidebar-footer-wrapper {
+ position: static;
+ margin-top: 1em;
+ .sidebar-footer-container {
+ background: transparent;
+ padding: 0.5em 0.1em;
+ }
}
.sidebar-more-section-links-details