feat: add app switcher

frappe · Jan 24, 2025 · dac35a3 · dac35a3
1 parent a24c8f5
commit dac35a3
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/wiki/public/js/wiki.js b/wiki/public/js/wiki.js
@@ -134,3 +134,8 @@ window.Wiki = class Wiki {
     });
   }
 };
+
+$("#navbar-dropdown").on("click", function (e) {
+  e.stopPropagation();
+  $("#navbar-dropdown-content").toggleClass("hide");
+});
diff --git a/wiki/public/scss/wiki.scss b/wiki/public/scss/wiki.scss
@@ -44,6 +44,10 @@ body {
   --editor-button-text-color: var(--gray-700);
   --editor-hover-button-color: var(--gray-100);
 
+  --navbar-dropdown-bg-color: #d7d7d7;
+  --navbar-dropdown-hover-color: #c0c0c0;
+
+
   // ------------------------------------------
 
   font-family: InterVariable, ui-sans-serif, system-ui, -apple-system,
@@ -104,6 +108,9 @@ body.dark {
   --editor-hover-button-color: var(--gray-700);
   --subtle-fg: var(--btn-secondary-bg-color);
 
+  --navbar-dropdown-bg-color: #32393f;
+  --navbar-dropdown-hover-color: #262c30;
+
   .navbar .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
   }
@@ -660,6 +667,7 @@ body.dark {
   top: 0;
   z-index: 5;
   height: 60px;
+  position: relative;
 
   @include media-breakpoint-down(md) {
     max-width: 14rem;
@@ -1348,3 +1356,46 @@ ins {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+#navbar-dropdown{
+  flex-grow: 1;
+  display: flex;
+  justify-content: end;
+  height: 80%;
+  cursor: pointer;
+}
+
+#navbar-dropdown-content {
+  position: absolute;
+  left: 10px;
+  top: 100%;
+  padding: 6px;
+  background-color: var(--navbar-dropdown-bg-color);
+  width: 90%;
+  border-radius: 8px;
+  box-shadow: 0 10px 24px -3px #0000001a;
+
+  a {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
+  a:hover {
+      color:inherit !important;
+      text-decoration:none !important;
+      cursor:pointer !important;
+  }
+
+  .app-switcher {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    padding: 6px;
+  }
+
+  .app-switcher:hover{
+    background-color: var(--navbar-dropdown-hover-color);
+    border-radius: 4px;
+  }
+}
diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
@@ -12,6 +12,29 @@
       <span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
       {%- endif -%}
     </a>
+    <div id="navbar-dropdown">
+      <div>
+        <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"
+          stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+    </div>
+    <div id="navbar-dropdown-content" class="hide">
+      <a href="/apps">
+        <div class="app-switcher">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+            class="lucide lucide-layout-grid">
+            <rect width="7" height="7" x="3" y="3" rx="1" />
+            <rect width="7" height="7" x="14" y="3" rx="1" />
+            <rect width="7" height="7" x="14" y="14" rx="1" />
+            <rect width="7" height="7" x="3" y="14" rx="1" />
+          </svg>
+          Apps
+        </div>
+      </a>
+    </div>
   </div>
 
   {% if navbar_search %}