[edit] layout nav header

Joy-port · Aug 18, 2021 · 4da740a · 4da740a
1 parent c899628
commit 4da740a
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/app/assets/style/all.scss b/app/assets/style/all.scss
@@ -15,4 +15,4 @@
 @import './components/notification';
 @import './components/swiper';
 @import './components/timeline';
-@import './components/scrollbar';
+@import './components/scrollbar';
diff --git a/app/layout.ejs b/app/layout.ejs
@@ -32,6 +32,46 @@
   </head>
 
   <body>
+    <!-- 修改後的nav -->
+    <nav class="navbar navbar-expand-lg navbar-light w-100 py-0 border-bottom align-items-center">
+      <div class="container">
+        <!-- 排列要從md 斷點後再做設置，要不然漢堡選單下拉的位置無法定位 -->
+        <!-- flex grow 展開區域寬度 -->
+        <h1 class="text-center mb-0 p-0 flex-grow-1 | order-lg-first"><a href="index.html" class="navbar-brand | d-block fs-5 text-primary | py-18 me-0 | py-md-8" href="#">EXHIBINECTION</a></h1>
+
+        <!-- cart -->
+        <a
+        href="#"
+        class="d-block position-relative order-lg-last"
+        type="button"
+        data-bs-toggle="offcanvas"
+        data-bs-target="#cart-offcanvas"
+        aria-controls="cart-offcanvas"
+        >
+        <span
+        class="material-icons | notification-circle | text-black align-middle"
+        >
+        confirmation_number
+      </span>
+    </a>
+    <!-- Navbar -->
+    <a class="navbar-toggler border-0 p-0 | order-first" type="button" data-bs-toggle="collapse" data-bs-target="#navbarList" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon"></span>
+    </a>
+    <!-- Sign in up  -->
+    <!-- flex grow 0 清空延伸空間 -->
+    <div class="collapse navbar-collapse text-center flex-grow-0" id="navbarList">
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a href="#" class="nav-link text-nowrap py-3 px-5 | py-lg-0" aria-current="page" >Sign in</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link text-nowrap py-3 px-5 | py-lg-0">Sign up</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
     <!-- ！！記得新增漢堡選單功能 -->
     <!-- navbar  -->
     <nav class="border-bottom bg-white position-relative" style="z-index: 1080;">