diff --git a/src/assets/css/constants.scss b/src/assets/css/constants.scss
index 2cacf14..edf5734 100644
--- a/src/assets/css/constants.scss
+++ b/src/assets/css/constants.scss
@@ -2,4 +2,7 @@ $main-color: #00D4FF;
$background-color: #F5F5F5;
$font-main-color: #4D4D4D;
$font-secondary-color: #9E9E9E;
-$focus-color: #DDDDDD
+$focus-color: #DDDDDD;
+$border-color: rgba(204, 204, 204, 0.33);
+$url-color: rgba(102, 102, 102, .8);
+$url-active-color: #ccc
\ No newline at end of file
diff --git a/src/assets/css/pages/header.scss b/src/assets/css/pages/header.scss
index 03616b6..347e031 100644
--- a/src/assets/css/pages/header.scss
+++ b/src/assets/css/pages/header.scss
@@ -1,4 +1,5 @@
@use "@/assets/css/mixins" as mixins;
+@use "@/assets/css/constants" as constants;
.nav {
display: flex;
@@ -13,7 +14,7 @@
bottom: {
width: 1px;
style: solid;
- color: rgba(204, 204, 204, .33);
+ color: constants.$border-color;
}
}
animation: .5s ease both;
@@ -58,7 +59,7 @@
a {
padding: 5px 20px;
- color: rgba(102, 102, 102, .8);
+ color: constants.$url-color;
}
}
@@ -67,7 +68,7 @@
bottom: {
width: 2px;
style: solid;
- color: #CCC;
+ color: constants.$url-active-color;
};
};
}
@@ -76,6 +77,77 @@
transform: translateY(-5px);
}
}
+
+ .dropdown-menu-button {
+ display: none;
+ margin: 0 20px;
+ width: 45px;
+ height: 45px;
+ justify-content: center;
+ align-items: center;
+ border-radius: 6px;
+ }
+
+ .dropdown-menu-button.active {
+ background-color: transparentize(constants.$focus-color, 0.8);
+ border: {
+ width: 1px;
+ color: constants.$focus-color;
+ style: solid;
+ };
+ }
+
+ @media screen and (max-width: 900px) {
+ .menu {
+ display: none;
+ }
+
+ .dropdown-menu-button {
+ display: flex;
+ }
+ }
+ }
+}
+
+.dropdown-menu-content {
+ display: none;
+
+ @media screen and (max-width: 900px) {
+ display: none;
+ position: fixed;
+ width: 100%;
+ top: 70px;
+ border: {
+ width: 1px;
+ color: constants.$border-color;
+ style: solid;
+ };
+ background-color: white;
+ z-index: 1;
+
+ ul {
+ li {
+ font-size: 1.2em;
+ text-align: center;
+
+ a {
+ display: block;
+ width: 100%;
+ height: 100%;
+ padding: 10px;
+ }
+
+ :hover {
+ background-color: constants.$focus-color;
+ }
+ }
+ }
+ }
+}
+
+@media screen and (max-width: 900px){
+ .dropdown-menu-content.show {
+ display: block;
}
}
diff --git a/src/assets/svg/menu.svg b/src/assets/svg/menu.svg
new file mode 100644
index 0000000..46ac707
--- /dev/null
+++ b/src/assets/svg/menu.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/components/common/HideScrollbar.tsx b/src/components/common/HideScrollbar.tsx
index d28e0f5..de3a10a 100644
--- a/src/components/common/HideScrollbar.tsx
+++ b/src/components/common/HideScrollbar.tsx
@@ -376,7 +376,6 @@ const HideScrollbar = forwardRef((prop
setVerticalScrollbarLength(
(rootRef.current.clientHeight / (contentRef.current?.clientHeight ?? 0)) * 100
)
- console.log(horizontalScrollbarLength)
rootRef.current &&
setHorizontalScrollbarLength(
diff --git a/src/components/home/index.tsx b/src/components/home/index.tsx
index f63d264..6b43da6 100644
--- a/src/components/home/index.tsx
+++ b/src/components/home/index.tsx
@@ -11,6 +11,7 @@ const Home: React.FC = () => {
const {
hideScrollbarRef,
navbarHiddenState: { navbarHidden, setNavbarHidden },
+ showDropdownMenuState: {setShowDropdownMenu},
preventScrollState: { setPreventScroll }
} = useContext(MainFrameworkContext)
@@ -37,6 +38,7 @@ const Home: React.FC = () => {
const handleScrollToContent = (index: number) => {
return () => {
+ setShowDropdownMenu(false)
if (!index) {
setNavbarHidden(true)
hideScrollbarRef.current?.scrollY(0)
diff --git a/src/constants/Common.constants.ts b/src/constants/Common.constants.ts
index e58a345..34b9302 100644
--- a/src/constants/Common.constants.ts
+++ b/src/constants/Common.constants.ts
@@ -1,4 +1,4 @@
-const PRODUCTION_NAME = 'Pinnacle OA'
+const PRODUCTION_NAME = 'FatWeb'
const TOKEN_NAME = 'JWT_TOKEN'
const COLOR_PRODUCTION = '#00D4FF'
const COLOR_BACKGROUND = '#F5F5F5'
diff --git a/src/pages/MainFramework.tsx b/src/pages/MainFramework.tsx
index d2b9da6..24bcc24 100644
--- a/src/pages/MainFramework.tsx
+++ b/src/pages/MainFramework.tsx
@@ -3,6 +3,8 @@ import '@/assets/css/pages/header.scss'
import router from '@/router'
import LoadingMask from '@/components/common/LoadingMask'
import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar'
+import Icon from '@ant-design/icons'
+import { COLOR_FONT_SECONDARY } from '@/constants/Common.constants.ts'
export const MainFrameworkContext = createContext<{
navbarHiddenState: {
@@ -21,6 +23,10 @@ export const MainFrameworkContext = createContext<{
showHorizontalScrollbar: boolean
setShowHorizontalScrollbar: (newValue: boolean) => void
}
+ showDropdownMenuState: {
+ showDropdownMenu: boolean
+ setShowDropdownMenu: (newValue: boolean) => void
+ }
hideScrollbarRef: React.RefObject
}>({
navbarHiddenState: {
@@ -39,6 +45,10 @@ export const MainFrameworkContext = createContext<{
showHorizontalScrollbar: false,
setShowHorizontalScrollbar: () => undefined
},
+ showDropdownMenuState: {
+ showDropdownMenu: false,
+ setShowDropdownMenu: () => undefined
+ },
hideScrollbarRef: createRef()
})
@@ -54,11 +64,16 @@ const MainFramework: React.FC = () => {
const [preventScroll, setPreventScroll] = useState(false)
const [showVerticalScrollbar, setShowVerticalScrollbar] = useState(false)
const [showHorizontalScrollbar, setShowHorizontalScrollbar] = useState(false)
+ const [showDropdownMenu, setShowDropdownMenu] = useState(false)
useEffect(() => {
setNavbarHidden(false)
}, [pathname])
+ const handleMenuDropdownButtonClick = () => {
+ setShowDropdownMenu(!showDropdownMenu)
+ }
+
return (
<>
{
isShowHorizontalScrollbar={true}
>
-
-
- FatWeb
-
-