From 7ade1089f4abe3d2e6e9cbf3b9b9e7ee341f0960 Mon Sep 17 00:00:00 2001
From: Mohasin-Haque <mohasinhaque23121@gmail.com>
Date: Tue, 8 Feb 2022 08:19:54 +0530
Subject: [PATCH] Feat - added responsive navbar in navbars

---
 pages/navbar.html |  25 +++++++
 styles/main.css   |   1 +
 styles/navbar.css | 174 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 200 insertions(+)
 create mode 100644 styles/navbar.css

diff --git a/pages/navbar.html b/pages/navbar.html
index 3a4adf9..2a0103e 100644
--- a/pages/navbar.html
+++ b/pages/navbar.html
@@ -48,6 +48,7 @@
         <h2 class="heading">Navbar</h2>
         <p class="description">Navbars are one of the most important part of a website. Here user will find the
             links/buttons where he want to go or access easily.</p>
+        <!-- Simple Navbar -->
         <h3 class="heading heading-avatar">Navbar on Top</h3>
         <p class="description description-avatar">Its a normal navbar which we generally use in our sites. We keep some
             links and our logo on it. You can include <span class="colored-text">nav</span> class as
@@ -71,6 +72,30 @@ <h3 class="heading heading-avatar">Navbar on Top</h3>
                 </div>
             </nav>
         </div>
+
+        <!-- Responsive Navbar -->
+        <h3 class="heading heading-avatar">Responsive Navbar on Top</h3>
+        <p class="description description-avatar">Its a responsive navbar which we generally use in our sites. We keep
+            some
+            links and our logo on it. This responsive navbar will hide some options when screen size will decrease or
+            simply it changes to hamburgure. You can include <span class="colored-text">nav</span> class as
+            shown below. </p>
+        <iframe class="code-snippet-display"
+            src="https://carbon.now.sh/embed?bg=rgba%28255%2C59%2C48%2C1%29&t=base16-light&wt=none&l=htmlmixed&width=823&ds=false&dsyoff=82px&dsblur=100px&wc=true&wa=false&pv=27px&ph=22px&ln=false&fl=1&fm=IBM+Plex+Mono&fs=14px&lh=143%25&si=false&es=2x&wm=false&code=%253C%21--%2520Responsive%2520Navbar%2520--%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cnav%2520class%253D%2522navbar-responsive%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cul%2520class%253D%2522menu%2522%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522logo%2522%253E%253Ca%2520href%253D%2522%2523%2522%253EFAST%2520UI%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522item%2522%253E%253Ca%2520href%253D%2522%2523%2522%253EHome%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522item%2522%253E%253Ca%2520href%253D%2522%2523%2522%253EAbout%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522item%2522%253E%253Ca%2520href%253D%2522%2523%2522%253EServices%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522item%2520button%2522%253E%253Ca%2520href%253D%2522%2523%2522%253ELogin%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522item%2520button%2520secondary%2522%253E%253Ca%2520href%253D%2522%2523%2522%253ESignup%253C%252Fa%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253Cli%2520class%253D%2522toggle%2522%253E%253Cspan%2520class%253D%2522bars%2522%253E%253C%252Fspan%253E%253C%252Fli%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Ful%253E%250A%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%253C%252Fnav%253E"
+            sandbox="allow-scripts allow-same-origin">
+        </iframe>
+        <nav class="navbar-responsive">
+            <ul class="menu">
+                <li class="logo"><a href="#">FAST UI</a></li>
+                <li class="item"><a href="#">Home</a></li>
+                <li class="item"><a href="#">About</a></li>
+                <li class="item"><a href="#">Services</a></li>
+                <li class="item button"><a href="#">Login</a></li>
+                <li class="item button secondary"><a href="#">Signup</a></li>
+                <li class="toggle"><span class="bars"></span></li>
+            </ul>
+        </nav>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/styles/main.css b/styles/main.css
index 0554721..717b425 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -9,6 +9,7 @@
 @import url("../styles/dialogue.css");
 @import url("../styles/image.css");
 @import url("../styles/input.css");
+@import url("../styles/navbar.css");
 @import url("../styles/rating.css");
 @import url("../styles/toast.css");
 @import url("../styles/typography.css");
diff --git a/styles/navbar.css b/styles/navbar.css
new file mode 100644
index 0000000..7042212
--- /dev/null
+++ b/styles/navbar.css
@@ -0,0 +1,174 @@
+.navbar-responsive {
+  padding: 1rem;
+  background-color: var(--body-background-color);
+  color: var(--text-color-black);
+  box-shadow: var(--box-shadow-down);
+  padding: 0.3rem 1.2rem;
+  margin-bottom: 1rem;
+}
+
+ul {
+  list-style-type: none;
+}
+
+a {
+  color: var(--text-color-black);
+  text-decoration: none;
+}
+
+.menu li {
+  font-size: 1.2rem;
+  font-weight: 500;
+  padding: 0.9rem 0.3rem;
+}
+
+.menu li a {
+  display: block;
+}
+
+.logo a {
+    font-size: 1.4rem;
+    font-weight: 500;
+    color: var(--primary-color);
+}
+
+/* Mobile Menu */
+.menu {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toggle {
+  order: 1;
+}
+
+.item.button {
+  order: 2;
+}
+
+.item {
+  width: 100%;
+  text-align: center;
+  order: 3;
+  display: none;
+}
+
+
+.item.active {
+  display: block;
+}
+
+.toggle {
+  cursor: pointer;
+}
+
+.bars {
+  background: var(--hover-color);
+  display: inline-block;
+  height: 2px;
+  position: relative;
+  width: 1.1rem;
+}
+
+.bars::before,
+.bars::after {
+  background: var(--hover-color);
+  content: "";
+  display: inline-block;
+  height: 2px;
+  position: absolute;
+  width: 1.1rem;
+}
+
+.bars::before {
+  top: 0.3rem;
+}
+
+.bars::after {
+  top: -0.3rem;
+}
+
+/* Tablet Menu */
+@media all and (min-width: 468px) {
+  .menu {
+    justify-content: center;
+  }
+
+  .logo {
+    flex: 1;
+  }
+
+  .item.button {
+    width: auto;
+    order: 1;
+    display: block;
+  }
+
+  .toggle {
+    order: 2;
+  }
+
+  .button.secondary {
+    border: 0;
+  }
+
+  .button a {
+    text-decoration: none;
+    padding: 0.4rem 0.9rem;
+    background: var(--primary-color);
+    border: 1px solid var(--primary-color);
+    border-radius: 50em;
+  }
+
+  .button.secondary a {
+    background: transparent;
+  }
+
+  .button a:hover {
+    transition: all 0.25s;
+  }
+
+  /* not pseudo class:- anything that is not the class of secondary a:hover and change the background */
+
+  .button:not(.secondary) a:hover {
+    background: var(--secondary-color);
+    border-color: var(--hover-color);
+  }
+
+  .button.secondary a:hover {
+    color: var(--hover-color);
+  }
+}
+
+@media all and (min-width: 768px) {
+  .item {
+    display: block;
+    width: auto;
+  }
+
+  .toggle {
+    display: none;
+  }
+
+  .logo {
+    order: 0;
+  }
+
+  .item {
+    order: 1;
+  }
+
+  .button {
+    order: 2;
+  }
+
+  .menu li {
+    padding: 0.9rem 0.6rem;
+  }
+
+  .menu li.button {
+    padding-right: 0;
+  }
+}