sidebar toggle. fixes #86

public/noscript.css

@@ -15,3 +15,12 @@ div.pager {
 .savecomment input[type=file] {
   display: inline-block;
 }
+#sidetoggle button {
+  visibility: unset !important;
+}
+#sidetoggle button::before {
+  content: "" !important;
+}
+#sidetoggle {
+  bottom: 4px;
+}

public/style.css

@@ -509,6 +509,9 @@ form.blockpost {
 .hidechildren span {
   pointer-events: none;
 }
+.hide {
+  display: none !important;
+}
 .expando {
   display: none;
   max-width: 900px;
@@ -607,8 +610,36 @@ form.blockpost {
   white-space: nowrap;
 }
 
-#sideToggle {
-  text-align: right;
+#sidetoggle button::before {
+  content: '[+]';
+  visibility: visible;
+  cursor: pointer;
+  position: relative;
+  top: 12px;
+}
+#sidetoggle.o button::before {
+  content: '[-]';
+  visibility: visible;
+  cursor: pointer;
+  position: relative;
+  top: 12px;
+}
+#sidetoggle button {
+  visibility: hidden;
+  width: 10px;
+  margin-right: 16px;
+  background: unset;
+  border: unset;
+}
+#sidetoggle {
+  position: absolute;
+  cursor: pointer;
+  right: 0;
+  display: inline-flex;
+  align-items: end;
+  height: 20px;
+  font-size: 12px;
+  cursor: pointer;
 }
 .side {
   display: none;
@@ -625,7 +656,22 @@ main {
   position: relative;
   margin: 0px 10px;
 }
+.wide .side {
+  display: block !important;
+}
 @media (min-width: 900px) {
+  .wide {
+    padding-right: 15px;
+  }
+  .wide .side {
+    display: none !important;
+  }
+  #sidetoggle button::before {
+    content: '[-]';
+  }
+  #sidetoggle.o button::before {
+    content: '[+]';
+  }
   .expando {
     text-align: left;
   }
@@ -810,7 +856,7 @@ nav .host {
 }
 
 nav div.spacer {
-  height: 32px;
+  height: 34px;
   position: relative;
 }
 nav span.spacer {

public/utils.js

@@ -513,6 +513,38 @@ function setup() {
       links[i].addEventListener("click", xhrLink)
     }
   }
+  var st = document.getElementById("sidetoggle")
+  if (st) {
+    st.addEventListener("click", sideToggle)
+  }
+}
+function sideToggle(e) {
+  e.preventDefault();
+  var side = document.getElementsByClassName("side")[0]
+  var main = document.getElementsByTagName("main")[0]
+  if (!side) return;
+  var form = e.target
+  if (form.tagName != "FORM") {
+    form = uptil(e.target, function(el){ return el.tagName == "FORM" })
+  }
+  var data = new FormData(form)
+  data.append("xhr", "1")
+  request(form.target, data)
+console.log(e)
+  if (side.className == "side") {
+    side.className = "side hide"
+    form.classList.add("o")
+    if (main) {
+      main.className = "wide"
+    }
+  } else {
+    side.className = "side"
+    form.classList.remove("o")
+    if (main) {
+      main.className = ""
+    }
+  }
+
 }
 function xhrLink(e) {
   e = e || window.event;

routes.go

@@ -323,6 +323,9 @@ func Initialize(Host string, r *http.Request) (State, error) {
 	state.Listing = getCookie(r, "DefaultListingType")
 	state.Sort = getCookie(r, "DefaultSortType")
 	state.CommentSort = getCookie(r, "DefaultCommentSortType")
+	if hideSidebar := getCookie(r, "HideSidebar"); hideSidebar == "1" {
+		state.HideSidebar = true
+	}
 	if dark := getCookie(r, "Dark"); dark != "" {
 		state.Dark = new(bool)
 		*state.Dark = dark != "0"
@@ -492,7 +495,7 @@ func GetIcon(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	}
 	u := resp.SiteView.Site.Icon.String()
 	if pictrs.MatchString(u) {
-		u += "?format=jpg&thumbnail=60"
+		u += "?format=png&thumbnail=60"
 	}
 	iresp, err := state.HTTPClient.Get(u)
 	if err != nil {
@@ -1073,6 +1076,15 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			w.Write([]byte{})
 			return
 		}
+	case "sidetoggle":
+		if state.HideSidebar {
+			deleteCookie(w, state.Host, "HideSidebar")
+		} else {
+			setCookie(w, state.Host, "HideSidebar", "1")
+		}
+		if r.FormValue("xhr") != "" {
+			return
+		}
 	case "logout":
 		deleteCookie(w, state.Host, "jwt")
 		deleteCookie(w, state.Host, "user")

state.go

@@ -106,6 +106,7 @@ type State struct {
 	ShowNSFW          bool
 	HideInstanceNames bool
 	HideThumbnails    bool
+	HideSidebar       bool
 	LinksInNewWindow  bool
 	SubmitURL         string
 	SubmitTitle       string

templates/frontpage.html

@@ -16,7 +16,8 @@
     {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
       {{ template "nsfw.html" }}
     {{- else }}
-    <main>
+    <main{{ if .HideSidebar  }} class="wide"{{ end }}>
+      {{ template "sidebar.html" . }}
       {{- if and (not .Community) .Tagline }}
       <h3>
         {{ markdown .Host .Tagline }}
@@ -46,7 +47,6 @@
       <input id="loadmore" type="submit" value="load more" data-page="2">
   {{ end }}
 
-      {{ template "sidebar.html" . }}
     </main>
 {{ end }}
     <script src="/_/static/utils.js?v={{ .Version }}"></script>

templates/main.html

@@ -16,7 +16,8 @@
     {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
       {{ template "nsfw.html" }}
     {{- else }}
-    <main>
+    <main{{ if .HideSidebar  }} class="wide"{{ end }}>
+    {{- template "sidebar.html" . }}
     {{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}}
       {{ template "menu.html" . }}
     {{- end}}
@@ -137,7 +138,6 @@
     {{- if .Watch }}
     <script src="/_/static/ws.js"></script>
     {{- end }}
-    {{- template "sidebar.html" . }}
     </main>
 {{- end }}
   </body>

templates/nav.html

@@ -87,6 +87,10 @@
         {{- if and .PostID }}{{ $post := (index .Posts 0) }}{{ if $post.CrossPosts }}
         <li><a href="/{{.Host}}/search?q={{ $post.Post.URL.String }}&searchtype=Url{{ if not $post.Post.Local }}&listingType=All{{end}}">other discussions ({{ $post.CrossPosts }})</a></li>
         {{- end }}{{ end }}
+        <form id="sidetoggle" class="link-btn{{ if .HideSidebar }} o{{end}}" method="POST">
+          <input type="hidden" name="op" value="sidetoggle">
+          <button>{{ if .HideSidebar }}[+]{{ else }}[-]{{ end }}</button>
+        </form>
       </ul>
       {{- end }}
     </nav>

templates/sidebar.html

@@ -1,5 +1,5 @@
 {{- $host := .Host }}
-    <div class="{{ if .User }}user {{end}}side">
+    <div class="{{ if .User }}user {{end}}side{{ if .HideSidebar  }} hide{{ end }}">
       <form method="GET" action="/{{.Host}}/search">
         <input type="text" placeholder="search" name="q" value="">
   {{- if eq .Listing "Local" }}