add nav changes

pennlabs · Oct 2, 2024 · 819d971 · 819d971
1 parent ef44d80
commit 819d971
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/frontend/components/styles/Nav.tsx b/frontend/components/styles/Nav.tsx
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react'
+import Image from 'next/image'
 import s from 'styled-components'
 import Link from 'next/link'
 
@@ -89,20 +90,30 @@ const NavWrapper = s.div`
   background-color: ${colors.NAV_BACKGROUND};
   text-align: center;
   min-height: 99vh;
-  position: fixed;
+  position: absolute;
 `
 
 export const Nav = () => {
   const { user } = useContext(AuthUserContext)
 
   return (
     <NavWrapper>
-      {user && <Profile user={user} />}
+      <h1 className="flex justify-center items-center gap-4">
+        <Image
+          src="/penn-mobile.svg"
+          alt="Penn Mobile"
+          width={26}
+          height={26}
+        />
+        <span className="hidden md:inline text-2xl font-medium">Portal</span>
+      </h1>
+
       <Group center>
         <NavItem icon="dashboard" title="Dashboard" link={DASHBOARD_ROUTE} />
         <NavItem icon="analytics" title="Analytics" link={ANALYTICS_ROUTE} />
         <NavItem icon="settings" title="Settings" link={SETTINGS_ROUTE} />
       </Group>
+      {/* {user && <Profile user={user} />} */}
     </NavWrapper>
   )
 }
diff --git a/frontend/components/styles/colors.ts b/frontend/components/styles/colors.ts
@@ -9,7 +9,7 @@ export const colors = {
   LIGHT_BLUE: '#d3e3f5',
   MEDIUM_BLUE: '#2175cb',
   IMAGE_BLUE: '#2D9CDB',
-  NAV_BACKGROUND: '#f7f7f7',
+  NAV_BACKGROUND: '#ffffff',
   NAV_PROFILE_BACKGROUND: '#D3E3F566',
   GRAY: '#999999',
   LIGHTER_GRAY: '#e5e5e5',

diff --git a/frontend/components/styles/sizes.ts b/frontend/components/styles/sizes.ts
@@ -1,5 +1,5 @@
 export const NAV_HEIGHT = '4.25rem'
-export const NAV_WIDTH = '14%'
+export const NAV_WIDTH = '15%'
 export const MAX_BODY_HEIGHT = `calc(100vh - ${NAV_HEIGHT})`
 
 export const DESKTOP = '1248px'