added navbar to main

hack4impact-calpoly · Feb 9, 2025 · 35958ec · 35958ec
1 parent 39cbfaf
commit 35958ec
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 46 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,18 +1,29 @@
+"use client";
 import type { Metadata } from "next";
 import { ChakraProvider } from "@chakra-ui/react";
+import Navbar from "@/components/Navbar";
 import "./globals.css";
-
-//! Update metadata to match your project
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
+import { usePathname } from "next/navigation";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const pathName = usePathname();
+
   return (
     <html lang="en">
       <body>
-        <ChakraProvider>{children}</ChakraProvider>
+        <ChakraProvider>
+          <div style={{ display: "flex", minHeight: "100vh" }}>
+            {pathName !== "/login" && pathName !== "/createAccount" && <Navbar />}
+            <main
+              style={{
+                flexGrow: 1,
+                marginLeft: pathName !== "/login" && pathName !== "/createAccount" ? "15rem" : "0",
+              }}
+            >
+              {children}
+            </main>
+          </div>
+        </ChakraProvider>
       </body>
     </html>
   );

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -27,7 +27,7 @@ export default function Login() {
           borderRadius="full"
           fit="contain"
           alt="Logo not Appearing"
-          src="/logo.png"
+          src="/logo1.png"
         ></Image>
         <Box
           borderRadius={"15px"}
@@ -79,7 +79,7 @@ export default function Login() {
             <Center>
               <Text color="#596334" mt={4}>
                 Don&#39;t have an account?{" "}
-                <Link href="#" style={{ textDecoration: "underline" }}>
+                <Link href="/createAccount" style={{ textDecoration: "underline" }}>
                   Sign up
                 </Link>
               </Text>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -5,40 +5,37 @@ import { PiRows } from "react-icons/pi";
 
 export default function Home() {
   return (
-    <main style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
-      <Flex direction="row">
-        <Navbar />
-        <Box>
-          <Box width="200px" bg="lavender" textAlign="center">
-            Here are some ChakraUI examples: <br />
-            <br />
-            This is a box with Chakra! Basically just a div
-          </Box>
-          A progress bar...
-          <Progress value={50} width="200px" />A tab list...
-          <Tabs width="200px">
-            <TabList>
-              <Tab>One</Tab>
-              <Tab>Two</Tab>
-              <Tab>Three</Tab>
-            </TabList>
-
-            <TabPanels>
-              <TabPanel>
-                <p>one!</p>
-              </TabPanel>
-              <TabPanel>
-                <p>two!</p>
-              </TabPanel>
-              <TabPanel>
-                <p>three!</p>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
-          The main thing to know is just to use in-line styling, and for most traditional css elements there is a Chakra
-          UI equivalent!
+    <Flex direction="row">
+      <Box>
+        <Box width="200px" bg="lavender" textAlign="center">
+          Here are some ChakraUI examples: <br />
+          <br />
+          This is a box with Chakra! Basically just a div
         </Box>
-      </Flex>
-    </main>
+        A progress bar...
+        <Progress value={50} width="200px" />A tab list...
+        <Tabs width="200px">
+          <TabList>
+            <Tab>One</Tab>
+            <Tab>Two</Tab>
+            <Tab>Three</Tab>
+          </TabList>
+
+          <TabPanels>
+            <TabPanel>
+              <p>one!</p>
+            </TabPanel>
+            <TabPanel>
+              <p>two!</p>
+            </TabPanel>
+            <TabPanel>
+              <p>three!</p>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+        The main thing to know is just to use in-line styling, and for most traditional css elements there is a Chakra
+        UI equivalent!
+      </Box>
+    </Flex>
   );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -42,12 +42,13 @@ export default function Navbar() {
   return (
     <div
       style={{
-        position: "sticky",
+        position: "fixed",
         height: "100vh",
         width: "15rem",
         backgroundColor: COLORS.primary,
         borderTopRightRadius: "20px",
         borderBottomRightRadius: "20px",
+        padding: "20px",
         justifyContent: "center",
       }}
     >
@@ -66,8 +67,8 @@ export default function Navbar() {
             src="/logo1.png"
             alt="Logo"
             style={{
-              width: "70%",
-              height: "70%",
+              width: "100%",
+              height: "85%",
               objectFit: "contain",
               justifySelf: "center",
             }}