Add desktop-navigation-width property

internal/glance/config.go

@@ -64,6 +64,7 @@ type page struct {
 	Title                      string `yaml:"name"`
 	Slug                       string `yaml:"slug"`
 	Width                      string `yaml:"width"`
+	DesktopNavigationWidth     string `yaml:"desktop-navigation-width"`
 	ShowMobileHeader           bool   `yaml:"show-mobile-header"`
 	ExpandMobilePageNavigation bool   `yaml:"expand-mobile-page-navigation"`
 	HideDesktopNavigation      bool   `yaml:"hide-desktop-navigation"`
@@ -435,36 +436,46 @@ func isConfigStateValid(config *config) error {
 	}
 
 	for i := range config.Pages {
-		if config.Pages[i].Title == "" {
+		page := &config.Pages[i]
+
+		if page.Title == "" {
 			return fmt.Errorf("page %d has no name", i+1)
 		}
 
-		if config.Pages[i].Width != "" && (config.Pages[i].Width != "wide" && config.Pages[i].Width != "slim") {
+		if page.Width != "" && (page.Width != "wide" && page.Width != "slim" && page.Width != "default") {
 			return fmt.Errorf("page %d: width can only be either wide or slim", i+1)
 		}
 
-		if len(config.Pages[i].Columns) == 0 {
+		if page.DesktopNavigationWidth != "" {
+			if page.DesktopNavigationWidth != "wide" && page.DesktopNavigationWidth != "slim" && page.DesktopNavigationWidth != "default" {
+				return fmt.Errorf("page %d: desktop-navigation-width can only be either wide or slim", i+1)
+			}
+		}
+
+		if len(page.Columns) == 0 {
 			return fmt.Errorf("page %d has no columns", i+1)
 		}
 
-		if config.Pages[i].Width == "slim" {
-			if len(config.Pages[i].Columns) > 2 {
+		if page.Width == "slim" {
+			if len(page.Columns) > 2 {
 				return fmt.Errorf("page %d is slim and cannot have more than 2 columns", i+1)
 			}
 		} else {
-			if len(config.Pages[i].Columns) > 3 {
+			if len(page.Columns) > 3 {
 				return fmt.Errorf("page %d has more than 3 columns", i+1)
 			}
 		}
 
 		columnSizesCount := make(map[string]int)
 
-		for j := range config.Pages[i].Columns {
-			if config.Pages[i].Columns[j].Size != "small" && config.Pages[i].Columns[j].Size != "full" {
+		for j := range page.Columns {
+			column := &page.Columns[j]
+
+			if column.Size != "small" && column.Size != "full" {
 				return fmt.Errorf("column %d of page %d: size can only be either small or full", j+1, i+1)
 			}
 
-			columnSizesCount[config.Pages[i].Columns[j].Size]++
+			columnSizesCount[page.Columns[j].Size]++
 		}
 
 		full := columnSizesCount["full"]

internal/glance/glance.go

@@ -61,6 +61,14 @@ func newApplication(config *config) (*application, error) {
 
 		app.slugToPage[page.Slug] = page
 
+		if page.Width == "default" {
+			page.Width = ""
+		}
+
+		if page.DesktopNavigationWidth == "" && page.DesktopNavigationWidth != "default" {
+			page.DesktopNavigationWidth = page.Width
+		}
+
 		for c := range page.Columns {
 			column := &page.Columns[c]
 

internal/glance/static/css/site.css

@@ -211,11 +211,11 @@ kbd:active {
     padding: 0 var(--content-bounds-padding);
 }
 
-.page-width-wide .content-bounds {
+.content-bounds-wide {
     max-width: 1920px;
 }
 
-.page-width-slim .content-bounds {
+.content-bounds-slim {
     max-width: 1100px;
 }
 

internal/glance/templates/page.html

@@ -11,7 +11,7 @@
 </script>
 {{ end }}
 
-{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if ne "" .Page.Width }}page-width-{{ .Page.Width }} {{ end }}{{ if .Page.CenterVertically }}page-center-vertically{{ end }}"{{ end }}
+{{ define "document-root-attrs" }}class="{{ if .App.Config.Theme.Light }}light-scheme {{ end }}{{ if .Page.CenterVertically }}page-center-vertically{{ end }}"{{ end }}
 
 {{ define "document-head-after" }}
 {{ .App.ParsedThemeStyle }}
@@ -32,7 +32,7 @@
 {{ define "document-body" }}
 <div class="flex flex-column body-content">
     {{ if not .Page.HideDesktopNavigation }}
-    <div class="header-container content-bounds">
+    <div class="header-container content-bounds{{ if ne "" .Page.DesktopNavigationWidth }} content-bounds-{{ .Page.DesktopNavigationWidth }} {{ end }}">
         <div class="header flex padding-inline-widget widget-content-frame">
             <!-- TODO: Replace G with actual logo, first need an actual logo -->
             <div class="logo" aria-hidden="true">{{ if ne "" .App.Config.Branding.LogoURL }}<img src="{{ .App.Config.Branding.LogoURL }}" alt="">{{ else if ne "" .App.Config.Branding.LogoText }}{{ .App.Config.Branding.LogoText }}{{ else }}G{{ end }}</div>
@@ -56,7 +56,7 @@
         </div>
     </div>
 
-    <div class="content-bounds grow">
+    <div class="content-bounds grow{{ if ne "" .Page.Width }} content-bounds-{{ .Page.Width }} {{ end }}">
         <main class="page" id="page" aria-live="polite" aria-busy="true">
             <h1 class="visually-hidden">{{ .Page.Title }}</h1>
             <div class="page-content" id="page-content"></div>