Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Made the aside bar responsive for mobile #2071

Merged
merged 5 commits into from
Aug 9, 2024
Merged

Made the aside bar responsive for mobile #2071

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a299d2d
Made the aside bar responsive for mobile
Saipradyumnagoud Jul 30, 2024
8e5cc97
Updated Aside Bar Made it Resposnsive
Saipradyumnagoud Aug 9, 2024
7d6c19b
Made Aside Bar Resposnive
Saipradyumnagoud Aug 9, 2024
3302337
Updated orders page
Saipradyumnagoud Aug 9, 2024
405b805
Updated
Saipradyumnagoud Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

140 changes: 71 additions & 69 deletions src/User/components/Aside/Aside.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,33 @@ import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import Swal from "sweetalert2";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { GoArrowRight } from "react-icons/go";
import { FaSignOutAlt } from "react-icons/fa"; // Import an icon for the logout button

const CartIcon = () => {
const CartIcon = ({ collapsed }) => {
const cartItems = useSelector((state) => state.cart.items);

const noOfItems = cartItems.reduce((a, b) => a + b.quantity, 0);

return (
<Link
to="/dashboard-cart"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/pbrgppbb.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Cart</span>
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItems}
</div>
{!collapsed && <span>Cart</span>}
{!collapsed && (
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItems}
</div>
)}
</Link>
);
};

const WishlistIcon = () => {
const WishlistIcon = ({ collapsed }) => {
const wishlistItems = useSelector((state) => state.wishlist.items || []);
const noOfItem = wishlistItems.reduce((a, b) => a + (b.quantity ?? 1), 0);

Expand All @@ -37,37 +37,34 @@ const WishlistIcon = () => {
to="/dashboard-wishlist"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/ulnswmkk.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Wishlist</span>
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItem}
</div>
{!collapsed && <span>Wishlist</span>}
{!collapsed && (
<div className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
{noOfItem}
</div>
)}
</Link>
);
};

const Aside = () => {
const navigate = useNavigate();
const location = useLocation();
const [collapsed, setCollapsed] = useState(false);

useEffect(() => {
const params = new URLSearchParams(location.search);
// const email = params.get("email");
const name = params.get("name");

if (name) {
// localStorage.setItem("useremail", email);
localStorage.setItem("username", name);
}
}, [location]);

const userEmail = localStorage.getItem("useremail");
const username = localStorage.getItem("username") || "Admin";

const handleLogout = () => {
Expand Down Expand Up @@ -105,112 +102,117 @@ const Aside = () => {
});
};

const toggleCollapse = () => {
setCollapsed(!collapsed);
};

return (
<>
<aside
className="w-64 bg-[#2d4031] text-white flex flex-col fixed top-0 mt-20 index-"
className={`bg-[#2d4031] text-white flex flex-col fixed top-0 mt-20 ${
collapsed ? "w-20" : "w-64"
} transition-width duration-300`}
style={{ position: "sticky" }}>
<div className="flex items-center space-x-4 mt-10 ml-5">
<div className="h-10 bg-green-700 flex items-center justify-center p-8 rounded-lg gap-2">
<lord-icon
style={{
height: "40px",
width: "40px",
}}
src="https://cdn.lordicon.com/hrjifpbq.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span className="text-white">{username}</span>
</div>
{!collapsed && (
<div className="h-10 bg-green-700 flex items-center justify-center p-8 rounded-lg gap-2">
<lord-icon
style={{ height: "40px", width: "40px" }}
src="https://cdn.lordicon.com/hrjifpbq.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span className="text-white">{username}</span>
</div>
)}
<button
className="ml-4 bg-green-700 p-2 rounded-full"
onClick={toggleCollapse}>
<GoArrowRight
className={`transform ${
collapsed ? "rotate-180" : "rotate-0"
} transition-transform duration-300`}
/>
</button>
</div>
<nav className="flex-1 px-4 py-8 space-y-2">
<Link
to="/profile"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/hrjifpbq.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>My Profile</span>
{!collapsed && <span>My Profile</span>}
</Link>

<Link
to="/dashboard-order"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/xljvqlng.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Orders</span>
{!collapsed && <span>Orders</span>}
</Link>

<CartIcon />
<CartIcon collapsed={collapsed} />

<WishlistIcon />
<WishlistIcon collapsed={collapsed} />

<Link
to="/dashboard-notifications"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md relative">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/lznlxwtc.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Notifications</span>
<span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
2
</span>
{!collapsed && <span>Notifications</span>}
{!collapsed && (
<span className="absolute right-2 top-1 bg-red-500 text-xs text-white rounded-full w-5 h-5 flex items-center justify-center mt-1">
2
</span>
)}
</Link>

<Link
to="/Help"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/ojnjgkun.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Help</span>
{!collapsed && <span>Help</span>}
</Link>
<Link
to="/contact"
className="flex items-center space-x-2 p-2 hover:bg-green-700 rounded-md">
<lord-icon
style={{
height: "20px",
width: "20px",
}}
style={{ height: "20px", width: "20px" }}
src="https://cdn.lordicon.com/srsgifqc.json"
trigger="hover"
colors="primary:#ffffff"></lord-icon>
<span>Contact Us</span>
{!collapsed && <span>Contact Us</span>}
</Link>

<div className="flex items-center space-x-2 p-2 relative justify-center">
<button
type="button"
onClick={handleLogout}
className="mt-10 bg-green-700"
className="mt-10 bg-green-700 flex items-center justify-center p-2 rounded-md"
style={{
padding: "12px 30px",
padding: collapsed ? "12px" : "12px 30px",
borderRadius: "8px",
border: "1px solid #98bf8cff",
}}>
Logout
{collapsed ? (
<FaSignOutAlt className="text-white" />
) : (
"Logout"
)}
</button>
</div>
</nav>
Expand Down