fix: corrige overflow na sidenav

DeveloperParana · Aug 15, 2024 · 616aadb · 616aadb
1 parent 3809020
commit 616aadb
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 47 deletions.
diff --git a/src/app/app.ts b/src/app/app.ts
@@ -31,6 +31,8 @@ export const loadApp = (container: HTMLElement) => {
 
   const theme = use(ThemeToggle)
 
+  const download = new DownloadButton(canvas)
+
   /**
    *                                 _        _   _
    *  _ __  _ __ ___  ___  ___ _ __ | |_ __ _| |_(_) ___  _ __
@@ -90,8 +92,6 @@ export const loadApp = (container: HTMLElement) => {
 
   handler.on('form.updated', onFormChange)
 
-  // layer.grid.setSize(config.grid.tile).setOrder(10).render()
-
   layer.background.setDraggable(false).setSrc(form.value.logo).render()
 
   layer.logo.setOrder(4).setSrc('logos/dev-parana.svg').render()
@@ -139,10 +139,10 @@ export const loadApp = (container: HTMLElement) => {
 
   const main = h('main')
 
-  const download = new DownloadButton(canvas)
+  main.append(sidenav.button)
 
   main.append(canvas)
 
-  container.append(main, sidenav, download)
-  document.body.append(theme)
+  container.append(sidenav, main)
+  document.body.append(theme, download)
 }
diff --git a/src/app/elements/sidenav/sidenav.ts b/src/app/elements/sidenav/sidenav.ts
@@ -37,7 +37,7 @@ export class Sidenav extends HTMLElement {
 
   connectedCallback() {
     this.classList.add('cw-sidenav')
-    this.append(this.button)
+    // this.append(this.button)
 
     const observer = new MutationObserver(() => {
       console.log(getChildren(this, 'presentationForm'))

diff --git a/src/scss/_sidenav.scss b/src/scss/_sidenav.scss
@@ -3,15 +3,11 @@ $color__toggle: rgb(var(--cw-primary-rgb));
 $width__sidenav: 420px;
 
 .cw-sidenav-toggle {
-  position: absolute;
-  top: 1em;
-  right: -120px;
-
-  background-color: transparent;
+  padding: 0;
   border: none;
   cursor: pointer;
   display: flex;
-  padding: 0;
+  background-color: transparent;
 
   .line {
     fill: none;
@@ -53,16 +49,17 @@ $width__sidenav: 420px;
 }
 
 .cw-sidenav {
-  top: 0;
-  left: 0;
-  position: fixed;
-  width: $width__sidenav;
-  height: 100vh;
-  background-color: rgba(var(--cw-onprimary-rgb), 0.38);
-  transition: 0.7s;
-  color: rgb(var(--cw-onsurface-rgb));
-
-  transform: translateX(calc($width__sidenav * -1));
+  width: var(--cw-sidenav-width);
+  // top: 0;
+  // left: 0;
+  // position: fixed;
+  // width: $width__sidenav;
+  // height: 100vh;
+  // background-color: rgba(var(--cw-onprimary-rgb), 0.38);
+  // transition: 0.7s;
+  // color: rgb(var(--cw-onsurface-rgb));
+
+  // transform: translateX(calc($width__sidenav * -1));
 
   border-color: rgba(var(--cw-onsurface-rgb, 0, 0, 0), 0.08);
   border-right-style: solid;
@@ -93,17 +90,17 @@ $width__sidenav: 420px;
     color: rgb(var(--cw-primary-rgb));
   }
 
-  &.is-open {
-    transform: translateX(0);
-  }
+  // &.is-open {
+  //   transform: translateX(0);
+  // }
 }
 
-main {
-  transition: transform 400ms ease-in-out;
-}
+// main {
+//   transition: transform 400ms ease-in-out;
+// }
 
-.cw-sidenav-is-open {
-  main {
-    transform: translateX(calc($width__sidenav));
-  }
-}
+// .cw-sidenav-is-open {
+//   main {
+//     transform: translateX(calc($width__sidenav));
+//   }
+// }
diff --git a/src/style.scss b/src/style.scss
@@ -19,16 +19,13 @@ body {
   font-size: 1.2em;
   font-weight: 400;
 
-  // color-scheme: light dark;
-
-  color: rgb(19, 181, 43);
-
   --cw-primary-rgb: 19, 181, 43;
-  // --cw-primary-rgb: 68, 248, 94;
   --cw-onprimary-rgb: 255, 255 255;
   --cw-surface-rgb: 250, 250, 250;
   --cw-onsurface-rgb: 16, 16, 16;
 
+  --cw-sidenav-width: 24em;
+
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -45,15 +42,47 @@ body {
 }
 
 #app {
-  height: 100%;
-}
-
-main {
   display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  flex-direction: row;
   height: 100%;
+  width: 100%;
+  overflow: hidden;
+
+  > aside {
+    min-width: var(--cw-sidenav-width);
+
+    max-height: 100vh;
+    overflow-x: auto;
+    color: #f9f9f9;
+    // padding: 2em;
+
+    transition: margin 400ms ease-in-out;
+
+    margin-left: 0;
+
+    &.is-open {
+      margin-left: calc(-420px - 2em);
+
+      & + main {
+        // min-width: 100%;
+      }
+    }
+  }
+
+  > main {
+    flex: 1;
+    padding: 1em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+
+  > aside,
+  > main {
+    height: 100vh;
+  }
 }
 
 canvas {
@@ -63,6 +92,13 @@ canvas {
   overflow: hidden;
 }
 
+.cw-sidenav-toggle {
+  position: absolute;
+  top: 1.5em;
+  left: 1em;
+  z-index: 1;
+
+}
 .cw-theme-toggle {
   position: fixed;
   top: 1.5em;
@@ -76,8 +112,10 @@ canvas {
     linear-gradient(135deg, #ccc 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #ccc 75%),
     linear-gradient(135deg, transparent 75%, #ccc 75%);
-  background-size: 40px 40px; /* Tamanho dos quadrados */
-  background-position: 0 0, 20px 0, 20px -20px, 0px 20px; /* Posicionamento dos quadrados */
+  /* Tamanho dos quadrados */
+  background-size: 40px 40px;
+  /* Posicionamento dos quadrados */
+  background-position: 0 0, 20px 0, 20px -20px, 0px 20px;
 }
 
 .form-group {