added nested navmenus

src/renderer/styles.css

@@ -152,14 +152,12 @@ body {
   position: absolute;
   left: 0;
   top: calc(100% + 8px);
-  min-width: 260px;
-  max-width: min(520px, calc(100vw - 32px));
+  min-width: 280px;
+  max-width: min(1100px, calc(100vw - 32px));
   max-height: min(70vh, 680px);
   overflow: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 8px;
+  display: block;
+  padding: 0;
   border: 1px solid rgba(126, 181, 234, 0.38);
   border-radius: 12px;
   background: linear-gradient(180deg, rgba(11, 20, 33, 0.985), rgba(7, 13, 24, 0.992));
@@ -167,23 +165,55 @@ body {
   z-index: 60;
 }
 
+.topbar-dropdown-columns {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(280px, 340px);
+  align-items: start;
+}
+
+.topbar-dropdown-column {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  padding: 8px;
+  border-right: 1px solid rgba(111, 167, 224, 0.32);
+}
+
+.topbar-dropdown-column:last-child {
+  border-right: 0;
+}
+
 .topbar-dropdown-item {
   width: 100%;
   border: 1px solid transparent;
-  border-radius: 9px;
+  border-radius: 8px;
   background: transparent;
   color: #d3e4f8;
-  font-size: 0.88rem;
+  font-size: 0.86rem;
   text-align: left;
-  padding: 8px 10px;
+  padding: 7px 8px;
   cursor: pointer;
   white-space: normal;
   line-height: 1.3;
 }
 
+.topbar-dropdown-item--submenu {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.topbar-submenu-caret {
+  color: #a7c3e3;
+  font-size: 0.8rem;
+}
+
 .topbar-dropdown-item:hover {
   border-color: rgba(113, 171, 230, 0.45);
-  background: rgba(40, 71, 107, 0.42);
+  background: rgba(36, 67, 103, 0.36);
   color: #f4f8ff;
 }
 
@@ -201,13 +231,39 @@ body {
 }
 
 .topbar-dropdown-label {
-  padding: 4px 8px;
+  padding: 4px 8px 2px;
   color: #9db5d3;
   font-size: 0.78rem;
   letter-spacing: 0.03em;
   text-transform: uppercase;
 }
 
+.topbar-item-content {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.topbar-item-date {
+  color: #8ea8c8;
+  min-width: 2.15rem;
+  text-align: right;
+  font-size: 0.74rem;
+  line-height: 1;
+}
+
+.topbar-item-source {
+  width: 3px;
+  height: 0.98rem;
+  border-radius: 999px;
+  flex: 0 0 3px;
+}
+
+.topbar-item-text {
+  min-width: 0;
+}
+
 .topbar-submenu {
   display: grid;
   gap: 4px;
@@ -227,6 +283,22 @@ body {
   font-weight: 620;
 }
 
+.topbar-submenu-title--interactive {
+  width: 100%;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #c9dbf1;
+  text-align: left;
+  cursor: pointer;
+}
+
+.topbar-submenu-title--interactive:hover {
+  border-color: rgba(113, 171, 230, 0.45);
+  background: rgba(40, 71, 107, 0.42);
+  color: #f4f8ff;
+}
+
 .topbar-submenu-items {
   display: grid;
   gap: 2px;
@@ -1232,6 +1304,19 @@ body {
     margin-top: 6px;
   }
 
+  .topbar-dropdown-columns {
+    display: block;
+  }
+
+  .topbar-dropdown-column {
+    border-right: 0;
+    border-bottom: 1px solid rgba(111, 167, 224, 0.2);
+  }
+
+  .topbar-dropdown-column:last-child {
+    border-bottom: 0;
+  }
+
   .character-modal-backdrop {
     padding: 12px;
   }