From cad6ca05f8ac1344e540640cb8190df2d82411c5 Mon Sep 17 00:00:00 2001
From: Guillaume Hivert <hivert.is.coming@gmail.com>
Date: Sat, 3 Aug 2024 22:45:33 +0200
Subject: [PATCH] fix: hide sidebar on mobile & footer search on desktop

---
 apps/frontend/src/frontend/view.gleam               |  2 +-
 apps/frontend/src/frontend/view/body/body.gleam     |  2 ++
 apps/frontend/src/frontend/view/footer/footer.gleam |  3 +++
 apps/frontend/src/stylesheets/all.css               | 12 ------------
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/frontend/view.gleam b/apps/frontend/src/frontend/view.gleam
index d407f8f..3c0c3a7 100644
--- a/apps/frontend/src/frontend/view.gleam
+++ b/apps/frontend/src/frontend/view.gleam
@@ -31,7 +31,7 @@ fn layout(attributes, children) {
 
 fn navbar(model: Model) {
   case model.route {
-    router.Home | router.Search(_) -> navbar.navbar(model)
+    router.Search(_) -> navbar.navbar(model)
     _ -> el.none()
   }
 }
diff --git a/apps/frontend/src/frontend/view/body/body.gleam b/apps/frontend/src/frontend/view/body/body.gleam
index bb47b9b..fd8ee91 100644
--- a/apps/frontend/src/frontend/view/body/body.gleam
+++ b/apps/frontend/src/frontend/view/body/body.gleam
@@ -6,6 +6,7 @@ import frontend/images
 import frontend/router
 import frontend/strings as frontend_strings
 import frontend/view/search_input/search_input
+import gleam/bool
 import gleam/dict
 import gleam/result
 import gleam/string
@@ -131,6 +132,7 @@ pub fn view_trending(model: Model) {
 }
 
 fn sidebar(model: Model) {
+  use <- bool.guard(when: model.is_mobile, return: el.none())
   h.main([a.class("search-sidebar")], [
     h.a([a.class("sidebar-title"), a.href("/")], [
       h.img([
diff --git a/apps/frontend/src/frontend/view/footer/footer.gleam b/apps/frontend/src/frontend/view/footer/footer.gleam
index f446e66..628c523 100644
--- a/apps/frontend/src/frontend/view/footer/footer.gleam
+++ b/apps/frontend/src/frontend/view/footer/footer.gleam
@@ -3,8 +3,10 @@ import data/msg
 import frontend/view/footer/links.{links}
 import frontend/view/footer/styles as s
 import frontend/view/search_input/search_input
+import gleam/bool
 import gleam/list
 import lustre/attribute as a
+import lustre/element as el
 import lustre/element/html as h
 import lustre/event as e
 
@@ -25,6 +27,7 @@ pub fn view() {
 }
 
 pub fn search_bar(model: Model) {
+  use <- bool.guard(when: !model.is_mobile, return: el.none())
   h.div([a.class("footer-search")], [
     h.form([e.on_submit(msg.SubmitSearch)], [
       search_input.view(model.loading, model.input, small: True),
diff --git a/apps/frontend/src/stylesheets/all.css b/apps/frontend/src/stylesheets/all.css
index 2374dd5..cf31680 100644
--- a/apps/frontend/src/stylesheets/all.css
+++ b/apps/frontend/src/stylesheets/all.css
@@ -383,12 +383,6 @@ lazy-node:has(:not(:defined)) {
   top: 0px;
 }
 
-@media (max-width: 700px) {
-  .search-sidebar {
-    display: none;
-  }
-}
-
 .sidebar-title {
   display: flex;
   align-items: center;
@@ -549,12 +543,6 @@ lazy-node:has(:not(:defined)) {
   margin-top: 24px;
 }
 
-@media (min-width: 700px) {
-  .footer-search {
-    display: none;
-  }
-}
-
 .search-result-empty-callout {
   border: 1px solid var(--border-color);
   padding: 12px;