Skip to content

Navbar -1 #9

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

Open
Ritu073 wants to merge 4 commits into
base: Production-Deployment
Choose a base branch
from
Open

Navbar -1 #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
fa5a143
Add files via upload
Ritu073 Dec 14, 2024
cdc7f20
Delete src/Components directory
Ritu073 Dec 14, 2024
9b029e7
Add files via upload
Ritu073 Dec 14, 2024
ce06b6d
Navbar homepage responsive
Ritu073 Dec 16, 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
94 changes: 81 additions & 13 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,81 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IISPPR Intern Management</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Sidebar</title>

<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- Bootstrap Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<!-- CSS File -->
<link rel="stylesheet" href="styles.css">
</head>
<body class="bg-gray-100 transition-all">

<!-- Sidebar and Content Container -->
<div class="flex">
<!-- Sidebar -->
<div
id="sidebar"
class="bg-blue-500 h-screen fixed hover:w-64 w-16 duration-300 text-white flex flex-col justify-between sidebar">

<!-- Sidebar Items -->
<div class="mt-4">
<ul id="menuItems">
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-house text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Home</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-people text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Projects</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-list-task text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Categories</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-shop text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Stores</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-bar-chart text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Reports</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-gear text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Settings</span>
</li>
</ul>
</div>

<!-- Footer Items -->
<div class="mb-4">
<ul>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-plus-circle text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Add Task</span>
</li>
<li class="flex items-center py-4 px-2 hover:bg-blue-600 cursor-pointer">
<i class="bi bi-box-arrow-right text-lg"></i>
<span class="ml-4 text-sm sidebar-hover-text whitespace-nowrap">Log Out</span>
</li>
</ul>
</div>
</div>

<!-- Main Content -->
<div id="mainContent" class="ml-16 transition-all p-6 content">
<h1 class="text-2xl font-bold">Main Content Area</h1>
<p class="mt-4 text-gray-600">Main page content, i.e., homepage</p>
</div>
</div>

<!-- JavaScript File -->
<script src="script.js"></script>
</body>
</html>
25 changes: 25 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const menuItems = document.querySelectorAll('#menuItems li');
const mainContent = document.getElementById('mainContent');
const sidebar = document.getElementById('sidebar');

sidebar.addEventListener('mouseenter', () => {
mainContent.style.marginLeft = '16rem';
});

sidebar.addEventListener('mouseleave', () => {
mainContent.style.marginLeft = '4rem';
});

menuItems.forEach((item) => {
item.addEventListener('click', () => {
// Remove background highlight from all items
menuItems.forEach(item => item.classList.remove('bg-blue-700'));
// Add background highlight to the clicked item
item.classList.add('bg-blue-700');
// Update main content
mainContent.innerHTML = `
<h1 class="text-2xl font-bold">${item.innerText}</h1>
<p class="mt-4 text-gray-600">Content for ${item.innerText}</p>
`;
});
});
80 changes: 80 additions & 0 deletions sidenavbar-2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Side Navbar with Logo</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">

<div class="h-screen w-60 flex flex-col bg-gray-300 border-r border-blue-400">
<div class="p-4">
<h1 class="text-2xl font-bold">Teams</h1>
</div>

<div class="flex-1">
<ul class="space-y-2 text-gray-700">
<li>
<a
href="#"
class="block px-4 py-2 font-bold cursor-pointer hover:bg-gray-400 rounded"
>All teams</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 cursor-pointer hover:bg-gray-400 rounded"
>General Inquiry</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 bg-blue-200 font-bold cursor-pointer rounded"
>Tech Support</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 cursor-pointer hover:bg-gray-400 rounded"
>Returns</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 cursor-pointer hover:bg-gray-400 rounded"
>Billing</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 cursor-pointer hover:bg-gray-400 rounded"
>Product Knowledge</a
>
</li>
</ul>
</div>

<!-- Logo Section -->
<div class="p-4 flex justify-center">
<img
src="#"
alt="Logo"
class="w-20 h-20 object-contain"
/>
</div>

<!-- Bottom Icon -->
<div class="p-4 mt-auto text-center">
<i class="fa-solid fa-people-group text-4xl text-black"></i>
</div>
</div>


</body>
</html>
33 changes: 0 additions & 33 deletions src/Components/AccountDetail.jsx
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions src/Components/Navbar.jsx
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions src/Components/Notification.jsx
View file
Open in desktop

This file was deleted.

138 changes: 0 additions & 138 deletions src/Components/TopNavbar.jsx
View file
Open in desktop

This file was deleted.

Loading