feat: new layout for sidebar

src/main/frontend/components/header.css

@@ -6,15 +6,10 @@
   flex: 0 0 auto;
   background-color: var(--ls-primary-background-color, #fff);
 
-  position: fixed;
-  width: 100%;
-  top: 0;
-  left: 0;
-
   user-select: none;
 
   .it svg {
-      transform: scale(0.8);
+    transform: scale(0.8);
   }
 
   .repos {
@@ -50,7 +45,7 @@
 }
 
 .cp__header-logo {
-    display: none;
+  display: none;
 }
 
 .cp__header-logo:hover,
@@ -68,7 +63,7 @@
 }
 
 .cp__right-menu-button {
-    display: block;
+  display: block;
 }
 
 @screen sm {
@@ -86,13 +81,12 @@
   }
 }
 
-
 #repo-name {
-    @apply md:max-w-none;
-    vertical-align: middle;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 7ch;
+  @apply md:max-w-none;
+  vertical-align: middle;
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 7ch;
 }

src/main/frontend/components/right_sidebar.cljs

@@ -254,7 +254,7 @@
         theme (state/sub :ui/theme)
         t (i18n/use-tongue)]
     (rum/with-context [[t] i18n/*tongue-context*]
-      [:div#right-sidebar.cp__right-sidebar
+      [:div#right-sidebar.cp__right-sidebar.h-screen.overflow-y-auto.overflow-x-hidden
        {:class (if sidebar-open? "is-open")}
        (if sidebar-open?
          [:div.cp__right-sidebar-inner

src/main/frontend/components/sidebar.cljs

@@ -104,10 +104,10 @@
     [:div.flex-1.h-0.overflow-y-auto
      (sidebar-nav route-match close-fn)]]])
 
-(rum/defc sidebar-main
+(rum/defc main
   [{:keys [route-match global-graph-pages? logged? home? route-name indexeddb-support? white? db-restoring? main-content]}]
   (rum/with-context [[t] i18n/*tongue-context*]
-    [:div#main-content.cp__sidebar-main-layout
+    [:div#main-content.cp__sidebar-main-layout.flex-1.overflow-y-auto.flex
      [:div#sidebar-nav-wrapper.flex-col.pt-4.hidden.sm:block
       {:style {:flex (if (state/get-left-sidebar-open?)
                        "0 1 20%"
@@ -116,7 +116,7 @@
                                   (if white? "#f0f8ff" "#073642"))}}
       (when (state/sub :ui/left-sidebar-open?)
         (sidebar-nav route-match nil))]
-     [:div#main-content-container.cp__sidebar-main-content-container
+     [:div#main-content-container.w-full.flex.justify-center
       [:div.cp__sidebar-main-content
        {:data-is-global-graph-pages global-graph-pages?
         :data-is-full-width (or global-graph-pages?
@@ -133,8 +133,7 @@
          :else
          [:div {:class (if global-graph-pages? "" (util/hiccup->class "max-w-7xl.mx-auto"))
                 :style {:margin-bottom (if global-graph-pages? 0 120)}}
-          main-content])]]
-     (right-sidebar/sidebar)]))
+          main-content])]]]))
 
 (defn get-default-home-if-valid
   []
@@ -229,7 +228,7 @@
                   :exit 300}}
        links
        ;; (custom-context-menu-content)
-))))
+       ))))
 
 (rum/defc new-block-mode < rum/reactive
   []
@@ -333,28 +332,29 @@
          {:open?       open?
           :close-fn    close-fn
           :route-match route-match})
-        [:div.#app-container.cp__sidebar-layout
-         {:class (if sidebar-open? "is-right-sidebar-open")
-          :style {:padding-bottom (if global-graph-pages? 0 30)}}
-         (header/header {:open-fn        open-fn
-                         :white?         white?
-                         :current-repo   current-repo
-                         :logged?        logged?
-                         :page?          page?
-                         :route-match    route-match
-                         :me             me
-                         :default-home   default-home
-                         :new-block-mode new-block-mode})
-
-         (sidebar-main {:route-match         route-match
-                        :global-graph-pages? global-graph-pages?
-                        :logged?             logged?
-                        :home?               home?
-                        :route-name          route-name
-                        :indexeddb-support?  indexeddb-support?
-                        :white?              white?
-                        :db-restoring?       db-restoring?
-                        :main-content        main-content})]
+        [:div.#app-container.h-screen.flex
+         [[:div.w-full.h-full.flex.flex-col
+           [(header/header {:open-fn        open-fn
+                            :white?         white?
+                            :current-repo   current-repo
+                            :logged?        logged?
+                            :page?          page?
+                            :route-match    route-match
+                            :me             me
+                            :default-home   default-home
+                            :new-block-mode new-block-mode})
+
+            (main {:route-match         route-match
+                   :global-graph-pages? global-graph-pages?
+                   :logged?             logged?
+                   :home?               home?
+                   :route-name          route-name
+                   :indexeddb-support?  indexeddb-support?
+                   :white?              white?
+                   :db-restoring?       db-restoring?
+                   :main-content        main-content})]]
+          (right-sidebar/sidebar)]]
+
 
         (ui/notification)
         (ui/modal)
@@ -371,4 +371,4 @@
          ;;   :on-click (fn []
          ;;               (state/set-left-sidebar-open! (not (state/get-left-sidebar-open?))))}
          ;;  (if (state/sub :ui/left-sidebar-open?) "<" ">")]
-)]))))
+          )]))))

src/main/frontend/components/sidebar.css

@@ -56,33 +56,10 @@
   margin: -15px;
 }
 
-.cp__sidebar-layout {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-}
-
 .cp__sidebar-main-layout {
-  overflow-y: auto;
-  display: flex;
   background-color: var(--ls-primary-background-color);
 }
 
-.cp__sidebar-layout.is-right-sidebar-open {
-  .cp__sidebar-main-layout {
-    margin-right: var(--ls-right-sidebar-width);
-  }
-}
-
-.cp__sidebar-main-content-container {
-  position: relative;
-  flex: 1;
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
 .cp__sidebar-main-content {
   padding: 5rem 1.5rem;
   max-width: var(--ls-main-content-max-width);
@@ -120,21 +97,15 @@
 }
 
 .cp__right-sidebar {
-  position: fixed;
-  top: 3rem;
-  right: 0;
   width: 0;
-  opacity: 0.5;
-  height: calc(100vh - 3rem);
-  overflow-x: hidden;
-  overflow-y: auto;
   z-index: var(--ls-z-index-level-1);
   transition: width 0.3s, opacity 0.2s;
   border-radius: var(--ls-border-radius-low) 0 0 0;
-
-  box-sizing: border-box;
   background-color: var(--ls-secondary-background-color, #d8e1e8);
-  padding-bottom: 48px;
+
+  &.is-open {
+    width: var(--ls-right-sidebar-width);
+  }
 
   &::-webkit-scrollbar {
     display: none;
@@ -175,12 +146,6 @@
     transform: scale(0.8);
   }
 
-  &.is-open {
-    display: block;
-    width: var(--ls-right-sidebar-width);
-    opacity: 1;
-  }
-
   .page {
     margin-top: 0;
   }
@@ -221,10 +186,10 @@
   }
 }
 
-.cp__sidebar-main-content[data-is-full-width="true"] {
+.cp__sidebar-main-content[data-is-full-width='true'] {
   max-width: 100vw;
 }
 
-.cp__sidebar-main-content[data-is-global-graph-pages="true"] {
+.cp__sidebar-main-content[data-is-global-graph-pages='true'] {
   padding: 0;
 }