style: navbar dropdown improvements

rosenpass · Oct 1, 2024 · c6ac894 · c6ac894
1 parent e286d35
commit c6ac894
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 32 deletions.
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
@@ -58,14 +58,16 @@
 								<ul class="dropdown-menu nest-ul" aria-labelledby="dropdownNavbarLink">
 									{{ range .Pages }}
 										{{ if .IsSection }}
-										<li><a class="dropdown-item" href="{{ .RelPermalink }}"><h5>{{ .Title }}</h5></a>
+										<li class="dropdown-section"><a class="dropdown-item text-muted" href="{{ .RelPermalink }}">{{ .Title }}</a>
 
-											<ul class="nest-ul nested-ul">
-												{{ range .Pages }}
-													<li><a class="dropdown-item nested" href="{{if .Params.manualLink }}{{ .Params.manualLink }}{{ else }}{{ .Permalink }}{{ end }}">{{ .Title }}{{ if .Params.external }} <i class="fa-solid fa-up-right-from-square fa-2xs external-link text-muted"></i>{{ end }}</a>
-													<p>test test test</p></li>
-												{{ end }}
-											</ul>
+											<div class="row">
+												<ul class="nest-ul nested-ul">
+													{{ range .Pages }}
+														<li><a class="dropdown-item nested" href="{{if .Params.manualLink }}{{ .Params.manualLink }}{{ else }}{{ .Permalink }}{{ end }}">{{ .Title }}{{ if .Params.external }} <i class="fa-solid fa-up-right-from-square fa-2xs external-link text-muted"></i>{{ end }}</a>
+														<p>test test test</p></li>
+													{{ end }}
+												</ul>
+											</div>
 										</li>
 										{{ else }}
 										<li><a class="dropdown-item" href="{{ .RelPermalink }}">{{ .Title }}</a>

diff --git a/static/css/rosenpass.css b/static/css/rosenpass.css
@@ -243,42 +243,62 @@ a.td-rss-button {
 
 .dropdown:hover .dropdown-menu.nest-ul,
 .dropdown .dropdown-menu.nest-ul.show {
-  display: flex;
-  left: -150px;
+  display: grid;
+  grid-auto-flow: column dense;
+  grid-template-rows: repeat(4, auto);
+  left: -170px;
   top: 100%;
-  border: none;
-  flex-flow: row wrap;
-  width: 550px;
-  margin-top: var(--bs-dropdown-spacer);
+  border-color: var(--bs-black-flip);
+  border-style: solid;
+  border-width: 1px;
+  border-top-width: 0;
+  border-radius: 0;
 
   li {
     margin-left: 0;
   }
-}
-
-.nest-ul {
-  list-style-type: none ;
-  padding-left: 1rem;
-  justify-content: space-between;
-
-  li {
-    padding-left: 0 !important;
-    max-width: 45%;
 
   a {
-    padding-left: 0 !important;
     color: var(--bs-link-color);
     font-weight: bold;
-    text-wrap: auto;
   }
+
+  p {
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+    font-size: smaller;
+  }
+}
+
+@media(max-width: 1038px) {
+  .dropdown:hover .dropdown-menu.nest-ul,
+.dropdown .dropdown-menu.nest-ul.show {
+  left: -350px;
   }
 }
 
+.dropdown:hover .dropdown-menu.nest-ul:has(.dropdown-section),
+.dropdown .dropdown-menu.nest-ul.show:has(.dropdown-section) {
+  grid-template-columns: repeat(2, auto);
+  grid-auto-flow: row dense;
+}
+
+.nested-ul {
+  list-style-type: none;
+}
+.row:has(.nested-ul){
+  margin: 0;
+}
+
 .nest-ul.nested-ul {
   padding-left: 0;
-  li {
-    max-width: 100%;
-  }
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(3, auto);
+}
+
+li.dropdown-section {
+  box-shadow: 0.1rem 0.1rem 0.1rem var(--bs-gray-200-flip);
+  margin-bottom: 1rem;
 }
 
 .dropdown:hover .dropdown-menu {
@@ -318,6 +338,7 @@ a.td-rss-button {
  justify-content: center;
  margin-left: auto;
  padding: 0.5rem;
+ overflow-x: unset;
 }
 
 /* Burger fixes */
@@ -1031,8 +1052,9 @@ body:has(.td-offline-search-results) {
 .container-fluid:has(input.td-search__input:focus),
 .container-fluid:has(input.td-search__input:hover),
 body:has(.td-offline-search-results) {
-  .dropdown:hover .dropdown-menu {
-    display: none;
+  .dropdown-menu {
+    transition: all 0s 0.2s;
+    visibility: hidden;
   }
 
   .td-search__input {
@@ -1061,10 +1083,10 @@ body:has(.td-offline-search-results) {
 
 /* Handles expansion of navbar. Not sure if best end result */
 .navbar-nav {
-  @media(min-width:768px){
+  @media(min-width:920px){
     max-height: 120px !important;
     }
-  @media(min-width:1060px){
+  @media(min-width:1038px){
     max-height: 50px !important;
     }
   /* @media(min-width:1170px){