Stick the navbar to the top and change the logo

pbteja1998 · pbteja1998 · commit bbf015b8ad42 · 2021-02-18T19:14:10.000+05:30
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "faunadb": "4.0.0",
     "luxon": "1.25.0",
     "markdown-to-jsx": "7.1.1",
-    "next": "10.0.4",
+    "next": "10.0.7",
     "next-auth": "3.2.0",
     "phosphor-react": "1.1.2",
     "react": "17.0.1",
diff --git a/public/logo.png b/public/logo.png
diff --git a/src/components/HomePageFeed.tsx b/src/components/HomePageFeed.tsx
@@ -224,7 +224,7 @@ export default function HomePageFeed({
   const [session] = useSession()
   return (
     <div className="min-h-screen bg-gray-100 flex flex-col">
-      <header className="bg-white shadow-sm lg:static lg:overflow-y-visible">
+      <header className="bg-white shadow-sm sticky top-0 z-10">
         <AppNavBar />
       </header>
       <div className="py-10 flex-1">
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
@@ -11,9 +11,9 @@ export default function Logo({
 }) {
   return (
     <A href="/" className="flex items-center cursor-pointer">
-      <Image src="/logo.svg" width={size} height={size} alt="Coderplex Logo" />
-      <span className={classNames('ml-2 text-xl font-semibold', className)}>
-        Coderplex
+      <Image src="/logo.png" width={size} height={size} alt="Coderplex Logo" />
+      <span className={classNames('ml-2 text-xl font-medium', className)}>
+        Coderplex Community
       </span>
     </A>
   )
diff --git a/src/components/ui/navbar/NavBar.tsx b/src/components/ui/navbar/NavBar.tsx
@@ -22,7 +22,10 @@ const NavBar = ({
 }: NavBarProps) => {
   const [isNavBarOpen, setIsNavBarOpen] = useState(false)
   return (
-    <nav className={classNames('bg-white shadow', className)} {...rest}>
+    <nav
+      className={classNames('bg-white shadow sticky top-0 z-10', className)}
+      {...rest}
+    >
       <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
         <div className="flex justify-between h-16">
           <div className="flex">
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -55,7 +55,7 @@ class MyDocument extends Document {
           ></script>
           <script src="https://unpkg.com/phosphor-icons" defer></script>
         </Head>
-        <body className="overflow-auto bg-gray-50">
+        <body className="bg-gray-50">
           <Main />
           <NextScript />
         </body>
diff --git a/yarn.lock b/yarn.lock
