first init

resources/scss/structure/_topbar.scss

@@ -0,0 +1,159 @@
+// 
+// topbar.scss
+// 
+
+.app-topbar {
+     top: 0;
+     z-index: 1005;
+     position: sticky;
+     transition: all 0.3s ease-in-out;
+     height: $topbar-height;
+     background-color: $topbar-bg;
+     padding-left: $sidebar-width;
+     border-bottom: $card-border-width solid $card-border-color;
+
+     .navbar-header {
+          display: flex;
+          margin: 0 auto;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+     }
+
+     // Search
+     .app-search {
+
+          .form-control {
+               border: none;
+               padding-left: 40px;
+               padding-right: 15px;
+               background-color: $topbar-search-bg;
+               box-shadow: none;
+               height: 38px;
+               border-radius: 20px;
+          }
+
+          .search-widget-icon {
+               position: absolute;
+               z-index: 10;
+               font-size: 18px;
+               left: 11px;
+               top: 50%;
+               color: $gray-500;
+               transform: translateY(-50%);
+               cursor: pointer;
+          }
+
+          .search-widget-icon-close {
+               right: 7px;
+               left: auto !important;
+          }
+     }
+
+
+     .topbar-item {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: $topbar-height;
+
+          .topbar-button {
+               border: none;
+               border-radius: 50%;
+               background-color: $topbar-search-bg;
+               transition: all 0.3s ease-in-out;
+               color: $topbar-item-color;
+               padding: $btn-padding-y $btn-padding-y;
+               position: relative;
+
+               &.show,
+               &.active,
+               &:active,
+               &:hover {
+                    color: $primary;
+               }
+          }
+     }
+
+     .topbar-badge {
+          right: -7px;
+          top: 7px !important;
+     }
+}
+
+
+// fullscreen exit icon
+[data-toggle="fullscreen"] {
+     .fullscreen {
+          display: block;
+     }
+     
+     .quit-fullscreen {
+          display: none;
+     }
+}
+
+.fullscreen-enable {
+     .fullscreen {
+          display: none;
+     }
+     
+     .quit-fullscreen {
+          display: block;
+     }
+}
+
+
+// Dark Mode Icon
+.app-topbar {
+     #light-dark-mode {
+          .light-mode {
+               display: block;
+          }
+
+          .dark-mode {
+               display: none;
+          }
+     }
+}
+
+[data-bs-theme="dark"] {
+     .app-topbar {
+          #light-dark-mode {
+               .light-mode {
+                    display: none;
+               }
+     
+               .dark-mode {
+                    display: block;
+               }
+          }
+     }
+}
+
+
+html[data-sidebar-size="hidden"] {
+     .app-topbar {
+          padding: 0 $spacer * 0.5;
+     }
+}
+
+
+// @include media-breakpoint-down(md) {
+@media (max-width: 375px) {
+     .app-topbar {
+          padding: 0 0.5 * $spacer !important;
+     }
+}
+
+@media (max-width: 600px) {
+     .app-topbar {
+          .dropdown {
+               position: static;
+
+               .dropdown-menu {
+                    width: 100%;
+               }
+          }
+     }
+}