Release 2.3.3

components/navigation-bar/_navbar.scss → components/appbar/_navbar.scss

@@ -1,57 +1,106 @@
-@use '../../sass/variables' as *;
+/* @use '../../sass/variables' as *;
 @use '../../sass/global' as *;
 
 :root {
   --navbar-height: 64px;
-  --navbar-height-mobile: 56px;
+  --navbar-height-mobile: 56px; // todo: do not change
+  --appbar-title-font-size: 24px;
+}
+
+.nav-wrapper {
+  height: 100%;
+  background-color: var(--md-sys-color-surface);
+  padding-left: 4px;
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
 }
 
 .navbar {
-  color:  var(--md-sys-color-on-primary);
+  color: var(--md-sys-color-on-surface);
   @extend .z-depth-1;
-  background-color: var(--md-sys-color-secondary-container);
-  width: 100%;
   height: var(--navbar-height-mobile);
-  line-height: var(--navbar-height-mobile);
 
   &.nav-extended {
     height: auto;
-
     .nav-wrapper {
       min-height: var(--navbar-height-mobile);
       height: auto;
     }
-
     .nav-content {
       position: relative;
       line-height: normal;
     }
   }
 
+  // Navbar Links
+  ul:not(.dropdown-content) {
+    list-style-type: none;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    & > li {
+      transition: background-color 0.3s;
+      padding: 0;
+
+      & > a {
+        transition: background-color 0.3s;
+        color: var(--md-sys-color-on-surface);
+        display: block;
+        cursor: pointer;
+
+
+        &.active {
+          //background-color: var(--md-sys-color-primary-container-dark);
+        }
+        &:hover:not(.active) {
+          // background-color: var(--md-sys-color-on-primary-dark);
+        }
+
+        &.btn,
+        &.btn-large,
+        &.btn-flat,
+        &.btn-floating {
+          margin-top: -2px;
+          margin-left: 15px;
+          margin-right: 15px;
+          display: inline-block;
+
+          & > .material-icons,
+          & > .material-symbols-outlined,
+          & > .material-symbols-rounded,
+          & > .material-symbols-sharp {
+            height: inherit;
+            line-height: inherit;
+          }
+        }
+      }
+    }
+
+    &.left {
+      float: left;
+    }
+  }
+
   a {
-    color:  var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   i,
-  [class^="mdi-"], [class*="mdi-"],
-  i.material-icons, i.material-symbols-outlined,
-  i.material-symbols-rounded, i.material-symbols-sharp {
+  [class^='mdi-'],
+  [class*='mdi-'],
+  i.material-icons,
+  i.material-symbols-outlined,
+  i.material-symbols-rounded,
+  i.material-symbols-sharp {
     display: block;
     font-size: 24px;
     height: var(--navbar-height-mobile);
     line-height: var(--navbar-height-mobile);
   }
 
-  .nav-wrapper {
-    position: relative;
-    height: 100%;
-  }
-
-  @media #{$large-and-up} {
-    a.sidenav-trigger {
-      display: none;
-    }
-  }
 
   // Collapse button
   .sidenav-trigger {
@@ -69,33 +118,14 @@
 
   // Logo
   .brand-logo {
-    position: absolute;
-    color:  var(--md-sys-color-on-primary);
+    color: var(--md-sys-color-on-surface);
+    font-size: var(--appbar-title-font-size);
     display: inline-block;
-    font-size: 2.1rem;
     padding: 0;
 
-    &.center {
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    @media #{$medium-and-down} {
+     &.center {
       left: 50%;
       transform: translateX(-50%);
-
-      &.left, &.right {
-        padding: 0;
-        transform: none;
-      }
-
-      &.left {
-        left: 0.5rem;
-      }
-      &.right {
-        right: 0.5rem;
-        left: auto;
-      }
     }
 
     &.right {
@@ -104,87 +134,45 @@
     }
 
     i,
-    [class^="mdi-"], [class*="mdi-"],
-    i.material-icons, i.material-symbols-outlined,
-    i.material-symbols-rounded, i.material-symbols-sharp {
+    [class^='mdi-'],
+    [class*='mdi-'],
+    i.material-icons,
+    i.material-symbols-outlined,
+    i.material-symbols-rounded,
+    i.material-symbols-sharp {
       float: left;
       margin-right: 15px;
     }
   }
 
-
   // Title
   .nav-title {
     display: inline-block;
     font-size: 32px;
     padding: 28px 0;
   }
 
-
-  // Navbar Links
-  ul:not(.dropdown-content) {
-    list-style-type: none;
-    margin: 0;
-
-    & > li {
-      transition: background-color .3s;
-      float: left;
-      padding: 0;
-
-      & > a {
-        transition: background-color .3s;
-        font-size: 1rem;
-        color:  var(--md-sys-color-on-primary);
-        display: block;
-        padding: 0 15px;
-        cursor: pointer;
-
-        &.active {
-          background-color: var(--md-sys-color-primary-container-dark);
-        }
-
-        &:hover:not(.active) {
-          background-color: var(--md-sys-color-on-primary-dark);
-        }
-
-        &.btn, &.btn-large, &.btn-flat, &.btn-floating {
-          margin-top: -2px;
-          margin-left: 15px;
-          margin-right: 15px;
-          display: inline-block;
-
-          & > .material-icons, & > .material-symbols-outlined,
-          & > .material-symbols-rounded, & > .material-symbols-sharp {
-            height: inherit;
-            line-height: inherit;
-          }
-        }
-      }
-    }
-
-    &.left {
-      float: left;
-    }
-  }
-
   // Navbar Search Form
   form {
     height: 100%;
   }
-
   .input-field {
     margin: 0;
     height: 100%;
 
-    input[type=search] {
+    input[type='search'] {
       height: 100%;
       font-size: 1.2rem;
       border: none;
       padding-left: 2rem;
-      color:  var(--md-sys-color-on-primary);
-
-      &:focus, &[type=text]:valid, &[type=password]:valid,
-      &[type=email]:valid, &[type=url]:valid, &[type=date]:valid {
+      color: var(--md-sys-color-on-primary);
+
+      &:focus,
+      &[type='text']:valid,
+      &[type='password']:valid,
+      &[type='email']:valid,
+      &[type='url']:valid,
+      &[type='date']:valid {
         border: none;
         box-shadow: none;
       }
@@ -196,11 +184,11 @@
 
       i {
         color: var(--font-on-primary-color-medium);
-        transition: color .3s;
+        transition: color 0.3s;
       }
 
       &.active i {
-        color:  var(--md-sys-color-on-primary)
+        color: var(--md-sys-color-on-primary);
       }
     }
   }
@@ -222,11 +210,14 @@
   .nav.nav-extended .nav-wrapper {
     min-height: var(--navbar-height-mobile);
   }
-  .nav, .navbar .nav-wrapper i, nav a.sidenav-trigger, .navbar a.sidenav-trigger i {
+  .nav,
+  .navbar .nav-wrapper i,
+  nav a.sidenav-trigger,
+  .navbar a.sidenav-trigger i {
     height: var(--navbar-height);
-    line-height: var(--navbar-height)
+    line-height: var(--navbar-height);
   }
   .navbar-fixed {
     height: var(--navbar-height);
   }
-}
+} */

components/appbar/appbar.css

@@ -0,0 +1,56 @@
+:root {
+  --navbar-height: 64px;
+  --navbar-height-mobile: 56px;
+  --appbar-title-font-size: 24px;
+}
+
+.nav-wrapper {
+  height: 100%;
+  background-color: var(--md-sys-color-surface);
+  padding-left: 4px;
+  padding-right: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.navbar {
+  color: var(--md-sys-color-on-surface);
+  height: var(--navbar-height-mobile);
+}
+
+.navbar  ul:not(.dropdown-content) {
+  list-style-type: none;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.navbar  ul:not(.dropdown-content) > li {
+  transition: background-color 0.3s;
+  padding: 0;
+}
+
+.navbar  ul:not(.dropdown-content) > li > a {
+  transition: background-color 0.3s;
+  color: var(--md-sys-color-on-surface);
+  display: block;
+  cursor: pointer;
+}
+
+ .navbar .brand-logo {
+  color: var(--md-sys-color-on-surface);
+  font-size: var(--appbar-title-font-size);
+  display: inline-block;
+  padding: 0;
+
+.navbar .nav-title {
+  display: inline-block;
+  font-size: 32px;
+  padding: 28px 0;
+}
+
+.navbar-fixed {
+  position: fixed;
+  z-index: 997;
+}