feat: Implement mobile sidebar for responsiveness

Add a mobile sidebar component for improved user experience on smaller screens. Enhance layout to accommodate the mobile sidebar functionality. Improve overall responsiveness and accessibility of the website.
Nox-HD · Oct 25, 2024 · 4b48457 · 4b48457
1 parent 1714b10
commit 4b48457
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 11 deletions.
diff --git a/app/header-m.js b/app/header-m.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const HeaderM = () => {
+  return <div>HeaderM</div>;
+};
+
+export default HeaderM;
diff --git a/app/header.js b/app/header.js
@@ -60,11 +60,14 @@ const Header = () => {
         </Link>
       </div>
       <div>
-        <Link href="/" className="flex content-center items-center mx-10">
+        <Link
+          href="/mobile-sidebar"
+          className="flex h-full items-center justify-end pr-14"
+        >
           <Image
             className="invert"
             src="/menu.svg"
-            width={40}
+            width={30}
             height={0}
           ></Image>
         </Link>

diff --git a/app/layout.js b/app/layout.js
@@ -1,25 +1,26 @@
 import "./globals.css";
 import Header from "./header";
-import { GeistSans } from 'geist/font/sans';
-import { GoogleAnalytics } from '@next/third-parties/google'
+import { GeistSans } from "geist/font/sans";
+import { GoogleAnalytics } from "@next/third-parties/google";
+import HeaderM from "./header-m";
 
 export const metadata = {
   title: "NoxHD UI - UI Library for Next-Gen Websites",
   description: "UI Library for Next-Gen Websites",
   openGraph: {
-    title: 'NoxHD UI',
-    description: 'Advanced UI Library for Modern Web Applications',
-    url: 'https://ui.noxhd.com',
-    siteName: 'NoxHD UI',
+    title: "NoxHD UI",
+    description: "Advanced UI Library for Modern Web Applications",
+    url: "https://ui.noxhd.com",
+    siteName: "NoxHD UI",
     images: [
       {
-        url: 'https://ui.noxhd.com/logo.png',
+        url: "https://ui.noxhd.com/logo.png",
         width: 800,
         height: 800,
       },
     ],
-    locale: 'en_US',
-    type: 'website',
+    locale: "en_US",
+    type: "website",
   },
 };
 
@@ -29,6 +30,7 @@ export default function RootLayout({ children }) {
       <GoogleAnalytics gaId="G-53TDXRED5K" />
       <body className={GeistSans.className}>
         <Header />
+        <HeaderM />
         {children}
       </body>
     </html>