diff --git a/package-lock.json b/package-lock.json index 02aad00..6fcc0c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,13 @@ "name": "frontend", "version": "0.1.0", "dependencies": { +<<<<<<< HEAD +======= + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-regular-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.0", +>>>>>>> origin/master "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -15,6 +22,10 @@ "postcss": "^8.4.38", "react": "^18.2.0", "react-dom": "^18.2.0", +<<<<<<< HEAD +======= + "react-responsive": "^10.0.0", +>>>>>>> origin/master "react-scripts": "5.0.1", "tailwindcss": "^3.4.3", "web-vitals": "^2.1.4" @@ -2379,6 +2390,66 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, +<<<<<<< HEAD +======= + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz", + "integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==", + "hasInstallScript": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.2.tgz", + "integrity": "sha512-5CdaCBGl8Rh9ohNdxeeTMxIj8oc3KNBgIeLMvJosBMdslK/UnEB8rzyDRrbKdL1kDweqBPo4GT9wvnakHWucZw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.5.2.tgz", + "integrity": "sha512-iabw/f5f8Uy2nTRtJ13XZTS1O5+t+anvlamJ3zJGLEVE2pKsAWhPv2lq01uQlfgCX7VaveT3EVs515cCN9jRbw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz", + "integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==", + "hasInstallScript": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.5.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz", + "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, +>>>>>>> origin/master "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -6485,6 +6556,14 @@ } } }, +<<<<<<< HEAD +======= + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==" + }, +>>>>>>> origin/master "node_modules/css-minimizer-webpack-plugin": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-3.4.1.tgz", @@ -9439,6 +9518,14 @@ "node": ">=10.17.0" } }, +<<<<<<< HEAD +======= + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, +>>>>>>> origin/master "node_modules/iconv-lite": { "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", @@ -12551,6 +12638,17 @@ "tmpl": "1.0.5" } }, +<<<<<<< HEAD +======= + "node_modules/matchmediaquery": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.4.2.tgz", + "integrity": "sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, +>>>>>>> origin/master "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -15105,6 +15203,26 @@ "node": ">=0.10.0" } }, +<<<<<<< HEAD +======= + "node_modules/react-responsive": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-10.0.0.tgz", + "integrity": "sha512-N6/UiRLGQyGUqrarhBZmrSmHi2FXSD++N5VbSKsBBvWfG0ZV7asvUBluSv5lSzdMyEVjzZ6Y8DL4OHABiztDOg==", + "dependencies": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.4.2", + "prop-types": "^15.6.1", + "shallow-equal": "^3.1.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, +>>>>>>> origin/master "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", @@ -15960,6 +16078,14 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, +<<<<<<< HEAD +======= + "node_modules/shallow-equal": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-3.1.0.tgz", + "integrity": "sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==" + }, +>>>>>>> origin/master "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 9d97c25..fd58633 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { +<<<<<<< HEAD +======= + "@fortawesome/fontawesome-svg-core": "^6.5.2", + "@fortawesome/free-regular-svg-icons": "^6.5.2", + "@fortawesome/free-solid-svg-icons": "^6.5.2", + "@fortawesome/react-fontawesome": "^0.2.0", +>>>>>>> origin/master "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -10,6 +17,10 @@ "postcss": "^8.4.38", "react": "^18.2.0", "react-dom": "^18.2.0", +<<<<<<< HEAD +======= + "react-responsive": "^10.0.0", +>>>>>>> origin/master "react-scripts": "5.0.1", "tailwindcss": "^3.4.3", "web-vitals": "^2.1.4" diff --git a/src/App.js b/src/App.js index 46a0f5d..3a37403 100644 --- a/src/App.js +++ b/src/App.js @@ -1,3 +1,4 @@ +<<<<<<< HEAD import DemoComponent from "./DemoComponent"; @@ -5,6 +6,17 @@ function App() { return ( <div> <DemoComponent /> +======= +import NotificationBar from "./pages/components/NotificationBar"; +import Home from "./pages/Home"; +function App() { + return ( + <div> + <NotificationBar /> + <div> + <Home /> + </div> +>>>>>>> origin/master </div> ); } diff --git a/src/pages/About.jsx b/src/pages/About.jsx new file mode 100644 index 0000000..52ec03b --- /dev/null +++ b/src/pages/About.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Dashboard from './components/Dashboard'; +import SideBar from './components/SideBar'; +const About = () => { + return ( + <div> + <SideBar pageContent={Dashboard} /> + </div> + ) +} + +export default About \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx new file mode 100644 index 0000000..3603ebe --- /dev/null +++ b/src/pages/Home.jsx @@ -0,0 +1,12 @@ +import React from 'react'; +import Dashboard from './components/Dashboard'; +import SideBar from './components/SideBar'; +const Home = () => { + return ( + <div> + <SideBar pageContent={Dashboard} /> + </div> + ) +} + +export default Home \ No newline at end of file diff --git a/src/pages/components/Dashboard.jsx b/src/pages/components/Dashboard.jsx new file mode 100644 index 0000000..3d2795c --- /dev/null +++ b/src/pages/components/Dashboard.jsx @@ -0,0 +1,63 @@ +import React from 'react' +import img from "./img.png"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faGreaterThan,faFolderOpen,faChevronCircleRight,faComments,faEllipsisVertical,faLessThan } from '@fortawesome/free-solid-svg-icons'; + +const Dashboard = (darkMode) => { + return ( + <div className=' pt-10 ' > + <div className={`flex justify-between ${darkMode ? 'text-gray-500' : 'text-white'}`}> + <div className='flex text-gray-500 text-sm'> + <FontAwesomeIcon icon={faFolderOpen} className='text-gray-300 pl-0 pr-3 pt-2 text-xs'/> + <FontAwesomeIcon icon={faLessThan} className='text-gray-300 pr-1 text-xs pt-2'/> + <FontAwesomeIcon icon={faGreaterThan} className='text-gray-300 text-xs pr-2 pt-2' /> + <ul className='flex' style={{ flexWrap: 'nowrap' }}> + <li className={`pl-3 pt-1 text-sm ${darkMode ? 'text-gray-500' : 'text-white'}`} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}> + <FontAwesomeIcon icon={faChevronCircleRight} className='text-xs text-gray-300 pr-1'/> +π Getting Started + </li> + </ul> + </div> + <div className={`flex flex-grow justify-end text-sm ${darkMode ? 'text-gray-500' : 'text-white'}`}> + <a href='/share'><span className='pl-2 pt-1'>Share</span></a> + <a href='/comments'><span className='pl-2 pt-1'><FontAwesomeIcon icon={faComments} /></span></a> + <a href='/rate-us'><span className='pl-2 pt-1'>β</span></a> + <a href='/more'><span className='pl-2 pt-1 pr-1'><FontAwesomeIcon icon={faEllipsisVertical} /></span></a> + </div> + </div> + <h1 style={{fontSize:"2.4rem",textWrap:"wrap",paddingTop:"1rem"}}>π Getting Started</h1> + <div className={`h-auto w-50 p-2 text-sm rounded-md m4 p-3 ${darkMode ? 'bg-gray-200 text-black' : 'bg-gray-100 text-white'} mt-10 mb-5`}> + <p className='text-gray-500' style={{fontSize:"1rem",textWrap:"wrap"}}>πThis doc is in your private channel, where you can store your private work. You can share docs one by one from here, but to properly organize your team's knowledge base, use workspace channels.<br/> +You can make channels public to make all docs visible to everyone on the team, or +private if you want the channel's docs to only be visible by a selection of teammates.</p> + </div> + <h2 style={{fontSize:"1.8rem",marginBottom:"2rem"}}>Collaborate with your team with these three features</h2> + <h3 style={{fontSize:"1.5rem",marginBottom:"1rem"}}>β Docs</h3> +<div className='flex justify-center mb-14'> +<img src={img} alt='feature' width="75%" height="auto"/> + +</div> +<form className="max-w-md mx-auto"> + <label htmlFor="default-search" className={`mb-2 text-sm font-medium sr-only ${darkMode ? 'text-white' : 'text-black'}`}>Search</label> + <div className="relative"> + <input + type="search" + id="default-search" + className={`block w-full p-3 pr-16 ps-2 text-xs border border-gray-300 rounded-lg focus:ring-gray-500 focus:border-gray-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:border-gray-500 ${darkMode ? 'text-black bg-gray-700 dark:bg-gray-100' : 'text-black bg-gray-100 dark:bg-gray-100'} mb-10`} + placeholder="π‘ Give it a go by typing / below" + required +/> + + </div> + </form> + <h3 style={{fontSize:"1.5rem",marginBottom:"2rem"}}>Features</h3> + <ul> + <li className='mb-5'>Lorem p adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum.</li> + <li className='mb-5'>Ada banyak variasi tulisan Lorem Ipsum yang tersedia, tapi kebanyakan sudah mengalami perubahan bentuk, entah karena unsur humor atau kalimat yang diacak hingga nampak sangat tidak masuk akal. Jika anda ingin menggunakan tulisan Lorem Ipsum, anda harus yakin tidak ada bagian yang memalukan yang tersembunyi di tengah naskah tersebut. Semua generator Lorem Ipsum di internet cenderung untuk mengulang bagian-bagian tertentu. Karena itu inilah generator pertama yang sebenarnya di internet. Ia menggunakan kamus perbendaharaan yang terdiri dari 200 kata Latin, yang digabung dengan banyak contoh struktur kalimat untuk menghasilkan Lorem Ipsun yang nampak masuk akal. Karena itu Lorem Ipsun yang dihasilkan akan selalu bebas dari pengulangan, unsur humor yang sengaja dimasukkan, kata yang tidak sesuai dengan karakteristiknya dan lain sebagainya.</li> + <li className='mb-5'>Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti "Bagian isi disini, bagian isi disini", sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat "Lorem Ipsum" akan berujung pada banyak situs web yang masih dalam tahap pengembangan. Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja, kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)</li> + </ul> + </div> + ) +} + +export default Dashboard \ No newline at end of file diff --git a/src/pages/components/Dropdown.jsx b/src/pages/components/Dropdown.jsx new file mode 100644 index 0000000..99cb895 --- /dev/null +++ b/src/pages/components/Dropdown.jsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCaretDown } from '@fortawesome/free-solid-svg-icons'; + +function Dropdown({ title, items, darkMode ,faicon}) { + const [isOpen, setIsOpen] = useState(false); + + const toggleDropdown = () => { + setIsOpen(!isOpen); + }; + + return ( + <li> + <div className="relative inline-block text-white"> + <button + onClick={toggleDropdown} + className="flex items-center rounded px-3 py-2 focus:outline-none" + > + <FontAwesomeIcon + icon={faCaretDown} + className={`transform transition-transform duration-300 ${ + !isOpen ? '-rotate-90' : '' + } ${darkMode ? 'text-white' : 'text-gray-500'}`} + /> + <FontAwesomeIcon + icon={faicon} + className={`${darkMode ? 'text-white' : 'text-gray-500'} pl-4`} + /> + <h6 className={`pl-2 text-sm ${darkMode ? 'text-white' : 'text-gray-500'}`}>{title}</h6> + </button> + {isOpen && ( + <div className="dropdown-content"> + <ul className={`py-1 text-xs ${darkMode ? 'text-white' : 'text-gray-500'}`}> + {items.map((item, index) => ( + <li key={index}> + <a href={item.link} className={`block px-4 py-2 hover:bg-gray-100 hover:bg-gray-100 group ${darkMode ? 'dark:hover:bg-gray-700' : 'dark:hover:bg-gray-100'}`}> + {item.label} + </a> + </li> + ))} + </ul> + </div> + )} + </div> + </li> + ); +} + +export default Dropdown; diff --git a/src/pages/components/ListItem.jsx b/src/pages/components/ListItem.jsx new file mode 100644 index 0000000..a60b7c4 --- /dev/null +++ b/src/pages/components/ListItem.jsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; + +const ListItem = ({ name, link, icon, darkMode ,iconclass}) => { + return ( + <li className='text-sm'> + <a href={link} className={`flex items-center p-2 rounded-lg group ${darkMode ? 'text-white dark:hover:bg-gray-700' : 'text-gray-500 dark:hover:bg-gray-100'}`}> + <FontAwesomeIcon icon={icon} className={` ${iconclass}`}/> + <span className="ms-3">{name}</span> + </a> + </li> + ); +}; + +export default ListItem; diff --git a/src/pages/components/NotificationBar.jsx b/src/pages/components/NotificationBar.jsx new file mode 100644 index 0000000..2afa5fb --- /dev/null +++ b/src/pages/components/NotificationBar.jsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faBell } from '@fortawesome/free-regular-svg-icons'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; + +const NotificationBar = () => { + const [notificationVisible, setNotificationVisible] = useState(true); + + const toggleNotification = () => { + setNotificationVisible(!notificationVisible); + }; + + return ( + <div> + {notificationVisible && ( + <div className="bg-blue-600 p-3 text-white text-center flex items-center justify-center notification fixed top-0 left-0 right-0 z-50"> + <div style={{ whiteSpace: "nowrap" }}>Enable browser notifications to avoid missing out on important activities.</div> + <div className='flex text-center'> + <button className='bg-blue-700 hover:bg-blue-800 p-1 pl-2 pr-2 rounded mr-3' style={{ whiteSpace: "nowrap", fontSize: "0.6rem" }}> + <FontAwesomeIcon icon={faBell} className='pr-1'/> Enable notifications + </button> + <button onClick={toggleNotification} className=""> + <FontAwesomeIcon icon={faTimes} className="text-white text-base" /> + </button> + </div> + </div> + )} + </div> + ); +}; + +export default NotificationBar; diff --git a/src/pages/components/SideBar.jsx b/src/pages/components/SideBar.jsx new file mode 100644 index 0000000..5b09034 --- /dev/null +++ b/src/pages/components/SideBar.jsx @@ -0,0 +1,161 @@ +import React, { useState,useEffect } from 'react'; +import { useMediaQuery } from 'react-responsive'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faSearch, faTimes, faSun, faMoon, faGraduationCap, faLock, faBook, faUserPlus, faArchive, faCircleHalfStroke,faBars, faDownload, faQuestion } from '@fortawesome/free-solid-svg-icons'; +import logo from "./logo.png"; +import { faBell } from '@fortawesome/free-solid-svg-icons'; +import { faClock, faComments } from '@fortawesome/free-regular-svg-icons'; +import Dropdown from './Dropdown'; +import ListItem from './ListItem'; + +const SideBar = ({ pageContent: PageContentComponent, darkmode }) => { + const [sidebarOpen, setSidebarOpen] = useState(false); + const isMobile = useMediaQuery({ maxWidth: 640 }); + const [darkMode, setDarkMode] = useState(false); + + useEffect(() => { + // Update body class when darkMode changes + if (darkMode) { + document.body.classList.add('dark'); + } else { + document.body.classList.remove('dark'); + } + }, [darkMode]); + + const toggleSidebar = () => { + setSidebarOpen(!sidebarOpen); + }; + + const closeSidebar = () => { + setSidebarOpen(false); + }; + + const toggleDarkMode = () => { + setDarkMode(!darkMode); + }; + + const sidebarClass = `fixed top-0 left-0 z-40 w-65 sm:w-70 h-screen transition-transform ${ + sidebarOpen ? '-translate-x-0' : '-translate-x-full' + } sm:translate-x-0 ${darkMode ? 'dark:bg-gray-800' : 'bg-gray-50'}`; + + const pageContentClass = `p-4 sm:ml-64 pl-10 ${ + darkMode ? 'bg-gray-900 text-white' : 'bg-white text-black' + }`; + + return ( + <div> + <div> + <div className={`${darkMode?'bg-gray-900':'bg-white'}`}> + <button + data-drawer-target="default-sidebar" + data-drawer-toggle="default-sidebar" + aria-controls="default-sidebar" + type="button" + className={`inline-flex items-center p-2 mt-2 ms-3 text-sm rounded-lg ${ + darkMode + ? 'text-gray-400 hover:bg-gray-700 focus:outline-none focus:ring-gray-600' + : 'text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-gray-200' + }`} + onClick={toggleSidebar} + > + <span className="sr-only">Open sidebar</span> + <FontAwesomeIcon icon={faBars} className="w-6 h-6" /> + </button> + </div> + + + <aside + id="default-sidebar" + className={sidebarClass} + aria-label="Sidebar" + > + {/* Close button at the top of sidebar */} + {isMobile && ( + <button + className="absolute top-0 right-0 m-1 text-gray-500 hover:text-gray-900 focus:outline-none bg-red" + onClick={closeSidebar} + > + <span className="sr-only ">Close sidebar</span> + <FontAwesomeIcon icon={faTimes} /> + </button> + )} +{/* Sidebar content */} +<div className="h-full px-3 py-4 overflow-y-auto"> + <ul className="space-y-2 font-medium"> + <li className='pt-5 flex'> + <a href="/dashboard" className={`flex items-center p-2 rounded-lg group ${darkMode ? 'text-white ' : 'text-black'}`}> + <img src={logo} alt="Logo" className="w-10 h-10 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" /> + <span className="ms-3">refero team</span> + </a> + <a className={`p-4 ${darkMode ? 'text-white' : 'text-black'}`} href='/notifications'> + <button> + <FontAwesomeIcon icon={faBell} className='pl-10'/> + </button> + </a> + </li> + <li> + <form className="max-w-md mx-auto"> + <label htmlFor="default-search" className={`mb-2 text-sm font-medium sr-only ${darkMode ? 'text-white' : 'text-black'}`}>Search</label> + <div className="relative"> + <input type="search" id="default-search" className={`block w-full p-3 pr-16 ps-2 text-xs border border-gray-300 rounded-lg focus:ring-gray-500 focus:border-gray-500 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:border-gray-500 ${darkMode ? 'text-white bg-gray-700 dark:bg-gray-700' : 'text-black bg-gray-50 dark:bg-gray-100'}`} placeholder="Ask your AI assistant" required /> + <button type="submit" className={`absolute end-2.5 bottom-2 bg-gray-700 hover:bg-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-2 py-1 ${darkMode ? 'text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800' : 'text-white dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-800'}`}><FontAwesomeIcon icon={faSearch} /></button> + </div> + </form> + </li> + <li className='pt-2 text-left pb-3'> + <a href='/pricing'> + <div className={`h-auto w-full p-2 text-sm rounded-md m4 p-1.5 ${darkMode ? 'bg-gray-700 text-white' : 'bg-gray-200 text-black'}`}> + <h1 className='text-sm'>Your team used 8/50 docs.</h1> + <p className='text-2xs text-gray-500'>Upgrade to create unlimited docs</p> + </div> + </a> + </li> + <ListItem name="catch-up" link="/catch-up" icon={faClock} darkMode={darkMode} /> + <ListItem name="Discussions" link="/Discussions" icon={faComments} darkMode={darkMode} /> + <p className={`text-base ${darkMode ? 'text-white' : 'text-black'} text-left`}>Favourites</p> + <ListItem name="π Getting Started" link="/favourites/getting-started" darkMode={darkMode} /> + <p className={`text-base ${darkMode ? 'text-white' : 'text-black'} text-left`}>My Channels</p> + <Dropdown title="My Private Channel" items={[ + { label: 'π Getting Started', link: '/My Private Channel/π Getting Started' } + ]} darkMode={darkMode} faicon={faLock}/> + <Dropdown title="Engineering" items={[ + { label: 'π Getting Started', link: '/Engineering/π Getting Started' } + ]} darkMode={darkMode} faicon={faGraduationCap}/> + <Dropdown title="Product" items={[ + { label: 'π Getting Started', link: '/Product/π Getting Started' } + ]} darkMode={darkMode} faicon={faBook}/> + <div className='relative bottom-0 pt-5'> + <ListItem icon={faUserPlus} name="Add People" link="/add" darkMode={darkMode}/> + <ListItem icon={faCircleHalfStroke} name="Templates" link="/templates" iconclass="rotate-45"darkMode={darkMode}/> + <ListItem icon={faDownload} name="Shared with me" link="/shared" darkMode={darkMode}/> + <ListItem icon={faArchive} name="Archieve" link="/archieve" darkMode={darkMode}/> + </div> + </ul> +</div> + </aside> + + {/* Dark mode toggle button */} + <button + className={`fixed bottom-10 right-3 z-50 p-3 rounded-full w-19 h-15 focus:outline-none text-center`} + onClick={toggleDarkMode} + > + <FontAwesomeIcon icon={darkMode ? faSun : faMoon} className={darkMode ? 'text-white' : 'text-black'} /> + </button> + <a href='/help'> + <button + className={`fixed bottom-0 right-4 z-50 p-3 rounded-full w-19 h-15 focus:outline-none text-center `} +> + <FontAwesomeIcon icon={faQuestion} className={darkMode ? 'text-white' : 'text-black'} /> +</button> + + </a> + {/* Main content */} + <div className={`${pageContentClass} pt-5`}> + <PageContentComponent darkMode={darkMode} /> + </div> + </div> + </div> + ); +}; + +export default SideBar; diff --git a/src/pages/components/img.png b/src/pages/components/img.png new file mode 100644 index 0000000..5f94cfe Binary files /dev/null and b/src/pages/components/img.png differ diff --git a/src/pages/components/logo.png b/src/pages/components/logo.png new file mode 100644 index 0000000..ca28980 Binary files /dev/null and b/src/pages/components/logo.png differ diff --git a/src/styles.css b/src/styles.css index 01d5b72..38376ba 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,3 +2,36 @@ @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; +<<<<<<< HEAD +======= + +body{ + font-family: sans-serif; +} +@media only screen and (max-width: 624px) { + .notification { + font-size: 0.4rem; + gap: 0.4rem; + padding-bottom: 20px; + padding-top: 20px; + text-align: center; + } + .notification button { + font-size: 0.4rem !important; + } +} + +@media only screen and (min-width: 624px) { + .notification { + font-size: 0.8rem; + gap: 4rem !important; + } + .notification button { + font-size: 0.7rem; + } +} + +.dark{ + background-color: rgb(17 24 39) !important; +} +>>>>>>> origin/master diff --git a/tailwind.config.js b/tailwind.config.js index a0cebb6..064bbc5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { +<<<<<<< HEAD content: ["./src/**/*.{html,js}"], +======= + content: ["./src/**/*.{html,js,jsx}"], +>>>>>>> origin/master theme: { extend: {}, },