-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d139f1e
commit 83898f5
Showing
5 changed files
with
102 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -22,7 +22,7 @@ | |
| } | ||
| </style> | ||
| </head> | ||
| <body class="bg-gray-100"> | ||
| <body class="container mx-auto"> | ||
|
|
||
| <!--hello! this is an example with alpine to how i thought about what the taps should look like--> | ||
| <!--we'll just keep track of the previous active state and add a transition effect accordingly--> | ||
|
|
@@ -35,45 +35,54 @@ | |
|
|
||
| <div x-data="tabs()" class="flex h-screen"> | ||
| <!-- Sidebar --> | ||
| <div class="w-64 bg-white shadow-lg"> | ||
| <div class="w-[264px] h-[446px] bg-white shadow-lg mt-[170px]"> | ||
| <ul class="py-4"> | ||
| <template x-for="(tab, index) in tabItems" :key="index"> | ||
| <li class="mb-2"> | ||
| <button | ||
| @click="selectTab(index)" | ||
| :class="{ 'bg-blue-500 text-white': activeTab === index, 'hover:bg-gray-200': activeTab !== index }" | ||
| class="w-full px-4 py-2 text-left transition-colors duration-200" | ||
| x-text="tab.name" | ||
| ></button> | ||
| @click="selectTab(index)" | ||
| :class="{ 'bg-[#FA8232] text-white': activeTab === index, 'hover:bg-gray-200': activeTab !== index }" | ||
| class="w-full px-4 py-2 text-left transition-colors duration-200 flex items-center space-x-2" | ||
| > | ||
| <img :src="activeTab === index ? tab.activeIcon : tab.icon" alt="Tab Icon" class="w-5 h-5"> | ||
| <span x-text="tab.name"></span> | ||
| </button> | ||
| <div x-show="showLogoutModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50" x-cloak x-transition> | ||
| <div class="bg-white p-6 rounded-md shadow-lg w-[300px]"> | ||
| <h2 class="text-lg font-semibold mb-4">Confirm Log-out</h2> | ||
| <p class="mb-6">Are you sure you want to log out?</p> | ||
| <div class="flex justify-end gap-3"> | ||
| <button @click="showLogoutModal = false" class="bg-gray-300 px-4 py-2 rounded-md">Cancel</button> | ||
| <button class="bg-[#FA8232] text-white px-4 py-2 rounded-md">Log-out</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| </template> | ||
| </ul> | ||
| </div> | ||
|
|
||
| <!-- Content Area --> | ||
| <div class="flex-1 p-8 relative overflow-hidden"> | ||
| <template x-for="(tab, index) in tabItems" :key="index"> | ||
| <div class="flex-1 p-8 relative "> | ||
|
|
||
| <div | ||
| class="absolute flex items-center justify-center" | ||
| :class="{ 'z-10': activeTab === index, 'z-0': activeTab !== index }" | ||
| x-show="true" | ||
| :style="activeTab === index ? '' : 'pointer-events: none;'" | ||
| > | ||
| <div | ||
| x-show="true" | ||
| :style="activeTab === index ? '' : 'pointer-events: none;'" | ||
| class="absolute inset-0 flex items-center justify-center" | ||
| :class="{ 'z-10': activeTab === index, 'z-0': activeTab !== index }" | ||
| > | ||
| <div | ||
| class="bg-white shadow-lg rounded-lg p-6 w-full max-w-2xl content-card" | ||
| :class="{ | ||
| 'slide-up-enter': index > previousTab && activeTab === index, | ||
| 'slide-up-leave': index < activeTab && activeTab !== index, | ||
| 'slide-down-enter': index < previousTab && activeTab === index, | ||
| 'slide-down-leave': index > activeTab && activeTab !== index, | ||
| 'opacity-0': activeTab !== index | ||
| }" | ||
| > | ||
| <h2 x-text="tab.name" class="text-2xl font-bold mb-4"></h2> | ||
| <p x-text="tab.content" class="text-gray-600"></p> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| class="rounded-lg p-6 content-card" | ||
| :class="{ | ||
| 'slide-up-enter': index > previousTab && activeTab === index, | ||
| 'slide-up-leave': index < activeTab && activeTab !== index, | ||
| 'slide-down-enter': index < previousTab && activeTab === index, | ||
| 'slide-down-leave': index > activeTab && activeTab !== index, | ||
| 'opacity-0': activeTab !== index | ||
| }" | ||
| x-html="currentContent" | ||
| ></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
|
|
@@ -82,18 +91,56 @@ <h2 x-text="tab.name" class="text-2xl font-bold mb-4"></h2> | |
| return { | ||
| activeTab: 0, | ||
| previousTab: 0, | ||
| showLogoutModal: false, | ||
| tabItems: [ | ||
| { name: 'Dashboard', content: 'Welcome to your dashboard. Here you can view an overview of your account and recent activities.' }, | ||
| { name: 'Order History', content: 'View your past orders, track shipments, and manage returns all in one place.' }, | ||
| { name: 'Track Order', content: 'Enter your order number to get real-time updates on your package\'s location and estimated delivery date.' }, | ||
| { name: 'Shopping Cart', content: 'Your shopping cart is currently empty. Add items to your cart to proceed to checkout.' }, | ||
| { name: 'Wishlist', content: 'Keep track of items you love. Add products to your wishlist for easy access later.' }, | ||
| { name: 'Dashboard', url: './dashboard.html', icon: '../assets/images/Stackgray.svg', activeIcon: '../assets/images/Stackwhite.svg' }, | ||
| { name: 'Order History', url: './orderHistory.html', icon: '../assets/images/[email protected]', activeIcon: '../assets/images/StorefrontW.svg' }, | ||
| { name: 'Track Order', url: './trackOrder.html', icon: '../assets/images/MapPinLine.svg', activeIcon: '../assets/images/MapPinLine.svg' }, | ||
| { name: 'Shopping Cart', url: 'shopping-cart.html', icon: '../assets/images/ShoppingCartSimple.svg', activeIcon: '../assets/images/ShoppingCartSimple.svg' }, | ||
| { name: 'Wishlist', url: './whishlist.html', icon: '../assets/images/Heart.svg', activeIcon: '../assets/images/Heart.svg' }, | ||
| { name: 'Compare', url: './compare', icon: '../assets/images/ArrowsCounterClockwise.svg', activeIcon: '../assets/images/ArrowsCounterClockwise.svg' }, | ||
| { name: 'Cards & Address', url: './cards', icon: '../assets/images/NotebookGray.svg', activeIcon: '../assets/images/NotebookGray.svg' }, | ||
| { name: 'Setting', url: './dashboardSetting.html', icon: '../assets/images/Gear.svg', activeIcon: '../assets/images/whiteGear.svg' }, | ||
| { name: 'Log-out', icon: '../assets/images/SignOut.svg', activeIcon: '../assets/images/SignOut.svg' }, | ||
| ], | ||
| selectTab(index) { | ||
|
|
||
| currentContent: '', | ||
|
|
||
| async init() { | ||
| await this.selectTab(this.activeTab); | ||
| }, | ||
|
|
||
| async selectTab(index) { | ||
| this.previousTab = this.activeTab; | ||
|
|
||
| if (this.tabItems[index].name === 'Log-out') { | ||
| this.showLogoutModal = true; | ||
| return; | ||
| } | ||
|
|
||
| this.activeTab = index; | ||
|
|
||
| try { | ||
| const response = await fetch(this.tabItems[index].url); | ||
| if (response.ok) { | ||
| this.currentContent = await response.text(); | ||
| } else { | ||
| this.currentContent = 'Error loading content. Please try again later.'; | ||
| } | ||
| } catch (error) { | ||
| this.currentContent = 'Error loading content. Please check your connection.'; | ||
| } | ||
| }, | ||
|
|
||
| confirmLogout() { | ||
| console.log('User confirmed logout'); | ||
| this.showLogoutModal = false; | ||
| }, | ||
|
|
||
| cancelLogout() { | ||
| this.showLogoutModal = false; | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| </script> | ||
| </body> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters