initial commit

public/index.html

@@ -8,7 +8,15 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <!--
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
+   <style>
+    body{
+      margin: 0;
+    }
+   </style>
+<!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     --> 

src/App.css

@@ -9,4 +9,28 @@
   --boxShadow: 0px 19px 60px rgb(0 0 0 / 8%);
   --smboxShadow: -79px 51px 60px rgba(0, 0, 0, 0.08);
   --activeItem: #f799a354;
+}
+
+.App{
+  background: linear-gradient(
+    106.37deg,
+    #ffe1bc 29.63%,
+    #ffcfd1 51.55%,
+    #f3c6f1 90.85%
+  );
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-family: 'Inter', sans-serif;
+}
+
+.AppGlass{
+  display: grid;
+  height: 97%;
+  width: 97%;
+  border-radius: 2rem;
+  background-color: var(--glass);
+  overflow: hidden;
+  grid-template-columns: 11rem auto 20rem;
 }

src/App.js

@@ -1,9 +1,11 @@
 import './App.css'
-
+import Sidebar from './componemts/sidebar/Sidebar';
 function App() {
   return (
     <div className="App">
-        Subscribe Zainkeepscode
+        <div className="AppGlass">
+          <Sidebar/>
+        </div>
     </div>
   );
 }

src/Data/Data.js

@@ -0,0 +1,30 @@
+// Sidebar imports
+import {
+    UilEstate,
+    UilClipboardAlt,
+    UilUsersAlt,
+    UilPackage,
+    UilChart,
+    UilSignOutAlt,
+  } from "@iconscout/react-unicons";
+
+  export const SidebarData=[{
+    icon: UilEstate,
+    heading: "Dashboard",
+  },
+  {
+    icon: UilClipboardAlt,
+    heading: "Orders",
+  },
+  {
+    icon: UilUsersAlt,
+    heading: "Customers",
+  },
+  {
+    icon: UilPackage,
+    heading: 'Products'
+  },
+  {
+    icon: UilChart,
+    heading: 'Analytics'
+  },];

src/componemts/sidebar/Sidebar.css

@@ -0,0 +1,62 @@
+.Sidebar{
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding-top: 4rem;
+    transform: all 300ms ease;
+}
+
+.logo{
+    display: flex;
+    font-weight: bold;
+    font-size: 22px;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    height: 4%;
+}
+
+.logo img{
+    height: 3rem;
+    width: 3rem;
+}
+
+.logo span span{
+    color: var(--pink);
+}
+
+/* menu */
+.menu{
+    margin-top: 4rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.menuItem{
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    height: 2.5rem;
+    margin-left: 2rem;
+    position: relative;
+    transition: all 300ms ease;
+    font-size: 14px;
+    border-radius: 0.7rem;
+}
+
+.menuItem:hover{
+    cursor: pointer;
+}
+
+.active{
+    background-color: var(--activeItem);
+    margin-left: 0; 
+}
+
+.active::before{
+    content: '';
+    width: 8px;
+    height: 100%;
+    background: var(--pink);
+}

src/componemts/sidebar/Sidebar.jsx

@@ -0,0 +1,39 @@
+import React, { useState } from 'react'
+import Logo from '../../imgs/logo.png';
+import './Sidebar.css';
+
+import {UilSignOutAlt} from '@iconscout/react-unicons';
+import {SidebarData} from '../../Data/Data.js';
+const Sidebar = () => {
+
+    const [selected,setSelected]=useState(0);
+  return (
+   <div className="Sidebar">
+    {/*logo */}
+    <div className="logo">
+        <img src={Logo} alt="" />
+        <span>Sh<span>o</span>p</span>
+    </div>
+    {/* menu */}
+    <div className="menu">
+        {SidebarData.map((item,index)=>{
+            return(
+                <div className={selected===index?"menuItem active":"menuItem"}
+                key={index}
+                onClick={()=>setSelected(index)}>
+                    <item.icon/>
+                    <span>{item.heading}</span>
+                </div>
+            )
+        })}
+        <div className="menuItem">
+            <UilSignOutAlt/>
+        </div>
+        </div>
+
+    </div>
+
+  )
+}
+
+export default Sidebar