tweak css on mobile

resources/css/common.css

@@ -12,7 +12,7 @@
   --ls-headbar-height: 3rem;
   --ls-headbar-inner-top-padding: 0px;
   --ls-left-sidebar-width: 240px;
-  --ls-left-sidebar-sm-width: 100%;
+  --ls-left-sidebar-sm-width: 80%;
   --ls-left-sidebar-nav-btn-size: 38px;
 }
 

src/main/frontend/components/header.cljs

@@ -228,7 +228,11 @@
                                (or (empty? repos)
                                    (nil? (state/sub :git/current-repo)))
                                (not (mobile-util/native-platform?))
-                               (not config/publishing?))]
+                               (not config/publishing?))
+        left-menu (left-menu-button {:on-click (fn []
+                                       (open-fn)
+                                       (state/set-left-sidebar-open!
+                                        (not (:ui/left-sidebar-open? @state/state))))})]
     [:div.cp__header#head
      {:class           (util/classnames [{:electron-mac   electron-mac?
                                           :native-ios     (mobile-util/native-ios?)
@@ -241,11 +245,7 @@
       :style           {:fontSize  50}}
      [:div.l.flex
       (when-not (mobile-util/native-platform?)
-        (left-menu-button {:on-click (fn []
-                                       (open-fn)
-                                       (state/set-left-sidebar-open!
-                                        (not (:ui/left-sidebar-open? @state/state))))})
-
+        left-menu
         (when current-repo ;; this is for the Search button
           (ui/with-shortcut :go/search "right"
             [:a.button#search-button
@@ -254,12 +254,13 @@
                                (state/set-left-sidebar-open! false))
                              (state/pub-event! [:go/search]))}
              (ui/icon "search" {:style {:fontSize ui/icon-size}})])))
-      (when (and (mobile-util/native-platform?)
-                 (not (state/home?)))
-        (ui/with-shortcut :go/backward "bottom"
-          [:a.it.navigation.nav-left.button
-           {:title "Go back" :on-click #(js/window.history.back)}
-           (ui/icon "chevron-left" {:style {:fontSize 25}})]))]
+      (when (mobile-util/native-platform?)
+        (if (state/home?)
+          left-menu
+          (ui/with-shortcut :go/backward "bottom"
+            [:a.it.navigation.nav-left.button
+             {:title "Go back" :on-click #(js/window.history.back)}
+             (ui/icon "chevron-left" {:style {:fontSize 25}})])))]
 
      [:div.r.flex
       (when-not file-sync-handler/hiding-login&file-sync

src/main/frontend/components/sidebar.css

@@ -64,7 +64,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--ls-primary-background-color);
-  /* transition: transform .3s; */
+  transition: transform .3s;
   transform: translateX(-100%);
   z-index: 3;
 
@@ -226,10 +226,7 @@
   top: var(--ls-headbar-inner-top-padding);
   left: 0;
   z-index: 9;
-
-  @screen sm {
-      transition: width 1.2s;
-  }
+  transition: width 1.2s;
 
   a {
     color: var(--ls-primary-text-color);