From b37233815d1f611c90b6c9dcbd3b5865afddf5cd Mon Sep 17 00:00:00 2001
From: gjsss <1615590366@qq.com>
Date: Mon, 25 Jul 2022 21:07:15 +0800
Subject: [PATCH] feat: navbar dropdown

---
 docs/content/docs/components/navbar.md | 60 ++++++++++++++++++++++++++
 src/components/_navbar.scss            | 54 ++++++++++++++++++++---
 2 files changed, 108 insertions(+), 6 deletions(-)

diff --git a/docs/content/docs/components/navbar.md b/docs/content/docs/components/navbar.md
index 9064667..7574993 100644
--- a/docs/content/docs/components/navbar.md
+++ b/docs/content/docs/components/navbar.md
@@ -72,6 +72,66 @@ Add ```.fixed``` to ```<nav>``` to fix the nav to the top to have it scroll the
 </nav>
 ```
 
+### Navbar with Dropdown
+
+<nav class="border split-nav">
+  <div class="nav-brand">
+    <h3><a href="#">Get PaperCSS</a></h3>
+  </div>
+  <div class="collapsible">
+    <input id="collapsible2" type="checkbox" name="collapsible2">
+    <label for="collapsible2">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
+    <div class="collapsible-body">
+      <ul class="inline">
+        <li><a href="#">Documentation</a></li>
+        <li class="dropdown">
+          <div class="dropdown-title">About</div>
+          <ul class="dropdown-menu border border-4">
+            <li><a href="#">Github</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+
+#### Code:
+
+```html
+<nav class="border split-nav">
+  <div class="nav-brand">
+    <h3><a href="#">Get PaperCSS</a></h3>
+  </div>
+  <div class="collapsible">
+    <input id="collapsible2" type="checkbox" name="collapsible2">
+    <label for="collapsible2">
+      <div class="bar1"></div>
+      <div class="bar2"></div>
+      <div class="bar3"></div>
+    </label>
+    <div class="collapsible-body">
+      <ul class="inline">
+        <li><a href="#">Documentation</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Github</a></li>
+        <li class="dropdown">
+          <div class="dropdown-title">About</div>
+          <ul class="dropdown-menu border border-4">
+            <li><a href="#">Github</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+```
+
 ### Not Split Navbar
 
 <nav class="border">
diff --git a/src/components/_navbar.scss b/src/components/_navbar.scss
index e40e3b1..002f9fb 100644
--- a/src/components/_navbar.scss
+++ b/src/components/_navbar.scss
@@ -23,8 +23,9 @@ nav {
     width: 2rem;
   }
 
-  .collapsible input[id^=collapsible]:checked + button, // Leaving for backwards compatibility. See docs for proper usage
-  .collapsible input[id^=collapsible]:checked + label {
+  .collapsible input[id^=collapsible]:checked+button,
+  // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible input[id^=collapsible]:checked+label {
     .bar1 {
       transform: rotate(-45deg) translate(-9px, 7px);
     }
@@ -69,6 +70,46 @@ nav {
     }
   }
 
+  ul.inline li.dropdown {
+    font-size: 1.3rem;
+    margin: 0;
+
+    div.dropdown-title {
+      cursor: pointer;
+      margin: 0;
+      padding: 0 10px;
+
+      &::after {
+        content: '▼';
+        font-size: 0.8rem;
+        padding: 0 2px;
+        vertical-align: middle;
+      }
+    }
+
+    ul.dropdown-menu {
+      @include color('background-color', 'primary-inverse');
+      display: none;
+      flex-direction: column;
+      justify-content: center;
+      padding: 10px;
+      position: absolute;
+
+      li {
+        margin: 0 15px 10px 30px;
+
+        a {
+          font-size: 1.1rem;
+        }
+      }
+    }
+
+    div.dropdown-title:hover+ul.dropdown-menu,
+    ul.dropdown-menu:hover {
+      display: flex;
+    }
+  }
+
   a {
     @include color('color', 'primary');
     @include color('border-bottom-color', 'primary');
@@ -118,7 +159,7 @@ nav {
     }
   }
 
-  .collapsible input[id^=collapsible]:checked ~ div.collapsible-body {
+  .collapsible input[id^=collapsible]:checked~div.collapsible-body {
     margin: 0;
     max-height: 960px;
     opacity: 1;
@@ -149,13 +190,14 @@ nav {
     border-width: 2px;
   }
 
-  .collapsible > button {
+  .collapsible>button {
     // Leaving for backwards compatibility. See docs for proper usage
     border: 0;
   }
 
-  .collapsible > button, // Leaving for backwards compatibility. See docs for proper usage
-  .collapsible > label {
+  .collapsible>button,
+  // Leaving for backwards compatibility. See docs for proper usage
+  .collapsible>label {
     @include color('background-color', 'main-background');
     display: none;
     font-size: 0.5rem;