fix: hide sidebar on mobile & footer search on desktop

ghivert · Aug 3, 2024 · cad6ca0 · cad6ca0
1 parent 151f495
commit cad6ca0
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;