#438: Creation of Mobile Navigation Menu

- WIP

src/app/core/layout/header/mobile-nav/mobile-nav.component.html

@@ -1,15 +1,66 @@
+<div class="collapse" id="navbarToggleExternalContent" data-bs-theme="dark">
+  <div class="navbarToggle bg-black p-4">
+    <li class="nav-link mt-3">item menu</li>
+    <li class="nav-link">item menu</li>
+    <li class="nav-link">item menu</li>
+    <li class="nav-link">item menu</li>
+    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
+  </div>
+</div>
+
+
 <nav class="navbar navbar-expand-md align-items-center">
-  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
+
+  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent"
     aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
   <!--No desenvolupo perquè a Figma encara no hi ha disseny d'aquesta part-->
-  <div class="collapse navbar-collapse" id="navbarNavDropdown">
+  <!--<div class="collapse navbar-collapse" id="navbarNavDropdown">
     <ul class="navbar-nav">
       <li class="nav-link">item menu</li>
     </ul>
+  </div>-->
+
+  <!--<div class="offcanvas offcanvas-top bg-black" id="collapse" aria-labelledby="offcanvasTopLabel">
+    <div class="offcanvas-header">
+      <h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
+      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Toggle navigation"></button>
+    </div>
+    <div class="offcanvas-body">
+      <li class="nav-link">item menu</li>
+      <li class="nav-link">item menu</li>
+      <li class="nav-link">item menu</li>
+      <li class="nav-link">item menu</li>
+    </div>
   </div>
 
+  <a class="navbar-brand" href="#">Navbar</a>
+    <div class="collapse navbar-collapse bg-black mx-0" id="navbarToggler">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+        <li class="nav-item">
+          <a class="nav-link active text-white" aria-current="page" href="#">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" href="#">Link</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" aria-disabled="true">Disabled</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link text-white" aria-disabled="true">Disabled</a>
+        </li>
+      </ul>
+
+    </div>-->
+
+
   <span class="breadcrumb">{{ "modules.starter.main.section2.title" | translate }}</span>
  </nav>

src/app/core/layout/header/mobile-nav/mobile-nav.component.scss

@@ -3,8 +3,6 @@ nav{
     position:fixed;
     top: 0;
     width: 100%;
-    left:50%;
-    transform: translate(-50%, 0%);
     height: 42px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
@@ -44,6 +42,24 @@ $navbar-toggler-transition: none;
 
 }
 
+#navbarToggleExternalContent {
+    margin-top: -7px;
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+    position: fixed;
+    width: -webkit-fill-available;
+}
+
+.navbarToggle {
+    border-bottom-left-radius: 20px;
+    border-bottom-right-radius: 20px;
+}
+
+.nav-link {
+    color: white;
+    margin: 20px 0 20px 7px;
+}
+
 @media screen and (max-width: 768px) {
     nav {
         display: flex;