desktop navbar added

jsvigneshkanna · jsvigneshkanna · commit bdd2768fbd62 · 2022-10-17T21:18:41.000+05:30
diff --git a/components/navbar.js b/components/navbar.js
@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+const Navbar = () => {
+  return (
+    <div className="nav_container">
+      <nav>
+        <Image src="/nav_logo.png" alt="logo" width={240} height={36} />
+        <div className="right_contents">
+          <div className="nav_links">
+            <Link href="/">Components</Link>
+          </div>
+          <div className="nav_links">
+            <Link href="/">Documentation</Link>
+          </div>
+          <div className="nav_links">
+            <Link href="/">About Us</Link>
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/pages/_app.js b/pages/_app.js
@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import '../styles/components/navbar_style.css';
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
diff --git a/pages/index.js b/pages/index.js
@@ -1,18 +1,18 @@
 import Head from "next/head";
 
+import Navbar from "../components/navbar";
+
 export default function Home() {
   return (
     <div>
       <Head>
-        <title>Tailwind CSS Components</title>
-        <meta name="description" content="Generated by create next app" />
+        <title>Tailwind Bootstrap</title>
+        <meta name="description" content="TailwindCSS ui component bootstrap" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <div className=" bg-slate-100 min-h-screen">
-        <nav className="flex justify-between items-center bg-teal-500 py-3 px-8">
-          <div className="font-bold text-2xl">VK</div>
-        </nav>
+        <Navbar />
       </div>
     </div>
   );
diff --git a/public/nav_logo.png b/public/nav_logo.png
diff --git a/public/nav_logo_transparent.png b/public/nav_logo_transparent.png
diff --git a/styles/components/navbar_style.css b/styles/components/navbar_style.css
@@ -0,0 +1,43 @@
+.nav_container {
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    rgb(2, 72, 248) 0%,
+    hsla(217, 97%, 47%, 0.5) 30%,
+    hsla(294, 98%, 50%, 0.5) 50%,
+    rgb(226, 3, 251) 100%
+  );
+  padding: 16px 0 16px 0;
+  color: white;
+}
+
+nav {
+  width: 75%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.right_contents {
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  gap: 72px;
+  font-weight: bold;
+  font-size: large;
+  color: white;
+}
+
+.nav_links {
+  padding: 12px;
+}
+
+.nav_links:hover,
+.nav_links:focus {
+  /* text-decoration: underline;
+  text-underline-offset: 8px;
+  text-underline-position: above; */
+  background-color: rgba(137, 43, 226, 0.501);
+  border-radius: 8px;
+}
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Google font family for poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+* {
+  font-family: 'Poppins', sans-serif;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import '../styles/globals.css'`
	`2`	`+import '../styles/components/navbar_style.css';`
`2`	`3`
`3`	`4`	`function MyApp({ Component, pageProps }) {`
`4`	`5`	`return <Component {...pageProps} />`