From fa5a1437b76a4ef1c41d532841527261210d6187 Mon Sep 17 00:00:00 2001 From: Ritu <147260911+Ritu073@users.noreply.github.com> Date: Sat, 14 Dec 2024 14:14:39 +0530 Subject: [PATCH 1/4] Add files via upload --- index.html | 94 ++++++++++++++++++++++++++++++++++++++++++++++-------- script.js | 25 +++++++++++++++ styles.css | 21 ++++++++++++ 3 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html index d336835..20c1a7a 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,81 @@ - - - - - - - IISPPR Intern Management - - -
- - - + + + + + + Dynamic Sidebar + + + + + + + + + + + + + +
+ +
+ + +
+ +
+ + +
+
    +
  • + + Add Task +
    • +
  • + + Log Out +
    • +
+
+
+ + +
+

Main Content Area

+

Main page content, i.e., homepage

+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..befd40c --- /dev/null +++ b/script.js @@ -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 = ` +

${item.innerText}

+

Content for ${item.innerText}

+ `; + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9dcb707 --- /dev/null +++ b/styles.css @@ -0,0 +1,21 @@ +.sidebar { + transition: width 0.3s ease; + } + + .sidebar-hover-text { + opacity: 0; + transition: opacity 0.3s ease; + } + + .sidebar:hover { + width: 16rem; /* Expand to 64 */ + } + + .sidebar:hover .sidebar-hover-text { + opacity: 1; + } + + .content { + transition: margin-left 0.3s ease; + } + \ No newline at end of file From cdc7f20bdc35e09da614d64aae91f63f4b5fcc84 Mon Sep 17 00:00:00 2001 From: Ritu <147260911+Ritu073@users.noreply.github.com> Date: Sat, 14 Dec 2024 19:42:39 +0530 Subject: [PATCH 2/4] Delete src/Components directory --- src/Components/AccountDetail.jsx | 33 -------- src/Components/Navbar.jsx | 11 --- src/Components/Notification.jsx | 9 -- src/Components/TopNavbar.jsx | 138 ------------------------------- src/Components/URIs.js | 3 - src/Components/compIndex.js | 3 - src/Components/ui/button.jsx | 48 ----------- src/Components/ui/sheet.jsx | 108 ------------------------ 8 files changed, 353 deletions(-) delete mode 100644 src/Components/AccountDetail.jsx delete mode 100644 src/Components/Navbar.jsx delete mode 100644 src/Components/Notification.jsx delete mode 100644 src/Components/TopNavbar.jsx delete mode 100644 src/Components/URIs.js delete mode 100644 src/Components/compIndex.js delete mode 100644 src/Components/ui/button.jsx delete mode 100644 src/Components/ui/sheet.jsx diff --git a/src/Components/AccountDetail.jsx b/src/Components/AccountDetail.jsx deleted file mode 100644 index b3a9177..0000000 --- a/src/Components/AccountDetail.jsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from "react"; -import { HiPencil } from "react-icons/hi2"; - -const AccountDetail = () => { - const Multidetails = [ - { title: "Full Name*", subtitle: "John Doe" }, - { title: "Company Email*", subtitle: "abc@gmail.com" }, - { title: "Account Password*", subtitle: "**********" }, - { title: "Company Name", subtitle: "Intern Hub" }, - { title: "Employee ID", subtitle: "IH-1234" }, - { title: "Current Role", subtitle: "Manager" }, - ]; - return ( -
-

Account

-
-
- {Multidetails.map((items, index) => ( -
-
{items.title}
-
{items.subtitle}
-
- ))} - - - -
-
-
- ); -}; - -export default AccountDetail; diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx deleted file mode 100644 index abcfb08..0000000 --- a/src/Components/Navbar.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import { TopNavbar } from "./compIndex"; - -const Navbar = () => { - return ( - <> - - - ); -}; - -export default Navbar; diff --git a/src/Components/Notification.jsx b/src/Components/Notification.jsx deleted file mode 100644 index 06c2ca4..0000000 --- a/src/Components/Notification.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Notification = () => { - return ( -
Notification
- ) -} - -export default Notification \ No newline at end of file diff --git a/src/Components/TopNavbar.jsx b/src/Components/TopNavbar.jsx deleted file mode 100644 index 75f793f..0000000 --- a/src/Components/TopNavbar.jsx +++ /dev/null @@ -1,138 +0,0 @@ -import { useState } from "react"; -import { userIcon as user } from "./URIs.js"; -import { Button } from "@/Components/ui/button.jsx"; -import { Sheet, SheetContent, SheetTrigger } from "@/Components/ui/sheet"; -import { Link } from "react-router-dom"; -import { - Menu, - Search, - Bell, - MessageSquare, - ChevronDown, - X, -} from "lucide-react"; - -const TopNavbar = () => { - const [isSearchVisible, setIsSearchVisible] = useState(false); - - return ( -
-
- {/* Mobile Layout */} -
- {/* Hamburger Menu */} - - - - - -
-
- - -
-
- - Notifications -
-
- - Messages -
-
- Profile - Intern Profile -
-
- - - - {/* Title */} - - Home - - {/* Search Toggle */} - -
- - {/* Mobile Search Input - Conditional Rendering */} - {isSearchVisible && ( -
-
- - - - -
-
- )} - - {/* Desktop Layout */} -
- {/* Desktop Title */} - - Home - - - {/* Desktop Search Bar */} -
- - - - -
- - {/* Desktop Icons and Profile */} -
- {/* Notification Icon */} -
- -
- - {/* Message Icon */} -
- -
- - {/* Profile Section */} -
- Profile - Intern - -
-
-
-
-
- ); -}; - -export default TopNavbar; diff --git a/src/Components/URIs.js b/src/Components/URIs.js deleted file mode 100644 index 8f30ef0..0000000 --- a/src/Components/URIs.js +++ /dev/null @@ -1,3 +0,0 @@ -const userIcon = "https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=3560&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"; - -export { userIcon } \ No newline at end of file diff --git a/src/Components/compIndex.js b/src/Components/compIndex.js deleted file mode 100644 index 4b3b7fa..0000000 --- a/src/Components/compIndex.js +++ /dev/null @@ -1,3 +0,0 @@ -import Navbar from "./Navbar"; -import TopNavbar from "./TopNavbar"; -export { Navbar, TopNavbar } \ No newline at end of file diff --git a/src/Components/ui/button.jsx b/src/Components/ui/button.jsx deleted file mode 100644 index bf3d2ef..0000000 --- a/src/Components/ui/button.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva } from "class-variance-authority"; - -import { cn } from "@/lib/utils" - -const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", - { - variants: { - variant: { - default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", - outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", - }, - size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", - }, - }, - defaultVariants: { - variant: "default", - size: "default", - }, - } -) - -const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" - return ( - () - ); -}) -Button.displayName = "Button" - -export { Button, buttonVariants } diff --git a/src/Components/ui/sheet.jsx b/src/Components/ui/sheet.jsx deleted file mode 100644 index 6741fcb..0000000 --- a/src/Components/ui/sheet.jsx +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from "react" -import * as SheetPrimitive from "@radix-ui/react-dialog" -import { cva } from "class-variance-authority"; -import { X } from "lucide-react" - -import { cn } from "@/lib/utils" - -const Sheet = SheetPrimitive.Root - -const SheetTrigger = SheetPrimitive.Trigger - -const SheetClose = SheetPrimitive.Close - -const SheetPortal = SheetPrimitive.Portal - -const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => ( - -)) -SheetOverlay.displayName = SheetPrimitive.Overlay.displayName - -const sheetVariants = cva( - "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out", - { - variants: { - side: { - top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", - bottom: - "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", - left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", - right: - "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", - }, - }, - defaultVariants: { - side: "right", - }, - } -) - -const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => ( - - - - - - Close - - {children} - - -)) -SheetContent.displayName = SheetPrimitive.Content.displayName - -const SheetHeader = ({ - className, - ...props -}) => ( -
-) -SheetHeader.displayName = "SheetHeader" - -const SheetFooter = ({ - className, - ...props -}) => ( -
-) -SheetFooter.displayName = "SheetFooter" - -const SheetTitle = React.forwardRef(({ className, ...props }, ref) => ( - -)) -SheetTitle.displayName = SheetPrimitive.Title.displayName - -const SheetDescription = React.forwardRef(({ className, ...props }, ref) => ( - -)) -SheetDescription.displayName = SheetPrimitive.Description.displayName - -export { - Sheet, - SheetPortal, - SheetOverlay, - SheetTrigger, - SheetClose, - SheetContent, - SheetHeader, - SheetFooter, - SheetTitle, - SheetDescription, -} From 9b029e78a6d22a80150acd062c3eed581867dd5c Mon Sep 17 00:00:00 2001 From: Ritu <147260911+Ritu073@users.noreply.github.com> Date: Sat, 14 Dec 2024 19:45:10 +0530 Subject: [PATCH 3/4] Add files via upload --- sidenavbar-2.html | 80 +++++++++++++++++++++++++++++++++++++++++++++++ topnavbar.html | 52 ++++++++++++++++++++++++++++++ 2 files changed, 132 insertions(+) create mode 100644 sidenavbar-2.html create mode 100644 topnavbar.html diff --git a/sidenavbar-2.html b/sidenavbar-2.html new file mode 100644 index 0000000..979455d --- /dev/null +++ b/sidenavbar-2.html @@ -0,0 +1,80 @@ + + + + + + Side Navbar with Logo + + + + +
+
+

Teams

+
+ +
+ +
+ + +
+ Logo +
+ + +
+ +
+
+ + + + diff --git a/topnavbar.html b/topnavbar.html new file mode 100644 index 0000000..b287bd2 --- /dev/null +++ b/topnavbar.html @@ -0,0 +1,52 @@ + + + + + + Dynamic Navbar + + + + +
+ +
+ InternHub Set +
+
+ + +
+ +
+
📋
+
💬
+
🔔
+ Profile +
+
+ + + + From ce06b6d64a831bcc8689e634d94bc8e19e19fc89 Mon Sep 17 00:00:00 2001 From: Ritu <147260911+Ritu073@users.noreply.github.com> Date: Mon, 16 Dec 2024 21:14:21 +0530 Subject: [PATCH 4/4] Navbar homepage responsive --- topnavbar.html | 135 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 89 insertions(+), 46 deletions(-) diff --git a/topnavbar.html b/topnavbar.html index b287bd2..333bd5a 100644 --- a/topnavbar.html +++ b/topnavbar.html @@ -1,52 +1,95 @@ - - - - Dynamic Navbar - - - - -
+ + + + Responsive Header + + + + + +
+
+ +
+ +

+ InternHub Set +

-
- InternHub Set -
-
- - -
+ +
+ + +
+ + + + +
+
+
-
-
📋
-
💬
-
🔔
- Profile -
-
+ +
+ + + - - + + User Avatar +
+
+ +