séparations css

src/assets/_vars.scss

@@ -0,0 +1,5 @@
+
+$txt-color: black;
+$bg-color: white;
+$button-border: 2px solid $txt-color;
+$button-border-small: 1px solid $txt-color;

src/assets/menubar.scss

@@ -1,112 +0,0 @@
-$button-width: 42px;
-$button-border: 2px solid black;
-.menubar {
-
-
-  &.paragraph-menubar {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-
-    top: 100px;
-    right: 25px;
-
-    button {
-      cursor: pointer;
-      width: $button-width;
-      height: $button-width;
-      background-color: white;
-      border-left: $button-border;
-      border-right: $button-border;
-      border-bottom: $button-border;
-      border-top: none;
-
-      &:nth-child(1) {
-        border-top: $button-border;
-      }
-
-      &:hover {
-        color: white;
-        background-color: black;
-      }
-    }
-  }
-
-  &.char-menubar {
-
-    top: 10px;
-    left: 0px;
-    display: block;
-    width: 100%;
-    position: fixed;
-    text-align: center;
-    z-index: 10;
-    ul, li {
-      padding: 0;
-      margin: 0;
-    }
-
-
-    & > ul {
-      display: flex;
-      justify-content: center;
-      position: relative;
-
-      li, button {
-        cursor: pointer;
-      }
-
-      ul {
-        display: none;
-        position: absolute;
-      }
-
-      & > li {
-        background-color: white;
-        width: 150px;
-        list-style-type: none;
-        border-top: $button-border;
-        border-right: $button-border;
-        border-bottom: $button-border;
-
-        &:nth-child(1) {
-          border-left: $button-border;
-        }
-      }
-
-      li:hover {
-        ul {
-          display: flex;
-          flex-direction: column;
-          position: absolute;
-          width: 152px;
-
-          li {
-            border-left: $button-border;
-            border-right: $button-border;
-            border-bottom: $button-border;
-            list-style-type: none;
-            margin-left: -2px;
-            background-color: white;
-
-            button {
-              border: none;
-              background-color: white;
-              width: 100%;
-            }
-          }
-        }
-      }
-
-    }
-
-
-
-  }
-
-  .menubar__button.is-active{
-    color: white;
-    background-color: black;
-  }
-
-}

src/assets/menuchar.scss

@@ -0,0 +1,112 @@
+@import '_vars';
+
+$btn-width:120px;
+
+
+/* Dropdown Button */
+.dropbtn {
+  background-color: $bg-color;
+  color: $txt-color;
+  //padding: 16px;
+  //font-size: 16px;
+  //border: none;
+  min-width: $btn-width;
+  border-top: $button-border;
+  border-right: $button-border-small;
+  border-bottom: $button-border;
+  border-left: $button-border-small;
+
+  &.border-left{
+    border-left : $button-border;
+  }
+
+  &.border-right{
+    border-right : $button-border;
+  }
+}
+
+
+
+/* The container <div> - needed to position the dropdown content */
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  min-width: $btn-width;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+
+/* Links inside the dropdown */
+.dropdown-content a {
+  color: black;
+  //padding: 12px 16px;
+  //text-decoration: none;
+  display: block;
+  //border: $button-border;
+  background-color: $txt-color;
+  padding: 5px;
+  button {
+    //background-color: transparent;
+    border: none;
+  }
+}
+
+/* Change color of dropdown links on hover */
+.dropdown-content a:hover {
+  //background-color: $txt-color;
+  //color: $bg-color;
+  button{
+    //background-color: $txt-color;
+    //color: $bg-color;
+    cursor: pointer;
+  }
+}
+
+/* Show the dropdown menu on hover */
+.dropdown:hover .dropdown-content {display: block;}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+.dropdown:hover .dropbtn {
+  //background-color: $txt-color;
+  //color: $bg-color;
+}
+
+
+/*menububble */
+.menububble {
+  visibility: hidden;
+  background-color: black;
+  border-radius: 5px;
+  z-index: 100;
+  padding: 5px;
+  position: fixed;
+  top: 15px;
+  //width: 50vw;
+  //margin: auto;
+  bottom : unset !important;
+  left: unset !important;
+  //position: absolute;
+  //bottom: 25px;
+  //left:0px;
+}
+
+.menububble.is-active {
+  visibility: visible;
+}
+
+.menububble button {
+  background-color: black;
+  border: none;
+  color: white;
+  border-radius: 5px;
+}
+
+#link__button{
+  min-width: 80px;
+}

src/assets/menupara.scss

@@ -0,0 +1,44 @@
+
+@import '_vars.scss';
+
+$button-width: 42px;
+
+.menubar {
+
+
+  &.paragraph-menubar {
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+
+    top: 100px;
+    right: 25px;
+
+    button {
+      cursor: pointer;
+      width: $button-width;
+      height: $button-width;
+      background-color: white;
+      border-left: $button-border;
+      border-right: $button-border;
+      border-bottom: $button-border;
+      border-top: none;
+
+      &:nth-child(1) {
+        border-top: $button-border;
+      }
+
+      &:hover {
+        color: white;
+        background-color: black;
+      }
+    }
+  }
+
+  .menubar__button.is-active{
+    color: white;
+    background-color: black;
+  }
+
+}
+