changes: UI

src/App.js

@@ -1,7 +1,8 @@
 import "./App.css";
+import Layout from "./components/Layout";
 
 function App() {
- return <div>Hello</div>;
+ return <Layout />;
 }
 
 export default App;

src/components/Header.js

@@ -0,0 +1,79 @@
+import React from "react";
+import Logo from "../assets/youtube_logo.jpg";
+import { useDispatch } from "react-redux";
+import { toggleMenu } from "../redux/appSlice";
+
+const Header = () => {
+ const dispatch = useDispatch();
+
+ const handleToggleMenu = () => {
+ dispatch(toggleMenu());
+ };
+
+ return (
+ <header className="bg-white h-16 relative sm:fixed w-full px-4 sm:px-6 z-10 flex items-center justify-between">
+ <div className="flex items-center">
+ <div onClick={handleToggleMenu}>
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth="1.5"
+ stroke="currentColor"
+ className="w-6 h-6 cursor-pointer hidden sm:block"
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+ />
+ </svg>
+ </div>
+ <img
+ src={Logo}
+ alt="youtube_logo"
+ className="h-14 ml-0 sm:ml-4 cursor-pointer"
+ />
+ </div>
+ <div className="flex-1 flex justify-center">
+ <input
+ type="text"
+ placeholder="Search"
+ className="w-8/12 sm:w-5/12 py-1 px-2 sm:px-2 sm:py-2 rounded-l-full border border-[#ccc] outline-1 outline-blue-700"
+ />
+ <button className=" hover:bg-gray-200 rounded-r-full sm:py-2 px-4 border border-[#ccc]">
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ strokeWidth="1.5"
+ stroke="currentColor"
+ className="w-6 h-6 "
+ >
+ <path
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
+ />
+ </svg>
+ </button>
+ </div>
+ <div>
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ viewBox="0 0 24 24"
+ fill="currentColor"
+ className="w-6 h-6 cursor-pointer"
+ >
+ <path
+ fillRule="evenodd"
+ d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+ clipRule="evenodd"
+ />
+ </svg>
+ </div>
+ </header>
+ );
+};
+
+export default Header;

src/components/Layout.js

@@ -0,0 +1,27 @@
+import React from "react";
+import Header from "./Header";
+import Sidebar from "./Sidebar";
+import SearchButtons from "./SearchButtons";
+import MainComponent from "./MainComponent";
+
+const Layout = () => {
+ return (
+ <div className="flex flex-col sm:flex-row">
+ <Header />
+ <div className="flex flex-col sm:flex-row">
+ <div className="hidden sm:block">
+ <Sidebar />
+ </div>
+ <div>
+ <SearchButtons />
+ <MainComponent />
+ </div>
+ </div>
+ <div className="block sm:hidden">
+ <Sidebar />
+ </div>
+ </div>
+ );
+};
+
+export default Layout;

src/components/MainComponent.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+const MainComponent = () => {
+ const { isMenuOpen } = useSelector((store) => store.app);
+
+ return (
+ <main
+ className={`overflow-y-auto w-full sm:w-[calc(100%-6rem)] pt-3 sm:px-0 relative top-0 sm:top-28 left-0 ${
+ isMenuOpen
+ ? "sm:left-56 xl:left-24 xl:w-[calc(100%-6rem)]"
+ : " sm:left-24 xl:left-56 xl:w-[calc(100%-14rem)]"
+ } z-5`}
+ ></main>
+ );
+};
+
+export default MainComponent;

src/components/SearchButtons.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+const suggestions = [
+ "All",
+ "Music",
+ "Computer Programming",
+ "Comedy",
+ "News",
+ "Podcasts",
+ "Coding",
+ "Modi",
+ "Cricket",
+ "Movies",
+ "ReactJS tutorials",
+ "Podcasts",
+ "Coding",
+ "Modi",
+ "Cricket",
+ "Movies",
+ "ReactJS tutorials",
+];
+
+const SearchButtons = () => {
+ const { isMenuOpen } = useSelector((store) => store.app);
+ return (
+ <div
+ className={`search-buttons bg-white flex items-center h-12 ml-3 sm:px-0 w-full sm:w-[calc(100%-6rem)] relative sm:fixed overflow-x-auto top-0 sm:top-16 left-0 ${
+ isMenuOpen
+ ? "sm:left-56 xl:left-24 xl:w-[calc(100%-6rem)]"
+ : "sm:left-24 xl:left-56 xl:w-[calc(100%-14rem)]"
+ } z-10`}
+ >
+ {suggestions.map((suggestion, id) => {
+ return (
+ <button
+ key={id}
+ className="py-2 px-3 bg-gray-200 rounded-lg mr-4 text-[14px] font-medium whitespace-nowrap"
+ >
+ {suggestion}
+ </button>
+ );
+ })}
+ </div>
+ );
+};
+
+export default SearchButtons;

src/components/Sidebar.js

@@ -0,0 +1,163 @@
+import React from "react";
+import HomeOutlined from "../assets/homeOutlined.svg";
+import shortsOutlined from "../assets/shortsOutlined.svg";
+import subscriptionsOutlined from "../assets/subscriptionsOutlined.svg";
+import library from "../assets/library.svg";
+import yourChannel from "../assets/yourChannel.svg";
+import history from "../assets/history.svg";
+import yourVideos from "../assets/yourVideos.svg";
+import watchLater from "../assets/watchLater.svg";
+import trending from "../assets/trending.svg";
+import shopping from "../assets/shopping.svg";
+import music from "../assets/music.svg";
+import movies from "../assets/movies.svg";
+import live from "../assets/live.svg";
+import gaming from "../assets/gaming.svg";
+import news from "../assets/news.svg";
+import sports from "../assets/sports.svg";
+import learning from "../assets/learning.svg";
+import fashion from "../assets/fashion.svg";
+import podcasts from "../assets/podcasts.svg";
+import { useSelector } from "react-redux";
+import SidebarList from "./SidebarList";
+
+const sidebarContents = [
+ {
+ id: 1,
+ title: "Home",
+ icon: HomeOutlined,
+ },
+ {
+ id: 2,
+ title: "Shorts",
+ icon: shortsOutlined,
+ },
+ {
+ id: 3,
+ title: "Subscriptions",
+ icon: subscriptionsOutlined,
+ },
+ {
+ id: 4,
+ title: "Library",
+ icon: library,
+ },
+ {
+ id: 5,
+ title: "Your channel",
+ icon: yourChannel,
+ },
+ {
+ id: 6,
+ title: "History",
+ icon: history,
+ },
+ {
+ id: 7,
+ title: "Your videos",
+ icon: yourVideos,
+ },
+ {
+ id: 8,
+ title: "Watch later",
+ icon: watchLater,
+ },
+ {
+ id: 9,
+ title: "Trending",
+ icon: trending,
+ },
+ {
+ id: 10,
+ title: "Shopping",
+ icon: shopping,
+ },
+ {
+ id: 11,
+ title: "Music",
+ icon: music,
+ },
+ {
+ id: 12,
+ title: "Movies",
+ icon: movies,
+ },
+ {
+ id: 13,
+ title: "Live",
+ icon: live,
+ },
+ {
+ id: 14,
+ title: "Gaming",
+ icon: gaming,
+ },
+ {
+ id: 15,
+ title: "News",
+ icon: news,
+ },
+ {
+ id: 16,
+ title: "Sports",
+ icon: sports,
+ },
+ {
+ id: 17,
+ title: "Learning",
+ icon: learning,
+ },
+ {
+ id: 18,
+ title: "Fashion & Beauty",
+ icon: fashion,
+ },
+ {
+ id: 19,
+ title: "Podcasts",
+ icon: podcasts,
+ },
+];
+
+const Sidebar = () => {
+ const { isMenuOpen } = useSelector((store) => store.app);
+
+ return (
+ <>
+ <aside
+ className={`sidebar ${
+ isMenuOpen ? "sm:w-56 xl:w-24" : "sm:w-24 xl:w-56"
+ } h-16 pb-20 sm:h-full p-2 sm:pr-8 fixed bg-white bottom-0 flex flex-row sm:flex-col justify-evenly sm:justify-start sm:top-16 overflow-y-auto z-6`}
+ >
+ {sidebarContents.slice(0, 4).map((content) => {
+ const { title, icon, id } = content;
+ return <SidebarList title={title} icon={icon} id={id} />;
+ })}
+
+ <div
+ className={`${
+ isMenuOpen ? "sm:block xl:hidden" : "sm:hidden xl:block"
+ }`}
+ >
+ <p className="border-t border-gray-300 my-4"></p>
+
+ {sidebarContents.slice(4, 8).map((content) => {
+ const { title, icon, id } = content;
+ return <SidebarList title={title} icon={icon} id={id} />;
+ })}
+
+ <p className="border-t border-gray-300 my-4"></p>
+
+ <h3 className="ml-5 font-bold mb-2">Explore</h3>
+
+ {sidebarContents.slice(8, 20).map((content) => {
+ const { title, icon, id } = content;
+ return <SidebarList title={title} icon={icon} id={id} />;
+ })}
+ </div>
+ </aside>
+ </>
+ );
+};
+
+export default Sidebar;

src/components/SidebarList.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+const SidebarList = ({ title, icon, id }) => {
+ const { isMenuOpen } = useSelector((store) => store.app);
+
+ return (
+ <div
+ key={id}
+ className={`flex flex-col ${
+ isMenuOpen
+ ? "sm:flex-row sm:gap-5 xl:gap-0 xl:flex-col"
+ : "sm:flex-col sm:gap-0 xl:gap-5 xl:flex-row"
+ } items-center hover:bg-gray-200 py-2 px-4 rounded-lg cursor-pointer`}
+ >
+ <img className="w-6" src={icon} alt="" />
+ <p
+ className={`text-[10px] ${
+ isMenuOpen
+ ? "sm:text-[14px] xl:text-[10px]"
+ : "sm:text-[10px] xl:text-[14px]"
+ } font-medium text-left`}
+ >
+ {title}
+ </p>
+ </div>
+ );
+};
+
+export default SidebarList;