Docs - offset headings scroll on desktop only + hide github/color-mod…

…e icons if sidebar is collapsed
havit · Nov 22, 2024 · 588de71 · 588de71
1 parent 2c48ddd
commit 588de71
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 63 deletions.
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -1,54 +1,54 @@
-<Project>
-	<PropertyGroup>
-		<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
-		<CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
-		<AspNetCoreVersion8>8.0.11</AspNetCoreVersion8>
-		<AspNetCoreVersion9>9.0.0</AspNetCoreVersion9>
-	</PropertyGroup>
-	<ItemGroup>
-		<PackageVersion Include="Blazored.FluentValidation" Version="2.2.0" />
-		<PackageVersion Include="bunit.web" Version="1.36.0" />
-		<PackageVersion Include="Grpc.AspNetCore.Web" Version="2.67.0" />
-		<PackageVersion Include="Grpc.Net.Client" Version="2.67.0" />
-		<PackageVersion Include="Grpc.Net.Client.Web" Version="2.67.0" />
-		<PackageVersion Include="Havit.Core" Version="2.0.31" />
-		<PackageVersion Include="Havit.AspNetCore" Version="2.0.22" />
-		<PackageVersion Include="LoxSmoke.DocXml" Version="3.8.0" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'"/>
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'"/>
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(AspNetCoreVersion9)" />
-		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="$(AspNetCoreVersion9)" />
-		<PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="4.11.0" />
-		<PackageVersion Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" />
-		<PackageVersion Include="Microsoft.Extensions.Localization" Version="9.0.0" />
-		<PackageVersion Include="Microsoft.Extensions.Localization.Abstractions" Version="9.0.0" />
-		<PackageVersion Include="Moq" Version="4.20.72" />
-		<PackageVersion Include="MSTest" Version="3.6.3" />
-		<PackageVersion Include="protobuf-net" Version="3.2.45" />
-		<PackageVersion Include="protobuf-net.Grpc" Version="1.2.2" />
-		<PackageVersion Include="protobuf-net.Grpc.AspNetCore" Version="1.2.2" />
-		<PackageVersion Include="protobuf-net.Grpc.ClientFactory" Version="1.2.2" />
-		<PackageVersion Include="SmartComponents.AspNetCore" Version="0.1.0-preview10148" />
-		<PackageVersion Include="SmartComponents.AspNetCore.Components" Version="0.1.0-preview10148" />
-		<PackageVersion Include="SmartComponents.Inference.OpenAI" Version="0.1.0-preview10148" />
-		<PackageVersion Include="SmartComponents.LocalEmbeddings" Version="0.1.0-preview10148" />
-		<PackageVersion Include="System.Text.Json" Version="9.0.0" />
-	</ItemGroup>
-	<ItemGroup>
-		<!-- https://github.com/microsoft/MSBuildSdks/tree/main/src/CopyOnWrite -->
-		<GlobalPackageReference Include="Microsoft.Build.CopyOnWrite" Version="1.0.334">
-			<PrivateAssets>all</PrivateAssets>
-			<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
-		</GlobalPackageReference>
-	</ItemGroup>
-	<ItemGroup Condition="'$(ProjectName.EndsWith(`Tests`))' == 'False'">
-		<GlobalPackageReference Include="Microsoft.VisualStudio.Threading.Analyzers" Version="17.12.19">
-			<PrivateAssets>all</PrivateAssets>
-			<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
-		</GlobalPackageReference>
-	</ItemGroup>
+<Project>
+	<PropertyGroup>
+		<ManagePackageVersionsCentrally>true</ManagePackageVersionsCentrally>
+		<CentralPackageTransitivePinningEnabled>true</CentralPackageTransitivePinningEnabled>
+		<AspNetCoreVersion8>8.0.11</AspNetCoreVersion8>
+		<AspNetCoreVersion9>9.0.0</AspNetCoreVersion9>
+	</PropertyGroup>
+	<ItemGroup>
+		<PackageVersion Include="Blazored.FluentValidation" Version="2.2.0" />
+		<PackageVersion Include="bunit.web" Version="1.36.0" />
+		<PackageVersion Include="Grpc.AspNetCore.Web" Version="2.67.0" />
+		<PackageVersion Include="Grpc.Net.Client" Version="2.67.0" />
+		<PackageVersion Include="Grpc.Net.Client.Web" Version="2.67.0" />
+		<PackageVersion Include="Havit.Core" Version="2.0.31" />
+		<PackageVersion Include="Havit.AspNetCore" Version="2.0.22" />
+		<PackageVersion Include="LoxSmoke.DocXml" Version="3.8.0" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.Web" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion9)" Condition="'$(TargetFramework)' == 'net9.0'"/>
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly" Version="$(AspNetCoreVersion8)" Condition="'$(TargetFramework)' == 'net8.0'"/>
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="$(AspNetCoreVersion9)" />
+		<PackageVersion Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="$(AspNetCoreVersion9)" />
+		<PackageVersion Include="Microsoft.CodeAnalysis.CSharp" Version="4.11.0" />
+		<PackageVersion Include="Microsoft.EntityFrameworkCore.SqlServer" Version="9.0.0" />
+		<PackageVersion Include="Microsoft.Extensions.Localization" Version="9.0.0" />
+		<PackageVersion Include="Microsoft.Extensions.Localization.Abstractions" Version="9.0.0" />
+		<PackageVersion Include="Moq" Version="4.20.72" />
+		<PackageVersion Include="MSTest" Version="3.6.3" />
+		<PackageVersion Include="protobuf-net" Version="3.2.45" />
+		<PackageVersion Include="protobuf-net.Grpc" Version="1.2.2" />
+		<PackageVersion Include="protobuf-net.Grpc.AspNetCore" Version="1.2.2" />
+		<PackageVersion Include="protobuf-net.Grpc.ClientFactory" Version="1.2.2" />
+		<PackageVersion Include="SmartComponents.AspNetCore" Version="0.1.0-preview10148" />
+		<PackageVersion Include="SmartComponents.AspNetCore.Components" Version="0.1.0-preview10148" />
+		<PackageVersion Include="SmartComponents.Inference.OpenAI" Version="0.1.0-preview10148" />
+		<PackageVersion Include="SmartComponents.LocalEmbeddings" Version="0.1.0-preview10148" />
+		<PackageVersion Include="System.Text.Json" Version="9.0.0" />
+	</ItemGroup>
+	<ItemGroup>
+		<!-- https://github.com/microsoft/MSBuildSdks/tree/main/src/CopyOnWrite -->
+		<GlobalPackageReference Include="Microsoft.Build.CopyOnWrite" Version="1.0.334">
+			<PrivateAssets>all</PrivateAssets>
+			<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
+		</GlobalPackageReference>
+	</ItemGroup>
+	<ItemGroup Condition="'$(ProjectName.EndsWith(`Tests`))' == 'False'">
+		<GlobalPackageReference Include="Microsoft.VisualStudio.Threading.Analyzers" Version="17.12.19">
+			<PrivateAssets>all</PrivateAssets>
+			<IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
+		</GlobalPackageReference>
+	</ItemGroup>
 </Project>
diff --git a/Havit.Blazor.Documentation/Shared/MainLayout.razor.css b/Havit.Blazor.Documentation/Shared/MainLayout.razor.css
@@ -10,11 +10,13 @@
     margin: 0 auto;
 }
 
-
-.doc-content ::deep h1, 
-.doc-content ::deep h2, 
-.doc-content ::deep h3, 
-.doc-content ::deep h4,
-.doc-content ::deep h5 {
-    padding-top: 56px; margin-top: -56px;
+/* Offset headings by Navbar height on desktop */
+@media screen and (min-width: 992px) {
+    .doc-content ::deep h1, 
+    .doc-content ::deep h2, 
+    .doc-content ::deep h3, 
+    .doc-content ::deep h4,
+    .doc-content ::deep h5 {
+        padding-top: 56px; margin-top: -56px;
+    }
 }
diff --git a/Havit.Blazor.Documentation/Shared/Sidebar.razor b/Havit.Blazor.Documentation/Shared/Sidebar.razor
@@ -1,12 +1,12 @@
-<HxSidebar CssClass="sticky-md-top doc-sidebar">
+<HxSidebar @bind-Collapsed="_isDesktopCollapsed" CssClass="sticky-md-top doc-sidebar">
     <HeaderTemplate>
         <div class="d-flex flex-grow-1 d-lg-none">
             <HxSidebarBrand BrandName="HAVIT Blazor">
                 <LogoTemplate>
                     <img src="/logo.png" width="32" height="30" class="mx-1" />
                 </LogoTemplate>
             </HxSidebarBrand>
-            <div class="ms-auto d-flex gap-2">
+            <div class="@CssClassHelper.Combine("ms-auto d-flex gap-2", _isDesktopCollapsed ? "d-md-none" : null)">
                 <Havit.Blazor.Documentation.Shared.Components.DocColorMode.DocColorModeSwitcher />
                 <GitHubLink />
             </div>
@@ -206,4 +206,9 @@
             <HxSidebarItem Href="@($"/components/{nameof(HxValidationMessage<object>)}")" Text="@(nameof(HxValidationMessage<object>))" />
         </HxSidebarItem>
     </ItemsTemplate>
-</HxSidebar>
+</HxSidebar>
+
+@code
+{
+    private bool _isDesktopCollapsed;
+}